Inserting a popup DOM node into WYSIWYG

Question

I am trying to add a clickable div to the sceditor. The basic requirement is to use a wysiwyg and programmatically add an element into the editor, which can display a popup when the user clicks on it.

To do this I use:

 var text = "<div onClick='editdiv(this)'>"+name+"</div>";▓
 $('.sceditor').sceditor('instance').insert(text);

This inserts the div into the editor but when I click on it, I get an error saying editdiv is not defined. Whereas editdiv is a function present inside the javascript same javascript file which runs the above code.

Can someone please tell me what am I doing wrong and/or a way to achieve what I want? Thanks!

Answer 1

What you want is impossible to get without drawbacks.
Events can only be caught inside an active browsing instance (I think that's the name). Everything inside a contentEditable=true" is not an active browsing instance
Based on that, You need to terminate the contentEditable and make a new one inside. For example (code not tested):

var text = "<div contentEditable='false' onclick='editdiv(this)'><div contentEditable='true'>"+name+"</div></div>";
$('.sceditor').sceditor('instance').insert(text);

That should make that click event work as expected