如何在选择区域时保存剑道UI编辑器中的光标位置

How to save the cursor position in a Kendo UI Editor when selecting a range?

本文关键字：编辑器 UI 位置 光标 选择 区域 保存      更新时间：2023-09-26

我使用的是剑道UI编辑器。我想突出显示在编辑器中键入/粘贴的多余字符。这是我所做的:

$(function () {
    var $editor = $('#txt-editor');
    $editor.kendoEditor({
        keydown: ValidateRichTextEditor
    });
});
function ValidateRichTextEditor(e) {
    var editor = $(e.sender.textarea),
        kendoEditor = editor.data('kendoEditor'),
        characters = kendoEditor.body.innerText.length,
        limit = editor.data('valLengthMax');
    if (characters > limit) {
        var textNodes = getTextNodes(kendoEditor.body),
            charCount = 0,
            startNode, startOffset;
        for (var i = 0, textNode; textNode = textNodes[i++];) {
            var chars = charCount + textNode.length;
            if (limit < chars) {
                //set the text node as the starting node
                //if the characters hit the limit set
                startNode = textNode;
                startOffset = chars - charCount;
                break;
            }
            //add the length of the text node to the current character count
            charCount += textNode.length;
        }
        var range = kendoEditor.createRange();
        range.setStart(startNode, startOffset);
        kendoEditor.selectRange(range);
        kendoEditor.document.execCommand('backColor', false, '#fcc');
    }
}
function getTextNodes(node) {
    var textNodes = [];
    //node type 3 is a text node
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; i++) {
            textNodes.push.apply(textNodes, getTextNodes(children[i]));
        }
    }
    return textNodes;
}

jsfiddle

到目前为止，突出显示工作，但光标位置始终在突出显示开始的位置。我如何定位光标，使它能记住它最后的位置?比如说，我继续输入，光标应该在编辑器内容的末尾。或者当我点击内容中间的某个位置时，光标应该从我点击内容的位置开始。

在这方面的帮助将是非常感激的。谢谢!

如果我正确地解释了您的需求，那么有一个比您尝试的更简单的解决方案。

(function () {
    var $editor = $('#txt-editor'),
        limit = $editor.data('valLengthMax')
        limitExceeded = false;
    $editor.kendoEditor({
      keyup: ValidateRichTextEditor
    });
    function ValidateRichTextEditor(e) {
      var characters = this.body.innerText.length;
      console.log('''' + this.body.innerText + ''' : ' + this.body.innerText.length);
      if (characters >= limit && !limitExceeded) {
        limitExceeded = true;
        this.exec('backColor', { value: '#fcc' });
      }
    }
})();

更新1:这个解决方案有点bug。退格键会导致一些小问题。

更新2:经过大量的摆弄，你不能信任body.innerText.length。一旦执行了背景颜色样式，它就永远不会返回正确的值。我的理由是，添加到正文中的<span>元素被算作字符，退格键不会像预期的那样删除它们。

下面是一个JSBin示例，您可以在输入时读取控制台输出。至少可以说不合逻辑。

相关文章：