如何使用vue.js和window.getSelection（）？

Question

这里是一些教程的示例：

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  alert(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

如何通过vue做到这一点？

我也应该使用查询选择器吗？

我对如何在contenteditable中进行选择操作感兴趣。我可以对内容可编辑的容器使用“ ref”，但是带有粗体，斜体等标记的内部内容是动态的，并使用refs标记此代码：

... <b><i>some text</i></b> ...

不适当。

Answer 1

[如果您正在使用Selection API来操作DOM（不仅创建范围，而是添加/删除/修改/重新排序DOM节点），那么您应该在非Vue管理的DOM元素上进行这些操作。您不得修改由Vue管理的DOM的某些部分，因为Vue不会知道这些更改，并且在下一个渲染周期中尝试修补DOM时会感到困惑。 Vue“拥有”其组件的渲染DOM。