如何使用 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" 用于 contenteditable 容器，但带有粗体、斜体等标签的内部内容是动态的，并用 refs:

标记此代码

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

不合适。

Answer 1

如果您使用选择 API 来操纵 DOM（不仅是创建范围，而且是 adding/removing/modifing/reordering DOM 节点），那么您应该这样做那些不受 Vue 管理的 DOM 元素的操作。你不能修改由 Vue 管理的 DOM 的部分，因为 Vue 不会知道这些更改，并且在下一个渲染周期尝试修补 DOM 时它会感到困惑。 Vue "owns" 其组件的渲染 DOM。

这并不意味着您不能将 Selection API 和 Vue 一起使用，它只是意味着您需要注意不要随意修补 DOM。

Should I use query selectors too? Using p.querySelector('b').firstChild isn't vue way but I don't know what should I use insted

此规则仅适用于您想要获取对 Vue 渲染的 DOM 节点的引用。如果容器是内容可编辑的，那么它的内容将不会被 Vue 管理，如果不使用 querySelector 和其他 DOM 函数，你将无法引用它的内容。当您尝试做的事情本质上与 Vue 无关时，尽量不要陷入 "am I doing it the Vue-way?"。

如何使用 vue.js 和 window.getSelection()？

How to work with vue.js and window.getSelection()?

selection

contenteditable

vue.js