如何将vue组件插入到可编辑的目录中

Question

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

我计划创建简单的vue编辑器使用基本命令从示例从mozilla开发人员网站。这就是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-component中获取它？

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>

单击"Insert Random Cat“将插入来自Cats As a Service的随机动画猫GIF。

单击Insert Quasar Components将允许您从一个Q图标组件中进行选择，以及一个动画的不确定的进度圆圈。您还可以添加自己的组件。这绝对适用于任何Vue组件，但是一旦它被呈现在你的WYSIWYG编辑器中，它就不会更新它，在那之后它就是纯HTML。我还使用了一个ref render，它是有效的，但它是基本的，向您展示它是多么容易实现。相反，我会将其升级为代理组件，这样它就永远不会第一次呈现到DOM中，也不会等待$nextTick。

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

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

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

在这里抓取源代码，如果你愿意，可以在你的项目中使用它。https://github.com/onexdata/nano-var-template