Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the best way to set cursor/caret position?

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.

like image 355
Daniel Bachhuber Avatar asked Aug 10 '09 06:08

Daniel Bachhuber


People also ask

How do I set the cursor position in input?

To move the cursor to the end of an input field: Use the setSelectionRange() method to set the current text selection position to the end of the input field. Call the focus() method on the input element. The focus method will move the cursor to the end of the input element's value.

What is the caret position?

In computing, caret navigation (or caret browsing) is a kind of keyboard navigation where a caret (also known as a 'text cursor', 'text insertion cursor', or 'text selection cursor') is used to navigate within a text document.

How do you move a caret?

The simplest way to move the caret is to click the mouse at the desired location in the text area. The caret can also be moved using the keyboard. The LEFT , RIGHT , UP and DOWN keys move the caret in the respective direction, and the PAGE_UP and PAGE_DOWN keys move the caret up and down one screen-full, respectively.


2 Answers

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.

like image 192
Garry Tan Avatar answered Sep 27 '22 21:09

Garry Tan


After spending over 15 hours on this issue (dedication, I know), I found a partial solution that works in FF and Safari, but not in IE. For the moment, this is good enough for me although I might continue working on it in the future.

The solution: When inserting HTML at the current caret position, the best function to use is:

tinyMCE.activeEditor.selection.setContent(htmlcontent);

In Firefox and Safari, this function will insert the content at the current caret position within the iframe that WordPress uses as a TinyMCE editor. The issue with IE 7 and 8 is that the function seems to add the content to the top of the page, not the iframe (i.e. it completely misses the text editor). To address this issue, I added a conditional statement based on this code that will use this function instead for IE:

tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);

The issue for this second function, however, is that the caret position is set to the beginning of the post area after it has been called (with no hope of recalling it based on the browser range, etc.). Somewhere near the end I discovered that this function works to restore the caret position at the end of the inserted content with the first function:

tinyMCE.activeEditor.focus();

In addition, it restores the caret position to the end of the inserted content without having to calculate the length of the inserted text. The downside is that it only works with the first insertion function which seems to cause problems in IE 7 and IE 8 (which might be more of a WordPress fault than TinyMCE).

A wordy answer, I know. Feel free to ask questions for clarification.

like image 23
Daniel Bachhuber Avatar answered Sep 27 '22 21:09

Daniel Bachhuber