如何将 vue 组件插入 contenteditable div

Question

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

我计划使用来自 mozilla 开发者网站的示例中的基本命令创建简单的 vue 编辑器。这里是https://codepen.io/chrisdavidmills/pen/gzYjag。

首先我想知道如何将vue组件插入到contenteditable div中。我的意思是？例如，我想创建编辑器插件，它将在工具栏图标单击时插入图像。插入的图像应该带有附加事件（点击事件），它可以调整大小等。我在https://stackoverflow.com/a/59326255/1581741 的回答中找到了这个基本想法，（作者@AJT82）。他给了我将 vue-component (image) 插入 contenteditable div 的示例。这里是https://codesandbox.io/s/vue-template-m1ypk。

那么，我有下一个问题。

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

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

2) 带有图像的存储文本应在站点的某处呈现为仅供查看的文章。这意味着我应该已经生成了 html（例如，<img src="" />）。我将如何从插入的 vue 组件中获取它？

3) 用户可以从编辑器中编辑存储的早期代码。如何再次插入（之前插入并存储到数据库）vue-component？

我迷失在这个问题上。

Answer 1

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

使用您首选的 WYSIWYG 编辑器，并且可能是其中最精巧的...

https://quasar.dev/vue-components/editor

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

https://codepen.io/njsteele/pen/wvBNYJY

组件渲染在这里处理：

<!-- 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>

单击“插入随机猫”将插入来自 Cats As A Service 的随机动画猫 GIF。

单击 Insert Quasar Components 将让您从一个 q-icon 组件和一个动画的不确定进度圈中进行选择。您还可以添加自己的组件。这绝对适用于任何 Vue 组件，但一旦在您的所见即所得编辑器中呈现它就不会更新它，之后它就是纯 HTML。我还使用了一个 ref 渲染，它有效但它是基本的，向您展示它是多么容易完成。相反，我会将其升级为代理组件，这样它就不必第一次渲染到 DOM 中或等待 $nextTick。

您还可以看到您可以注入令牌（尽管这来自 Quasar 游乐场）。它显示了如何注入可能与当前用户/等相关的变量。

如果你愿意，你也可以允许用户构建他们自己的组件，或者允许注入用户创建的模板，你也可以插入一个表情符号列表，甚至@mentions，如果这样的话，它可以插入实时视图用户当前在线等。

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

如果您愿意，请在此处获取源代码并在您的项目中使用它... https://github.com/onexdata/nano-var-template