问题
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