How to insert vue component into contenteditable div

左心房为你撑大大i 提交于 2020-01-23 16:58:11

问题


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.

来源:https://stackoverflow.com/questions/59849554/how-to-insert-vue-component-into-contenteditable-div

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!