Handling Image Click Event in a ContentEditable region

I am trying to customize jwysiwyg jquery RTE. I would like to build an image attributes editor so that once an image is inserted into the editable region, the user would select it and then a modal window or p开发者_运维问答roperties panel would appear allowing the user to edit the width/height etc. Analogous to gmails image insert UI.

The problem is I am having trouble finding out how to handle the necessary image click event. Anyone know some example code or some info for where I can start?

I am just starting on something similar. Using jQuery's delegate() method, I got it to work like this:

$("#bodyoftheeditordocument").delegate("img", "click", function (evt) {
   // handle click event here...
});

The cool thing about the delegate method is that it will attach this event handler to any img tag in the body, present or future. So even images inserted as part of the editing process with get wired up.

Good luck.

Mark

My solution on iOS 10 is to add a contenteditable="false" attribute to the img element which needs to be clickable. Otherwise safari will think that your intention is to just move the caret before/after the image if it's inside an contenteditable element.