Inserting text in TinyMCE Editor where the cursor is

Question

I've been trying to insert text into the TinyMCE Editor at the focused paragraph element (<p>) exactly where the cursor is but got no luck!!

var elem = tinyMCE.activeEditor.dom.get('tinymce');
var child = elem.firstChild;
while (child) {
    if (child.focused) {
        $(child).insertAtCaret("some text");
    }
    child = child.nextSibling;
}

If anyone has any idea on how to solve this I'll be very thankful.

Oringa

See #13849615 – Insane

Answer 1

You should use the command mceInsertContent. See the TinyMCE documentation.

tinymce.activeEditor.execCommand('mceInsertContent', false, "some text");

Krall

But I need your help with another thing! for IE browser the text is always inserted in the beginning! what should I do? – Oringa

I use this code line for IE7 and IE8 without any problem. And TinyMCE works on IE6+. Maybe your problem is elsewhere. – Krall

When are you trying to insert the text in the Tiny ? With a TinyMCE plugin button ? – Krall

No. At drop event! I'm trying to drop text from outer div element! but I need to drop it exactly where the cursor is. – Oringa

A drop event ? So after a drap&drop action ? I suppose the cursor is just not in the TinyMCE after a drop event. So you must place the cursor before the text insertion. Look at the documentation. You may also want to make a TinyMCE plugin. – Krall

See #13849615 – Insane

Answer 2

The above answer is good, but it is worth pointing out that this can be used to insert any HTML.

For example:

tinymce.activeEditor.execCommand('mceInsertContent', false, " <b>bolded text</b> ");

will insert bolded text at the current cursor location.

Some other interesting observations:

mceInsertRawHTML also works, but tends to put the cursor at the beginning of the current line in my version of tinyMCE, but ymmv.

mceReplaceContent works as well, but in my case did not work well when the cursor was at the end of the current content.

Again, see the documentation for more information.

Seidler

Answer 3

If using popup window, you may use:

tinyMCEPopup.editor.execCommand('mceInsertLink', false, 'some content goes here');

// mceInsertLink inserts the content at the current cursor or caret position. // If the editor is not on focus, the insertion will be at the very first line content in the editor.

If you want to insert HTML tags and javascript variables, you may use, for example:

<script type='text/javascript'>

    var my_var= "some value";
    var my_var_two = 99;

    tinyMCEPopup.editor.execCommand('mceInsertLink', false, 
                    '<span >[' + my_var + ', ' + my_var_two + ']</span>');       
    tinyMCEPopup.close(); // too close the popup window

</script>

If you are in a PHP file, you may use the same strategy, just use PHP instead of JavaScript, for example:

<script type='text/javascript'>
    tinyMCEPopup.editor.execCommand('mceInsertContent', false, 
               '<span >[' + <?php echo $my_php_var; ?> +']</span>'); 
</script>

You can also assign PHP variables (assuming you are in .php file) to Javascript variables and use them in the editor content insertion, for example:

<script type='text/javascript'>

    var my_var= "<?php echo $my_php_var; ?>";
    var my_var_two = "<?php echo $my_php_var_two_or_a_function_call; ?>";

    tinyMCEPopup.editor.execCommand('mceInsertLink', false, 
                     '<span >[' + my_var + ', ' + my_var_two + ']</span>');       
    tinyMCEPopup.close(); // too close the popup window

</script>

Reynolds

Answer 4

I want to add one more thing here if you have more than one editor on your page than you can also do it like this.

tinyMCE.get('idOfEditor').execCommand('mceInsertContent', true, 'your text goes here')

Achieve

Answer 5

For tinyMCE v5 in 2022

You dont need the mceInsertContent command anymore, just add the event to the element you are dragging:

var dragCallback = function (e) {
    e.dataTransfer.setData('Text', 'my-text');
};
document.querySelector('#my-html-element').addEventListener('dragstart', dragCallback);

This is specially useful for the creation of Email Templates with custom tags outside of the editor when using TinyMCE.

Mel