How to change the caret offset in a rich text editor textarea?

Question

I have a wysihtml rich text editor. If certain conditions are met I want to change the offset of the caret.

Because a wysithtml textarea is not really a textarea div (it's just a regular div) I can't use the common textarea strategies to move the caret. But after some experimentation I found out that treating it as a Selection enables me to work with it as a textarea.

From what I read the correct method to change the caret offset is Range.setStart() , but I can't figure out how to use it. Anyone who can help me?

I have set up this jsfiddle . Try (in Firefox) to move the caret to offset 27. Then the value of the editor will change, and the caret will move to offset 0. But how do I move the caret to eg offset 35?

Answer 1

I have updated your fiddle to work like you want.
This is the part i modified :

if (offsets.start_offset == 27) {
    editor.setValue("This is first line.<br>This is another second line.", true);

   /* START OF MODIFICATION */

      var range = window.getSelection().getRangeAt(0);
      range.selectNodeContents(textarea);

        var fromPos = 27;
        var lenTotal = ( textarea.textContent || textarea.innerText ).length;
        var lenCurTextNode = range.endContainer.lastChild.nodeValue.length;
        var lenNewWord= 'another '.length ;

        var newPos = ( fromPos - (lenTotal - lenCurTextNode) ) + lenNewWord;


      range.setStart(range.startContainer.lastChild , newPos);
      range.setEnd(range.endContainer.lastChild , newPos);

  /* END OF MODIFICATION */

      var offsets = getOffsets(textarea);
    console.log("I want offsets.start_offset to be 35, but it is " + offsets.start_offset)
  } else {
    console.log("Offset is from " + offsets.start_offset + " to " + offsets.end_offset );
  }

You have to deal with the textNode to create a range of text characters and not whith the HTMLElement. It was for that, your Range.setStart() , had no effect, it was 'ranging' divs !

In your sample textarea is a div in which you need to find each textNode and interact with them.
In the code above range.endContainer.lastChild is a textNode (in reality the lastChild of textarea) .

Hope this will help you !

---

Tested with Firefox