What's the best way to set cursor/caret positi

Question

If I'm inserting content into a textarea that TinyMCE has co-opted, what's the best way to set the position of the cursor/caret?

I'm using tinyMCE.execCommand("mceInsertRawHTML", false, content); to insert the content, and I'd like set the cursor position to the end of the content.

Both document.selection and myField.selectionStart won't work for this, and I feel as though this is going to be supported by TinyMCE (through something I can't find on their forum) or it's going to be a really ugly hack.

Later: It gets better; I just figured out that, when you load TinyMCE in WordPress, it loads the entire editor in an embedded iframe.

Later (2): I can use document.getElementById('content_ifr').contentDocument.getSelection(); to get the selection as a string, but not a Selection Object that I can use getRangeAt(0) on. Making progress little by little.

Answer 1

This is the solution that works for me:

// params: 
//   $node: jquery node with tinymce loaded 
//   text: text to set at then before caret
function setTextAndCaretToEnd($node, text) {
     var ed = window.tinyMCE.get($node.attr("id"));
     ed.focus();
     ed.selection.setContent(text);
}

Answer 2

The best way that I have found is to insert the content with a temp id and then give that focus using some trickery I found in the advlink plugin.

Hope this helps.

            var ed = tinyMCE.activeEditor;

            ed.execCommand('mceInsertContent', false, '<a id="_mce_temp_rob" href="http://robubu.com">robubu.com</a>');

            //horrible hack to put the cursor in the right spot
            ed.focus(); //give the editor focus
            ed.selection.select(ed.dom.select('#_mce_temp_rob')[0]); //select the inserted element
            ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
            ed.dom.setAttrib('_mce_temp_rob', 'id', ''); //remove the temp id

If you're doing this from a popup I think you also need to add

        tinyMCEPopup.storeSelection();

before closing the popup.

For anyone trying to insert content from a Wordpress custom meta box into the TinyMCE editor, this is the solution that works. I tried a ton of other scripts, including another on this page, the answer above by Gary Tan, which worked for me when installing custom TinyMCE buttons but didnt work out in this scenario.

Answer 3

It is so simple to move the cursor to the end that I can't believe the awful kludges that have been posted elsewhere online to do this. Mr. Spocke's answer wasn't initially helpful but in the end the API docs provided me with the answer. "Select all content and then collapse the selection":

ed.selection.select(ed.getBody(), true); // ed is the editor instance

ed.selection.collapse(false);

I hope this helps someone else as this thread is one of the first to come up in Google.

Answer 4

First what you should do is add a span at the end of the content you want to create.

var ed = tinyMCE.activeEditor;

//add an empty span with a unique id
var endId = tinymce.DOM.uniqueId();
ed.dom.add(ed.getBody(), 'span', {'id': endId}, '');

//select that span
var newNode = ed.dom.select('span#' + endId);
ed.selection.select(newNode[0]);

This is a strategy used by the TinyMCE developers themselves in writing Selection.js. Reading the underlying source can be massively helpful for this kind of problem.