处理 ContentEditable 区域中的图像点击事件

【问题标题】：Handling Image Click Event in a ContentEditable region处理 ContentEditable 区域中的图像点击事件
【发布时间】：2010-07-17 01:27:30
【问题描述】：

我正在尝试自定义 jwysiwyg jquery RTE。我想构建一个图像属性编辑器，以便一旦将图像插入可编辑区域，用户就会选择它，然后会出现一个模式窗口或属性面板，允许用户编辑宽度/高度等。类似于 gmails图片插入界面。

问题是我无法找出如何处理必要的图像点击事件。有人知道我可以从哪里开始的一些示例代码或一些信息吗？

【问题讨论】：

【解决方案1】：

我刚刚开始做类似的事情。使用 jQuery 的 delegate() 方法，我让它像这样工作：

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

委托方法最酷的地方在于，它会将此事件处理程序附加到正文中的任何 img 标签，无论是现在还是将来。因此，即使是在编辑过程中插入的图像也会被连接起来。

祝你好运。

标记

【讨论】：

【解决方案2】：

我在 iOS 10 上的解决方案是向需要可点击的 img 元素添加 contenteditable="false" 属性。否则 safari 会认为你的意图是在图像之前/之后移动插入符号，如果它位于 contenteditable 元素内。

【讨论】：