How to insert vue component into contenteditable div

Question

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.

Answer 1

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