Skip to content
Advertisement

How to move the cursor position within SCeditor?

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);

Advertisement

Answer

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{', '}');
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement