如何在运行时用 Element-UI 按钮替换 VueJS 中的某些选定文本？答案

【问题标题】：How to replace in VueJS some selected text with an Element-UI button in runtime?如何在运行时用 Element-UI 按钮替换 VueJS 中的某些选定文本？
【发布时间】：2019-01-06 21:41:49
【问题描述】：

我是 VueJS 的新手，我正在开发一种标签编辑器。它应该是非常基本的。

我的想法是我有一个标签列表和一些文档文本。目标是用一个按钮（标签）替换选定的文本，单击该按钮会显示该标签的信息。

到目前为止，我已经能够通过使用 window.getSelection() 并重新分配其 innerHTML 的方法用按钮替换所选文本。

我在使用这个解决方案时有两个问题：

1) 我只能用原始 HTML 替换 innerHTML，因此它不适用于我想使用的 Element-UI 组件。

2) 此外，如果我将 innerHTML 替换为一个按钮，它就可以正常工作。问题是我无法将任何功能链接到按钮。因此，如果我用var newHTML = "<button @click="someFunction">"+text+"</button>" 替换我选择的innerHTML，则该功能不会在点击时触发。

我希望我已经足够清楚地解释了我的问题。

【问题讨论】：

停止尝试操作 dom 而是使用 VDOM。然后你可以使用v-if 语句或conditional rendering
感谢您的回复！我想我会再研究一点关于 VDOM 操作的知识，因为直到现在我一直无法找到一种方法来通过仅操作 VDOM 来操作任意类型的选择（一个字符、一个单词、多个单词） .

标签： vue.js element-ui

【解决方案1】：

我想你会发现在 Vue（或类似的）中复制这个功能需要更多的工作。

只是快速考虑一下...您需要使用list rendering（或render function）将您的文本块呈现为一系列（可能的对象数组）元素。每个元素要么是纯文本，要么是标签按钮，并相应地呈现。使用 Window.getSelection() 时，您需要确定哪些（如果有）文本元素应该处理选择。然后，该节点需要分成三个（之前的文本、按钮、之后的文本）并在您的数组中更新。然后 Vue 会为你渲染这些元素。

您可以考虑的另一种可能性是使用/扩展现有组件来获得您需要的东西。一些潜在的例子可能是ProseMirror 或tiptap。我对这些没有任何经验，所以除了快速的谷歌搜索之外真的无能为力。对于您需要的东西，它们可能有点重。他们可能是完美的。

【讨论】：

您好！感谢您的答复。我也一直在考虑这种方法。问题是我对如何管理多词选择一无所知。这就是为什么我发现操作 DOM 是实现相同目标的更简单方法的原因。
为你添加了一条建议。
谢谢。最后，按照您的建议，我刚刚将我的文档文本保存在一个字符串中，当我标记一些选定的文本时，我将字符串分成三部分：文档的第一部分，标记文本（带有标记标志 = true )，文档的最后一部分。我将所有内容保存在一个数组中，并在每次标记某些内容时对其进行递归处理。然后，在我的模板中，我使用 v-for 循环显示整个文档，并根据每个对象的标志使用“组件：is”来使用正确的组件。尽管有许多案例和注意事项需要牢记，但这种方法对我来说已经足够好用了。