如何将Vue组件插入ContentEditable div [英] How to insert vue component into contenteditable div

问题描述

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

我计划使用来自mozilla开发人员网站的示例中的基本命令来创建SIMPLE vue-editor。这是 https://codepen.io/chrisdavidmills/pen/gzYjag 。

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

所以，我还有下一个问题。

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

1）我到底应该存储什么？

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

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

我迷失了这个问题。

解决方案

我为您提供了一个示例，展示了如何将绝对的任何东西注入到所见即所得的组件中（除了真正不好的组件：）

使用您选择的WYSIWYG编辑器，也许是其中最精巧的...

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

在这里您可以看到例如注入随机猫图像有多容易。您可以弹出一个对话框，要求输入图像名称，可以允许用户上传图像，等待返回返回链接的promise，然后通过返回的链接插入该图像，甚至可以做更疯狂的事情。

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

在此处处理组件渲染：

 <！-这是我们渲染组件并捕获其输出的地方...-> 
< div ref = renderComponent v-show = false> 
<！-由于codepen的限制，不得自行关闭-> 
< component：is = renderThisComponent v-bind = renderTheseProps> 
< / component> 
< / div> 
  

点击插入随机猫会从作为服务的猫中插入随机动画猫GIF。

单击插入类星体组件可让您从一个q-icon组件和一个不确定的动画进度栏中选择。您也可以添加自己的组件。它几乎可以与任何Vue组件一起使用，但是一旦在所见即所得编辑器中呈现后就不会对其进行更新，并且此后为纯HTML。我还使用了ref渲染，它可以正常工作，但是它是基本的，向您展示了它的实现难度。相反，我将其升级为代理组件，这样它就不必第一次呈现到DOM中或等待$ nextTick。

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

如果需要，还可以允许用户构建自己的组件或允许用户创建的要注入的模板，您还可以插入表情符号列表，甚至可以插入@mentions，如果该用户当前在线，则可以插入实时视图，等等。

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

在此处获取源代码，并根据需要在项目中使用它。 ..
https://github.com/onexdata/nano-var-template

I want to create simple wysiwyg editor with vue. I have found only one real wysiwyg editor created on vue.js. Here it is __https://quasar.dev/vue-components/editor (But I didn't find there ability to insert image). Others vue wysiwyg editors is only wrappers to tinymce or ckeditor etc.

I am planning to create SIMPLE vue-editor using base commands from example from mozilla developer site. Here it is https://codepen.io/chrisdavidmills/pen/gzYjag .

At first I want to know how to insert vue components into contenteditable div. What I mean? For example, I want to create editor plugin which will insert image on toolbar icon click. Inserted image should be with attached events (click event), it could be resizable etc. The base idea to this I found in answer here https://stackoverflow.com/a/59326255/1581741 , (author @AJT82 ). He gave me example of inserting vue-component (image) into contenteditable div. Here it is https://codesandbox.io/s/vue-template-m1ypk .

So, I have next questions.

User open empty editor and insert component into it. I need something to store to database.

1) What exactly should I store to database?

2) Stored text with images should be rendered somewhere at the site as article for viewing only. This means I should have generated html (for example, <img src="" />). How I will take it from inserted vue-component?

3) User can edit stored earlier code from editor. How to insert (inserted and stored to database earlier) vue-component again?

I am lost in this questions.

解决方案

I made you an example showing how you can inject absolutely anything into any WYSIWYG component (except for really bad ones :)

Using your first choice of WYSIWYG editor, and probably the slickest of them all...

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

Here you can see how easy it is to inject a random cat image for example. You could pop up a dialog and ask for an image name, you could allow the user to upload an image, wait for a promise that returns the link, then insert that image via the returned link, or do even wilder things.

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

The component render is handled here:

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

Clicking "Insert Random Cat" will insert a random animated cat GIF from Cats As A Service.

Clicking Insert Quasar Components will let you select from a q-icon component, and an animated indeterminate progress circle. You can also add your own components. This works with absolutely any Vue component, but it will not update it once it's been rendered in your WYSIWYG editor, and it's plain HTML after that. I also used a ref render, which works but it's basic, to show you how easy it is to accomplish. I would instead upgrade this to a proxy component so it never has to get rendered into the DOM the first time or wait for a $nextTick.

You can also see you can inject tokens (although this came from the Quasar playground). It shows how you can inject vars you might have related to the current user/etc.

If you want, you can also allow users to build their own components, or allow user-created templates to be injected, you can also insert a Emoji list, or even @mentions, which can insert live-views into if that user is currently online, etc.

Since this functionality is both really powerful and easy to implement it in theory, I wrote a really ultra-tiny and bug-free template generator that you can extend to infinity (372 bytes). It's also safe for users, as it only uses function lists you pre-allow for your users.

Grab the source here and use it in your projects if you would like... https://github.com/onexdata/nano-var-template

这篇关于如何将Vue组件插入ContentEditable div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！