TinyMCE：onMouseUp 上的图像选择（wordpress / contenteditable）

发布于 2025-01-03 00:40:09 字数 1340 浏览 2 评论 0原文

我正在为 Wordpress 开发一个自定义 TinyMCE 编辑器。 Wordpress 的功能之一是图像标题，它将

放在标签周围。

我试图实现以下目标：当用户单击时，我想选择父级

。

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

。

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 处理程序之后，标题

被很好地选择。

然后在 mouseUp 上，FF 上一切正常，但在 Chrome 上，当所有 onMouseUp 处理程序完成时，被选中，失去了标题

的先例选择。

但是 mouseUp 事件是 defaultPrevented...

有什么想法吗？

编辑： 这是重现我的问题的 jsfiddle ： http://jsfiddle.net/nH8fj/5/

当用户单击图像或容器，整个

应被选中。在逐步调试时，有效地完成了选择，但随后仅选择了图像。

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

原文

I'm working on a custom TinyMCE editor for Wordpress. One of the feature of Wordpress is Image Caption, which put a <div> around an <img> tag.

I'm trying to achieve the following : when a user click on an <img>, I want to get the parent <div> selected.

For this, I've added a custom handler on onMouseDown dispatcher that select the caption <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);
  }
});

All works fine : after all onMouseDown handlers, the caption <div> is well selected.

And then on mouseUp all works fine on FF, but on Chrome, when all onMouseUp handlers are finished, the <img> gets selected, loosing the precedent selection of caption <div>.

However mouseUp event is defaultPrevented...

Any thoughts ?

Edit :
Here is a jsfiddle reproducing my issue : http://jsfiddle.net/nH8fj/5/

When user click on image or container, the whole <div> should be selected. On step by step debug, the selection is effectively done but then only the image is selected.

I'm on Chromium 16.0.912.36 linux, the bug is reproducible on latest Chrome windows.

分享到QQ

分享到微博