如何在SCeditor中移动光标位置？

Question

我正在向 SCEditor 的一个实例中插入文本，并希望在插入后将光标移动到插入文本中的特定位置。

SCeditor 初始化代码：

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

如何移动光标？

相关代码我找到了范围对象的处理，但是没有如何移动光标的例子：

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

Answer 1

您需要使用 Range.setStart() 和自定义偏移量。

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>

Answer 2

乱用范围是相当可怕的。最简单的方法可能是将文本插入为 HTML 并包括一些 SCEditor 用来恢复选择的特殊选择标记。这应该有效：

// 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()

在源代码模式下，它更容易（在 WYSIWYG 模式下不起作用，可能是它应该做的事情）：

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

如何在SCeditor中移动光标位置？

How to move the cursor position within SCeditor?

javascript

sceditor