javascript - 如何设置 Kendo UI Editor 的 selectedRange 以突出显示 Twitter 等多余字符？

Question

我正在尝试使用包含超出字符限制集的字符的 Kendo UI 编辑器的节点的跨度部分进行包装。我正在尝试实现 Twitter 在您输入推文时所做的事情；多余的字符以红色突出显示。

如何更改 Kendo UI 编辑器的 selectedRange 以仅选择超出字符限制的那些？

谢谢！

Answer 1

您可以尝试以下方法：

1. 通过其body字段遍历编辑器的 DOM 树。
2. 查找更长的单词。
3. 使用 DOM Range API 将较长的单词用 span 括起来。

这是一个幼稚的实现，仅适用于 BODY 元素的直接子元素：

function ellipsis(editor, node) {
  // traverse child nodes
  for (var i = 0; i < node.childNodes.length; i++) {
    var child = node.childNodes[i];
    // check only text nodes (nodeType == 3)
    if (child.nodeType == 3) {
      // get the text of the node
      var text = child.nodeValue;

      // naive split to words
      var words = text.split(" ");
      var position = 0;

      // traverse the words
      for (var i = 0; i < words.length; i++) {
        var word = words[i];

        // check word length
        if (word.length > 4) {
          var range = editor.createRange();

          // position the range over the word
          range.setStart(child, position + 1);
          range.setEnd(child, position + 1 + word.length);

          // create a span that will wrap the word              
          var span = editor.document.createElement("span");
          span.style.display = "inline-block";
          span.style.width = "50px";
          span.style.overflow = "hidden";
          span.style.whiteSpace = "nowrap";
          span.style.verticalAlign = "bottom";
          span.style.textOverflow = "ellipsis";
          span.title = word;

          // wrap the word
          range.surroundContents(span);
          child = span.nextSibling;
          position = 1;
        } else {
            position += word.length;
        }
      }
    }
  }
}

这是一个现场演示：http ://dojo.telerik.com/@korchev/EcIL