How to move the cursor position within SCeditor?

Question

I am inserting text into an instance of SCeditor and would like to move the cursor after the insert, to a specific position within the inserted text.

Code of the SCeditor init:

var textarea = $('textarea[name="'+fieldname+'"]')[0];

// shortcut to insert custom text
sceditor.instance(textarea).addShortcut('ctrl+alt+b', function() 
{
   var fieldname = this.opts.id;
   parent.window['sce_'+fieldname].insertText('\\sqrt{}');
   
   // move cursor one to the left, so it is within the two brackets
   // ...
   
   return;
}

How to move the cursor?

Related Code I have found deals with the range object, but there was no example of how to move the cursor:

   var rangeHelper = this.getRangeHelper();
   var range = rangeHelper.selectedRange();
   rangeHelper.selectRange(range);
   range.setStartAfter(parent);
   rangeHelper.selectRange(range);

score 1 · Accepted Answer · answered Oct 10 '21 at 23:35

Messing around with ranges is fairly horrible. The easiest way is probably to insert the text as HTML and include some special selection markers that SCEditor uses to restore selections. This should work:

// Remove any current markers
instance.getRangeHelper().removeMarkers()
// Insert the text with the special marker tags
instance.getRangeHelper().insertHTML(
    '\sqrt{' +
    '<span id="sceditor-start-marker" class="sceditor-selection sceditor-ignore" style="display: none; line-height: 0;"> </span>' +
    '<span id="sceditor-end-marker" class="sceditor-selection sceditor-ignore" style="display: none; line-height: 0;"> </span>' +
    '}'
);
// Focus will set the cursor to the markers
instance.focus()

When in source mode, it much easier (doesn't work in WYSIWYG mode, might be something it should do):

instance.insertText('\sqrt{', '}');

Actually, you might not need to call `focus()` as I think `insertHTML()` should restore the selection. — Sam, Oct 10 '21 at 23:38

score -1 · Answer 2 · answered Sep 26 '21 at 13:12

You'll need to use Range.setStart() with a custom offset.

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>

<button id="button" onclick="setCaret()">focus</button>

I saw this answer in another question. It is a direct copy. But I need it SCeditor specific. Either with the SCeditor API or native browser API, but it needs to deal with an SCeditor instance. — Avatar, Sep 26 '21 at 14:02

How to move the cursor position within SCeditor?

2 Answers2