Question

I am working with dojo editor. And I have a problem so could you help me to solve this
problem.

My problem is: how can I add event listener to tag that I input to the editor such as onClick, onMouseover, etc…

For Example : I input an image tag to the editor content:

var ed=dijit.byId("myEditor"); //my editor has id id myEditor
var img = "<img src='myPic.jpg' alt='' id='myPic'/>"; //my image tag
ed.forcus();
ed.execCommand("inserthtml", img); //insert image tag into editor content

After inserting image tag to the editor, now I want to add “click” event to it, because i want click that image and a small tooltip showed to choose align that image left or right.

Thanks for any suggestion!

Answer 1

Check out my jsFiddle example: http://jsfiddle.net/phusick/j475Q/

Basically the node you want to connect is editor.editNode:

var editor = dijit.byId("editor");
dojo.connect(editor.editNode, "ondblclick", this, "_onDblClick"); 

Afterwards, in _onDblClick method you have to find out which kind of node was dblclicked and decide whether to proceed with an action:

_onDblClick: function(e) {
    var target = e.target;
    var tag = target.tagName ? target.tagName.toLowerCase() : "";
    if(tag == "img") {        
        dojo.withGlobal(editor.window, "selectElement", selectionapi, [target]);
    }
}

I found this in the LinkDialog plugin (dijit/_editor/plugins/LinkDialog.js). Look there for more inspiration.