Vue.js 如何将vue组件插入contenteditable div

我想用vue创建简单的wysiwyg编辑器。我发现在vue.js上只创建了一个真正的所见即所得编辑器。给你__https://quasar.dev/vue-components/editor （但我没有发现有能力插入图像）。其他vue所见即所得编辑器只是tinymce或ckeditor等的包装

我计划使用mozilla开发人员站点示例中的基本命令创建简单的vue编辑器。给你

首先，我想知道如何将vue组件插入contenteditable div。我的意思是什么？例如，我想创建一个编辑器插件，它将插入工具栏图标点击图像。插入的图像应该带有附加的事件（点击事件），它可以调整大小等。我在这里的答案中找到了这个基本想法，（作者@AJT82）。他给了我一个将vue组件（图像）插入contenteditable div的例子

所以，我还有下一个问题

用户打开空编辑器并将组件插入其中。我需要一些东西存储到数据库中

1） 我到底应该将什么存储到数据库中

2） 带有图像的存储文本应作为文章呈现在站点的某个位置，仅供查看。这意味着我应该生成html（例如，

）。我将如何从插入的vue组件中获取它

3） 用户可以从编辑器编辑存储的早期代码。如何再次插入（先前已插入并存储到数据库）vue组件

---

我被这些问题迷住了

我给你举了一个例子，展示了如何将任何东西注入任何WYSIWYG组件（除了非常糟糕的组件：）

使用您首选的所见即所得编辑器，可能是最流畅的编辑器

例如，在这里您可以看到注入一个随机的cat图像是多么容易。你可以弹出一个对话框，询问图像名称，你可以允许用户上传图像，等待承诺返回链接，然后通过返回的链接插入图像，或者做更疯狂的事情

组件渲染在此处处理：

<!-- Here is where we render the component and capture it's output... -->
<div ref="renderComponent" v-show="false">
  <!-- Due to limitation of codepen, must not self-close -->
  <component :is="renderThisComponent" v-bind="renderTheseProps">
  </component>
</div>

单击“插入随机猫”将作为服务插入来自猫的随机动画猫GIF

单击“插入类星体组件”（Insert Quasar Components）可以从一个q图标组件和一个动画的不确定进度圆中进行选择。您还可以添加自己的组件。这绝对适用于任何Vue组件，但一旦在WYSIWYG编辑器中呈现它，它就不会更新它，之后它就是纯HTML。我还使用了一个ref渲染，它可以工作，但它是基本的，向您展示了它是多么容易完成。相反，我会将其升级为代理组件，这样它就不必在第一次渲染到DOM中或等待$nextTick

你也可以看到你可以注入代币（尽管这来自于类星体游戏场）。它显示了如何注入可能与当前用户相关的变量/etc

如果您愿意，您还可以允许用户构建自己的组件，或者允许用户创建的模板被注入，您还可以插入表情符号列表，甚至可以插入@提及，如果该用户当前在线，则可以将实时视图插入其中，等等

由于该功能在理论上非常强大且易于实现，因此我编写了一个非常微小且无bug的模板生成器，可以扩展到无穷大（372字节）。它对用户来说也是安全的，因为它只使用预先允许用户使用的功能列表

在这里获取源代码，并在您的项目中使用它，如果您希望。。。

---

Editor.js中的一个有用的概念。@User28，我来看看。将该对象存储到数据库似乎是个好主意。也许这是我问题的答案№1.但我仍然不知道如何从contenteditable div中获取这样的对象，以及所有插入的组件。首先，您必须定义json，有多少类型的块？对于每个块，您必须渲染哪些数据？例如，段落块可能有一个文本属性，图像块可能有src属性、样式等。然后您找到将json解析为div的方法，并添加侦听器将数据更新回json。另一个想法。你应该看一下视频。我通过v-model将变量

编辑器

放入下一个内容：

自定义它111。

。但若我将它存储到数据库中，并通过v-model将它再次分配给

编辑器
变量，我将只呈现一个html，而不是一个组件。方法
myCustomImageThingieHandler
在编辑器中插入html而不是组件。我说得对吗？