使用 rangy 操作选择

Question

我正在尝试使用 rangy 来操纵 selection。我的最终目标是 select 插入符号左侧的一段已知长度的文本，但首先我想了解这些工具。

这是我的示例测试页

<html>
<head>
  <title>TextRange Demo</title>
  <script type="text/javascript" src="../lib/rangy-core.js"></script>
  <script type="text/javascript" src="../lib/rangy-classapplier.js"></script>
  <script type="text/javascript" src="../lib/rangy-textrange.js"></script>

  <script type="text/javascript">
    window.onload = function() {
      rangy.init();
    };
    function SelectStuff(){
      var r = rangy.getSelection().getRangeAt(0);
      r.moveEnd("character", 4);
    }
  </script>
</head>

<body>
  <div id="content">
  <div unselectable="on" onclick="SelectStuff()">SelectStuff</div>
  <div contenteditable="true" style="border: solid thin blue;">
    The quick brown fox jumps over the lazy dog.
  </div>
  </div>
</body>
</html>

当我将光标放在可编辑的 div 中然后单击 SelectStuff 时，我预计它会 select 光标右侧的四个字符。它没有，这意味着我还不明白如何使用它。

有人可以告诉我吗？ moveStart 和 moveEnd 方法的使用未在提供的示例中演示。

Answer 1

没关系，我找到了 Internet Explorer 本机 TextRange 的示例，它们的工作原理相同。该范围实际上在变化，但要查看您需要跟进 r.select();

的变化

使用 rangy 操作选择

Manipulate selection with rangy

javascript

rangy