在 Vue 组件中动态包装文本

Question

问题

我想在 Vue 组件中动态包装一些纯文本，在选择文本后使用 mouseUp。

例如：<div> Hello World! </div> => <div> <Greeting/> World! </div>

近似解

现在，我使用 document.createElement("span") 将其包裹起来，并用它包围选择的范围。

我发现了与下一个类似的问题，但我试图避免渲染级别：

How can I dynamically wrap a substring with a component in Vue.js?

Answer 1

好吧，我终于设法解决了。 （提交之前，我花了很多时间弄清楚。我不知道我是怎么解决的这么快）

解决方案

 var ComponentClass = Vue.extend(Annotation);
            var instance = new ComponentClass();
            instance.$mount();
            this.range.deleteContents();
            this.range.insertNode(instance.$el);

其中：Annotation是一个Vue组件，Range是之前得到的选择范围。

我希望这对其他人有帮助！