如何在运行时用 Element-UI 按钮替换 VueJS 中的某些选定文本？
How to replace in VueJS some selected text with an Element-UI button in runtime?
我是 VueJS 的新手，我正在开发一种标记编辑器。它应该是非常基本的。
我的想法是我有一个标签列表和一些文档文本。目标是用一个按钮（标签）替换所选文本，单击该按钮会显示该标签的信息。
到目前为止，我已经能够通过使用 window.getSelection() 并重新分配其内部 HTML.
的方法用按钮替换所选文本
我在使用此解决方案时遇到两个问题：
1) 我只能用原始 HTML 替换 innerHTML，所以它不适用于我想使用的 Element-UI 组件。
2) 此外，如果我用按钮替换内部 HTML，它就可以正常工作。问题是我无法 link 按钮的任何功能。因此，如果我用 var newHTML = "<button @click="someFunction">"+text+"</button>" 替换我选择的 innerHTML，则单击时不会触发该功能。
我希望我已经足够清楚地解释了我的问题。
我认为您会发现在 Vue（或类似的）中复制此功能需要更多的工作。
只是快速考虑一下...您需要使用 list rendering (or in the render function) 将文本块呈现为一系列（可能是对象数组）元素。每个元素要么是纯文本，要么是标签按钮，并相应地呈现。当使用 Window.getSelection() 时，您需要确定您的文本元素中的哪个（如果有的话）应该处理选择。然后需要将该节点分成三个（之前的文本、按钮、之后的文本）并在您的数组中更新。然后 Vue 会负责为您渲染这些元素。
您可以考虑的另一种可能性是 use/extend 现有组件来获取您需要的内容。一些潜在的例子可能是 ProseMirror or tiptap。我对这些没有任何经验，所以除了快速 Google 搜索之外真的帮不上什么忙。对于您需要的东西，它们可能有点重。他们可能是完美的。
我是 VueJS 的新手，我正在开发一种标记编辑器。它应该是非常基本的。
我的想法是我有一个标签列表和一些文档文本。目标是用一个按钮（标签）替换所选文本，单击该按钮会显示该标签的信息。
到目前为止，我已经能够通过使用 window.getSelection() 并重新分配其内部 HTML.
我在使用此解决方案时遇到两个问题：
1) 我只能用原始 HTML 替换 innerHTML，所以它不适用于我想使用的 Element-UI 组件。
2) 此外，如果我用按钮替换内部 HTML，它就可以正常工作。问题是我无法 link 按钮的任何功能。因此，如果我用 var newHTML = "<button @click="someFunction">"+text+"</button>" 替换我选择的 innerHTML，则单击时不会触发该功能。
我希望我已经足够清楚地解释了我的问题。
我认为您会发现在 Vue（或类似的）中复制此功能需要更多的工作。
只是快速考虑一下...您需要使用 list rendering (or in the render function) 将文本块呈现为一系列（可能是对象数组）元素。每个元素要么是纯文本，要么是标签按钮，并相应地呈现。当使用 Window.getSelection() 时，您需要确定您的文本元素中的哪个（如果有的话）应该处理选择。然后需要将该节点分成三个（之前的文本、按钮、之后的文本）并在您的数组中更新。然后 Vue 会负责为您渲染这些元素。
您可以考虑的另一种可能性是 use/extend 现有组件来获取您需要的内容。一些潜在的例子可能是 ProseMirror or tiptap。我对这些没有任何经验，所以除了快速 Google 搜索之外真的帮不上什么忙。对于您需要的东西，它们可能有点重。他们可能是完美的。