feature suggestions ...

Nov 11, 2010 at 2:00 PM
  1. Insert file link (with upload)
  2. Customisable browse window
  3. Insert object ability (youtube video, mediaplayer, etc)
  4. Customisable insert window for links, images, media, etc.
  5. Browse button when inserting a link. i.e. browse local site.
  6. Customisable upload dialog

It would be great if customisations could be done through user controls.

For example if you click insert image or browse for link it will load a usercontrol as a dialog.
The usercontrol could use a some sort of javascript callback to post back all the necessary values.

I love some of the blogger UI features and I would like to replicate this through programming methods I am familiar with instead of heavy javascript.

I suppose if I could hook the button methods I could trigger an ASP.net update panel to load a user control.



Nov 11, 2010 at 2:09 PM

actually maybe I can do it this way ....


I had overlooked this.

Nov 11, 2010 at 2:13 PM

also context menues....right click a link, image, etc and be able get the dialogue back up to edit the properties.

Nov 11, 2010 at 2:37 PM

Hello, yes, if you plan to extend then you'll need to create a custom ToolBarItem. I have debated greatly context menu support, but I have been unable to prioritize. As you can see there are still a few important features lacking, such as support for object tag which is high on my list. I will provide a road map soon.

Thanks for reporting,


Nov 11, 2010 at 3:01 PM

thanks for the update...

I can't find any documentation to hook into the typps javascript.

For example if I create a custom image button and dialog and don't want to recode everything.
is there a generic method I can hook/call that I can use to insert into the editor and that will assign attributes and delegates etc?

Nov 11, 2010 at 3:45 PM

Dani, If you decide to go the custom route and create a new ToolBarItem, then you are basically on your own. Extending the existing ImagePicker is not a possibility at the moment. I couldn't come up with a use case where this would be useful and allow it without added complexity.

What you can do is reuse the Range Object exposed by the editor. This is what we use to get cursor location in the editor and insert elements etc into the designer surface. In your case since you are manipulating an image, you can insert it into the editor like this :

function ToolBarItemClick(sender,args) {
    var editor=sender;
    var lastRange = editor.rangeComponent.createRange();
    var commandName=args.get_commandName();
    switch(commandName.toLowerCase()) {
        case 'name-of-this-command':
		//do something, launch your dialog, create image etc
		//now insert that newly created image into the editor
		editor.rangeComponent.insertNodeAtSelection(yourimage, lastRange);

The range component is your friend in these situations. It takes cares of browser incompatibilities that exist specifically with IE vs the world etc,, unfortunately, rich as it maybe, I never got around to documenting it. inserNodeAtSelection is one method that can help your situation. if there is something specific you want to achieve, let me know. Images are quite tricky though, IE support is poor especially with the src url, it will always return back the relative url vs absolute. The editor internally does more trickery to achieve an absolute path + cleanse out deprecated attributes etc.

There was no initial intention to open up the image picker api for public use, but I am however currently restructuring the code in preparation for new features, and I'll keep you posted in case something changed.

Have a good day,


Nov 11, 2010 at 4:01 PM

If I use the insertNodeAtSelection will this allow me to get the attributes back out into my custom insert method?


I insert an image with a src and alt tag
I select the image to edit it and click the button again

How do I recall the alt and src? Is there a method I can call?
Even if I can only get the selected html I could parse it.

Nov 11, 2010 at 4:48 PM

You can most certainly use the range component to get the currently selected node, but I need to document this. 

While, the range component is more flexible, since your dealing with image elements you can use the another component, the toggleManager. This is the same component the editor uses internally and it's much simpler and requires less effort to explain. Briefly, in order for the toolbar items to respond to certain elements, eg if the currently selected element is a table cell, an anchor or an image the toolbar buttons respond accordingly using this component.

In case of an image you can retrieve it using get_activeNode('img') as in the example below. If the currently selected element is not an image, this will be null/undefined. You can use this in the same way for an anchor element by passing 'a' or a table cell by passing a 'td'
Soon I will document the range component so that you can use the full range of capabilities sported by this component too.

Also another thing you want to keep in mind is since everything is hosted inside an iframe, you must use the iframes document to create new elements as in the example below:

function ToolBarItemClick(sender,args) {
    var editor=sender;
    var lastRange = editor.rangeComponent.createRange();
    var commandName=args.get_commandName();
    var toggleManager = editor.get_toggleManager();
    switch(commandName.toLowerCase()) {
        case 'name-of-this-command':
		var image = toggleManager.get_activeNode('img');
		/*if the current selection is not an image
		   image will be null at this point
			image = editor.iframe.createElement('img');
			//do something
		//do something, launch your dialog etc
		//now insert the image into the editor
		editor.rangeComponent.insertNodeAtSelection(image, lastRange);


Nov 11, 2010 at 5:28 PM

thanks for your help, it sounds like you have your work cut out documenting all this!