Tinymce.selection.setContent inserts text at the beginning of a text field in IE

Question

I created a plugin for tinyMCE to insert into the math formula editor using MathJax. This plugin opens an iframe popup (using jQuery) and then fires a trigger event to insert the entered formula into the tinyMCE active editor.

My code works correctly in Chrome and Firefox (it creates a pre that is inserted at the caret of the text field), but in IE the text is inserted at the beginning of the text field.

I use the setContent method as follows:

 tinyMCE.activeEditor.selection.setContent(text to insert, {format: 'bbcode'}); 

I tried using ed.focus() before ed.focus() and other recommendations found in StackOverflow, but nothing worked for me.

In addition, I tried to save the carriage position before opening the popup and restoring it when pasting, but it didn’t work.

Any ideas?

Thanks in advance.

Answer 1

SOLVE:

I know this is not the most elegant solution, but it works for me.

Before opening a popup, I insert a "span" with a specific identifier, for example:

 var sel = tinyMCE.activeEditor.selection; sel.setContent('<span id="_math_marker">&nbsp;</span>'); 

Then, when the popup closes and the text is sent back to the editor, I look at the range with a marker, then I select it and call setContent :

 var ed = tinyMCE.activeEditor; var marker = ed.dom.get('_math_marker'); ed.selection.select(marker, false); ed.selection.setContent("TEXT TO INSERT"); 

This works for all browsers! Remember to delete the range if the popup is closed without inserting anything so as not to leave garbage in the editor.

:-)

Answer 2

Just remove the .selection part so your code looks like

tinyMCE.activeEditor.setContent(text to insert, {format: 'bbcode'});

Answer 3

In IE8, in can not get active editor, so you need to focus, so use

tinyMCE.activeEditor.focus ();

Hope this works for you.

Answer 4

Try something like this:

 var myField = tinyMCE.get("SMSBody"); //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = fieldName; } else if (document.getSelection) { tinyMCE.activeEditor.selection.setContent(fieldName); myField.focus(); }
var myField = tinyMCE.get("SMSBody"); //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = fieldName; } else if (document.getSelection) { tinyMCE.activeEditor.selection.setContent(fieldName); myField.focus(); } 

Hope this works for you.

Answer 5

Hi, I used one of the jQuery plugins called jCaret for such situations. Works great in most browsers used (IE 7,8,9 with compatibility mode).

Check out the examples in the link below.

jCaret

thanks