Question

I have created a plugin for tinyMCE to insert in the editor mathematical formulas using MathJax.
This plugin opens a popup in a iframe (using jQuery) and then launches a trigger – on event to insert the entered formula in the tinyMCE active editor.

My code is working properly in Chrome & Firefox (creates a pre that is inserted in the caret position of the textarea) but in IE the text is inserted at the beginning of the textarea.

I’m using the setContent method like this:

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

I tried to use ed.focus() before inserting and other recommendations found in StackOverflow but nothing worked for me.

Also, I tried to save the caret position before opening the popup and restore it when inserting but did not work anyway.

Any ideas?

Thanks in advance.

Answer 1

SOLVED:

I know that it’s not the most elegant solution but works for me.

Before opening the popup I insert a “span” with and specific ID like this:

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 for the span with the 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 span if the popup is closed without inserting anything to avoid leaving rubbish in the editor.

🙂