如何将 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-component (image) 插入 contenteditable div 的例子.这是https://codesandbox.io/s/vue-template-m1ypk.

那么，我有下一个问题.

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

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

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

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

我迷失在这些问题中.

解决方案

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

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

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

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

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

组件渲染在这里处理:

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

点击插入随机猫"将插入来自 Cats As A Service 的随机动画猫 GIF.

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

你还可以看到你可以注入代币(尽管这是来自 Quasar playground).它显示了如何注入可能与当前用户/等相关的变量.

如果你愿意，你也可以允许用户构建自己的组件，或者允许注入用户创建的模板，你也可以插入一个表情符号列表，甚至@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屋！