CODEWITHSUNDEEP
javascriptwordpresstinymcedom-eventscontenteditable
Thomas Guillory
Thomas Guillory

Reputation: 5729

TinyMCE : image selection on onMouseUp (wordpress / contenteditable)

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.

Upvotes: 1

Views: 635

Answers (1)

Thariama
Thariama

Reputation: 50832

e.target works on webkit, but does not work for IE. There you will have to use e.srcElement. Maybe there is a similar issue with Chrome here.

I found a bug report for Chrome here: http://core.trac.wordpress.org/ticket/15848

Upvotes: 1

Related Questions