Javascript 选择范围时，如何在剑道UI编辑器中保存光标位置？

我正在使用剑道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;
}

$（函数（）{
var$editor=$（“#txt editor”）；
$editor.kendoEditor({
keydown:ValidateRichTextEditor
});
});
函数ValidateRichTextEditor（e）{
变量编辑器=$（e.sender.textarea），
kendoEditor=editor.data（'kendoEditor'），
characters=kendoEditor.body.innerText.length，
limit=editor.data（'valLengthMax'）；
如果（字符>限制）{
var textNodes=getTextNodes（kendoEditor.body），
charCount=0，
startNode，startOffset；
对于（变量i=0，textNode；textNode=textNodes[i++]；）{
var chars=charCount+textNode.length；
if（限值<字符）{
//将文本节点设置为起始节点
//如果字符达到设置的限制
startNode=textNode；
STARTOFSET=字符数-字符数；
打破
}
//将文本节点的长度添加到当前字符计数
charCount+=textNode.length；
}
var range=kendoEditor.createRange（）；
range.setStart（startNode，startOffset）；
KendoEdit。选择范围（范围）；
kendoEditor.document.execCommand（'backColor'，false'，#fcc'）；
}
}
函数getTextNodes（节点）{
var textNodes=[]；
//节点类型3是文本节点
if（node.nodeType==3）{
textNodes.push（节点）；
}否则{
var children=node.childNodes；
for（变量i=0，len=children.length；i

到目前为止，高亮显示仍然有效，但光标位置始终位于高亮显示开始的位置。如何定位光标，使其记住上次所在的位置？比如说，我一直在打字，光标应该在编辑器内容的末尾。或者当我点击内容中间的某个地方时，光标应该从我点击内容的地方开始。

---

在此方面的帮助将不胜感激。谢谢

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

(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：这个解决方案有点问题。退格键会导致一些打嗝

更新2：经过大量修改后，您无法信任

body.innerText.length

。一旦执行背景色样式，它将永远不会返回正确的值。我的理由是，添加到正文中的

元素被计为字符，并且退格键不会像预期的那样删除它们

---

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

@乔，谢谢！但是，您是否知道如何只突出显示超出设置限制的字符？因此，当我超过限制时，在开始处设置光标，点击delete，突出显示/未突出显示的字符应该更新此帮助？这是对同一件事的非剑道讨论：嗨，布雷特。谢谢你的回答，但它的行为很像乔的小提琴（在我的问题中评论）。当超出限制并将光标放置在编辑器的开头时，不应高亮显示的字符不会更新。