title: How to insert vue component into contenteditable div
body: <p>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. </p>
  
  <p>I am planning to create SIMPLE vue-editor using base commands from example from mozilla developer site. Here it is <a href="https://codepen.io/chrisdavidmills/pen/gzYjag" rel="nofollow noreferrer">https://codepen.io/chrisdavidmills/pen/gzYjag</a> .</p>
  
  <p>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 <a href="https://stackoverflow.com/a/59326255/1581741">https://stackoverflow.com/a/59326255/1581741</a> , (author @AJT82 ). He gave me example of inserting vue-component (image) into contenteditable div. Here it is <a href="https://codesandbox.io/s/vue-template-m1ypk" rel="nofollow noreferrer">https://codesandbox.io/s/vue-template-m1ypk</a> .</p>
  
  <p>So, I have next questions.</p>
  
  <p>User open empty editor and insert component into it. I need something to store to database. </p>
  
  <p>1) What exactly should I store to database? </p>
  
  <p>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, <code>&lt;img src="" /&gt;</code>). How I will take it from inserted vue-component?</p>
  
  <p>3) User can edit stored earlier code from editor. How to insert (inserted and stored to database earlier) vue-component again? </p>
  
  <p>I am lost in this questions. </p>