TinyMCE - Inserting content at cursor position in IE doesn't work

3
votes

I'm trying to insert some content at the current cursor position or replace the selected content in a TinyMCE editor instance. I'm using this:

tinyMCEPopup.editor.selection.setContent(content);

Where content is a string of HTML that I want to insert.

It works great on Firefox, Opera and Chrome, but won't work in IE. Instead it inserts content at the beginning of the editor, instead of the selection. I've also tried:

tinyMCEPopup.execCommand('mceInsertContent', false, content);

Again, same behavior in IE. The TinyMCE code for inserting special characters uses the function above and that works! I've tried replicating it in my plugin and still no joy...

function insertChar(chr) {
    tinyMCEPopup.execCommand('mceInsertContent', false, '&#' + chr + ';');

    // Refocus in window
    if (tinyMCEPopup.isWindow)
        window.focus();

    tinyMCEPopup.editor.focus();
    tinyMCEPopup.close();
}

UPDATE:

Still not working in IE, Opera doesn't even show my plugin's button in the toolbar (although that's probably a separate issue)! I've now also tried the jQuery plugin, got the editors to load, but couldn't call the mceInsertContent method on it, even using this:

$('#my-editor-id').tinymce().execCommand('mceInsertContent', false, content);

Got an error: "object has no method: tinymce" - maybe I can't call that from a popup?!

3
internet-explorertinymce
Same situation for me. Using IE>=8 doesn't work! I found this link. The guy solved it (probably using the jQuery plugin). Using the JS code I confirm it doesn't work. - Daviddd
Thanks David. Spent ages looking at this, nearly giving up on it. Just updated my question with my experience with the jQuery plugin. I'm pretty sure either IE or TinyMCE is junk, just no sure which yet :) I'm leaning towards IE though! - greg84
@greg84 maybe I can't call that from a popup?! Tinymce emotions plugin(emotions.js) uses the same tinyMCEPopup.execCommand('mceInsertContent', false, file); for inserting icons at the cursor position and that works fine across all browsers including IE ... - yb007

3 Answers

4
votes

have you tried calling: 

tinyMCEPopup.restoreSelection();

before calling 

tinyMCEPopup.execCommand('mceInsertContent', false, '&#' + chr + ';');
3
votes

The problem is that TinyMCE loses the current cursor position when you click on something else like a button or link outside the editor, that causes it to lose focus.
To solve the problem, use the mousedown event of the button or link. In that way you can perform the insert action before the focus is lost.

$("#insert_link").mousedown(function (e) {
    var editor = tinyMCE.get("editor");
    editor.execCommand('mceInsertContent', false, "Insert Value");
    e.preventDefault();
});
2
votes

What has worked for me in a similar scenario, and what might be a solution here - use 

editor.selection.getBookmark();

before loosing focus of the editor and

editor.selection.moveToBookmark();

before inserting the content.

The issue is that while in FF when you place the cursor at some spot in a text field containing text, then click elsewhere and return back (ie by hitting Tab) the caret will be displayed in the place where it was before focus was lost. In IE it will return to the beginning. I hope this helps.