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

Question

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

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

score 2 · Accepted Answer

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

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

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

祝你好运。

标记

score 0 · Accepted Answer

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

2 回答 2