Question

I’m having a strange bug for a while. I made a plugin to insert images in TinyMCE. It worked well, but for a while after I insert an image, all images in the editor, including the inserted one, are “selected” (blue overlay appear on mouse over) and because of that can’t be resized (resize handles don’t appear).

Another effect of this, is that on right click the real-size image(I’m using thumbnails -> adjusted width and height of img tag) is shown above the thumbnail. And it dissapears when I make right click again on it.

But if I save the content, close the editor, open a new one, and load the saved content, it behaves correctly.

I don’t have an idea what to do, because I don’t see the cause in CSS or Javascript and also don’t find related information. Any help will be greatly appreciated.

This is the code I use to insert the image:

function openImagePlugin() {
    storeBookmark();
    //open popup...
}

function insertImageInEditor(image) {
    var html = '<img onclick="alert(1)" src="' + image.src + '" style="width:' + image.width + 'px;height:' + image.height + 'px;"/>';
    restoreBookmark();
    tinyMCE.execInstanceCommand("editor", "mceInsertContent", false, html);
}

var editorBookmark = false;

function storeBookmark() {
    var ed = tinyMCE.get("editor");
    try {
        if (ed.selection !== undefined) {
            editorBookmark = ed.selection.getBookmark();

        }
    } catch (e) {
    }
}

function restoreBookmark() {
    var ed = tinyMCE.get("editor");
    try {
        if (ed.selection !== undefined) {
            ed.selection.moveToBookmark(editorBookmark);
        } 
    } catch (e) {
    }
}

The bookmark stuff is because the popup with the image uploader takes the focus from the editor, and without it the image is inserted at the beginning of the editor.

Answer 1

This fixes it:

tinyMCE.get("editor").selection.getSel().removeAllRanges();

right after inserting the image. It’s a hack because the correct solution would be to prevent the selection to appear at all.