How to set and get cursor position in a text area | TinyMCE (2024)

Navigating the Document Object Model (DOM) of a page is a powerful skill to have, once it’s mastered. However, it’s not always clear exactly what node within the DOM that a part of the web page rests inside.

Traversing the DOM steps you through the elements of a web page. It’s like following map directions. And like a map, each element of the web page has an address. We can target these addresses – also called nodes – and make changes to the page.

Usually, changes happen in response to customers pressing a button or some other interaction. But what about finding your way when the changes are inside a text area? The text area, in its most fundamental form, lives inside the page DOM, but as text inside it, which means there are text nodes. And if there are nodes, then you can navigate through them like stepping stones. And if you’re navigating through them, you might want to place the cursor position at a specific spot.

But it’s not always a direct path through the DOM, through the textarea element, and to a specific cursor position.

For TinyMCE, a rich text editor that has shown time and again its reliability, this process is made possible (with some limits), using specific APIs. This article explains how it’s done, with some examples.

What’s a cursor position? And what’s a caret?

A cursor is a pointer – the graphical icon that represents the mouse moving around the web page on screen. Sometimes, the “cursor” position is brought up to describe the “caret” position.

A caret is the blinking line that indicates where the next word is going to appear when keydown events (the press of the keyboard) happens. Still unclear? What really matters in this case is the intention – do you want to put the blinking line in a specific place in the text area? Then in that case, you want to set the caret at a specific position.

What you need to set cursor positions

With that goal in mind, what skills and knowledge do you need to set the caret in the right spot? You need to know the following:

1. Understand JavaScript
2. Understand Web APIs
3. Some curiosity about TinyMCE APIs

It’s also important to know the limits. Finding out a specific place in the textarea is difficult. It can also be difficult in TinyMCE's text area.

What you can do is first place the caret at the location you want, and then you can bookmark that location. Then, you can load that location when you need it. That’s the main limit of setting the cursor location – you need to choose the location if you want a specific spot first, save it, and then apply that specific bookmark later on.

Getting the cursor position

While you can set the position using TinyMCE APIs, getting the cursor position coordinates, integers, or a string represents a more difficult challenge. Using the TinyMCE Bookmark Manager API, you can set the cursor position that you want to get, and then bookmark that cursor position. The API saves the location so you can retrieve it later (more on the API in the following procedures).

Setting the cursor position

1. Select content, and then bookmark the position of the content

Using the TinyMCE Bookmark Manager API, you can configure the editor to hold on to the caret position in the form of a selection of content. A selection, also known as highlighting, happens when the browser recognizes that you have pushed the mouse button down, dragged the cursor across content, and then let the mouse button move up again. You can also hold down shift and then move the cursor with the arrow keys on the keyboard to select content. It has the same effect. The TinyMCE bookmarks this location with the Bookmark Manager API, and then loads the selected location later.

2. Set the caret position on newly added content

You can place the caret position if you are adding content into the TinyMCE text area. You can set the caret position to be at a specific index location within a DOM element like <p> or <strong> that you’re adding to the editor. The TinyMCE APIs can target the content you’re adding in and TinyMCE then essentially picks up your cursor, and puts it down at the integer you want. For instance, if you write “<strong>bold text</strong>” to the text area, you can add an API and use it to set an integer of “<strong> [5]” to place the caret on the fifth character of the <strong> element, which is the letter “t” in text.

3. Set the caret position at the end of the text area

The expected behavior of the text area caret is to appear at the beginning, that is, the top left hand corner of the text area. You can set the caret to appear in the lower right of the text area, which is the opposite position to where it ordinarily appears.

How to set the caret position

The first option involves the TinyMCE Bookmark Manager API. To test this out, the tutorial creates a function, and sets the function up to run when a button on the demo web page is clicked.

Set up a TinyMCE demo editor

1. Create a new index.html file on your workstation.
2. Sign up for a FREE TinyMCE API key. This key gives you 14 days free access to TinyMCE’s premium plugins. Using the key also prevents domain identification errors showing up in the text area.
3. Include the following HTML to start up the TinyMCE demo editor:

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> <script> tinymce.init({ selector: "#editor", )}; </script> </head> <body> <h1>TinyMCE Example</h1> <form method="post"> <textarea id="editor"></textarea> </form> </body></html>

4. For this cursor position test, the rich text editor resides inside a Document Management System. Setting this up requires using the content_style option to target the body element and change the appearance:

<script> tinymce.init({ selector: "#editor", content_style:` body { background: #fff; } @media (min-width: 840px) { html { background: #eceef4; min-height: 100%; padding: 0 .5rem } body { background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .15); box-sizing: border-box; margin: 1rem auto 0; max-width: 820px; min-height: calc(100vh - 1rem); padding:4rem 6rem 6rem 6rem } } ` }); </script>

5. Save the changes, and test the index file in the browser. You can also test it by running the index file on your workstation’s local host using a python command or a PHP command:

Configuring the Bookmark Manager API

To test out this API, and see how it works quickly, this tutorial makes use of the Developer Tools console.

1. With the developer console open (ctrl + option + j on chrome for instance) highlight the content in the editor that you want to bookmark, and return the cursor position to later.
2. Run the following command to bookmark the cursor position:

let bookmark = tinymce.activeEditor.selection.getBookmark();

3. Move the cursor away from the bookmarked content. You can remove the highlighted selection, and include some more content in the editor at this stage.

4. To load the bookmark, run the following command in the developer console:

tinymce.activeEditor.selection.moveToBookmark(bookmark);

With the moveToBookmark method, the editor will return the content set up and selected with the getBookmark command. This is one way to capture the cursor position inside the TinyMCE editor, and then return to it later when you need it.

Setting the cursor position at new elements

For this method, the tutorial sets up an interactive element (a button) and runs the TinyMCE setCursorLocation API command.

1. Set a button element just after the text area in the demo HTML file:

<body><h1>TinyMCE Example</h1><form method="post"><textarea id="editor"></textarea></form><button></button>

2. Give the button the id of buttonSelect

<button id=”buttonSelect”></button>

3. Set up a pair of script tags after the body element of the demo HTML file:

</body><script> </script></html>

4. Place the following function inside the script tags. This function stars by selecting the active editor Body element :

<script> function selectionCommand() { let editorBody = tinymce.activeEditor.getBody();

5. Extend the function by using the TinyMCE setContent API to change the editor content

<script>function selectionCommand() { let editorBody = tinymce.activeEditor.getBody(); tinymce.activeEditor.setContent('<p>hello <strong>bold</strong> content</p>');

6. To set the cursor position in the new content, add to the function a variable, and assign to it the bold, or strong, element set up in the previous step.

   Note: This is one method for selecting the TinyMCE text editor, setting content, and then selecting a specific node within the editor.

<script>function selectionCommand() { let editorBody = tinymce.activeEditor.getBody(); tinymce.activeEditor.setContent('<p>hello <strong>bold</strong> content</p>');Let nodeStrong = tinymce.activeEditor.dom.select('strong')

7. Add the setCursorLocation API command targeting the variable set up in the previous step (containing the strong tag selection), and set the focus method:

<script>function selectionCommand() { let editorBody = tinymce.activeEditor.getBody(); tinymce.activeEditor.setContent('<p>hello <strong>bold</strong> content</p>'); let nodeStrong = tinymce.activeEditor.dom.select('strong'); tinymce.activeEditor.selection.setCursorLocation(nodeStrong[0].firstChild, 2);tinymce.activeEditor.focus();}</script>

8. Add an event listener that’ll be triggered by the button click event, referencing the button added at the beginning of this procedure:

<script>function selectionCommand() { let editorBody = tinymce.activeEditor.getBody(); tinymce.activeEditor.setContent('<p>hello <strong>bold</strong> content</p>'); let nodeStrong = tinymce.activeEditor.dom.select('strong'); tinymce.activeEditor.selection.setCursorLocation(nodeStrong[0].firstChild, 2);tinymce.activeEditor.focus();}var buttonSelection = document.getElementById('buttonSelect');buttonSelection.addEventListener('click', selectionCommand, false);</script>

9. Save the changes, and then test run the button to set the cursor position:

Setting the caret position at the end of the text area

With the selection.collapse API method, you can move the cursor position to the end of the editor.

1. Add a second button the the demo HTML file after the button produced in the previous procedure:

<button id="buttonEnd" class="button_style"> Go to the end</button>;

2. Add a new function to script tags at the end of the demo HTML file:

function endCommand() {}

3. Use the selection API and the getBody API methods to capture the text area content:

function endCommand() {tinymce.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);

4. Include the collapse API method to move the cursor to the end of the selection range, which is the end of the editor, and then include the focus API:

function endCommand() { tinymce.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true); tinymce.activeEditor.selection.collapse(false); tinymce.activeEditor.focus();}

5. Add an event listener to trigger the function when the button is clicked:

var buttonEnd = document.getElementById("buttonEnd");buttonEnd.addEventListener("click", endCommand, false);

6. Save the changes, and test run the button to move the cursor to the end of the rich text editor:

Setting the cursor position in practice

Depending on what you need in your web page or app, you can use one of the methods available with the TinyMCE API to set the cursor position in your rich text editor.

Next steps could include setting the Bookmark Manager API to run on events in the interface, such as a mouseup event, following a highlight.

Once you have the DOM node selected in the text area, you can be precise, and set the caret to appear at a specific index number within that DOM node. This is the key point to remember – that setting the cursor position on a specific point in the text area needs a specific DOM node to work correctly.

If you’d like to find out more about TinyMCE, and try some of the Premium Plugins, contact us and our customer success team can help you find the rich configuration for your web page or app, and set the cursor position where you need it.