TinyMCE:鼠标上的图像选择(wordpress/contentreditable）

TinyMCE : image selection on onMouseUp (wordpress / contenteditable)

本文关键字：wordpress contentreditable 选择 图像 鼠标 TinyMCE      更新时间：2023-09-26

我正在为Wordpress开发一个自定义TinyMCE编辑器。Wordpress的一个功能是Image Caption，它将<div>放在<img>标签周围。

我正在尝试实现以下目标：当用户单击<img>时，我希望选择父<div>。

为此，我在onMouseDown调度器上添加了一个自定义处理程序，用于选择标题<div>。

ed.onMouseDown.addToTop(function(ed, e) {
  // Check if it is an image or image with caption
  var parents = ed.dom.getParents(e.target,'div.amu_container');
  if ( parents.length > 0 ) {
    var container = parents[0];
    // Correct selection to amu_container
    ed.selection.select(container);
    // Prevent default
    tinymce.dom.Event.cancel(e);
  }
});

一切都很好：在所有onMouseDown处理程序之后，字幕<div>被很好地选择了。

然后在mouseUp上，FF上的一切都很好，但在Chrome上，当所有onMouseUp处理程序都完成时，<img>被选中，失去了字幕<div>的先前选择。

然而mouseUp事件是defaultPrevented。。。

有什么想法吗？

编辑：这里有一个jsfiddle复制我的问题：http://jsfiddle.net/nH8fj/5/

当用户点击图像或容器时，应选择整个<div>。在一步一步的调试中，选择是有效的，但随后只选择图像。

我使用的是Chromium 16.0.912.36 linux，这个错误可以在最新的Chrome窗口上重现。

e.target适用于webkit，但不适用于IE。在那里您必须使用e.srcElement。也许Chrome也有类似的问题。

我在这里找到了Chrome的错误报告：http://core.trac.wordpress.org/ticket/15848

相关文章：