How to write your own editor

I got so many feature requests about the rich editor:

  • Please add the bullet lists button.
  • Please add the table plugin.
  • The editor is so complicated, remove everything except the bare minimum.

I tried to make everybody happy, but as you can see: It is not possible. So I realized that I have three options:

  1. Make it configurable. Probably not a good idea because it introduces a lot of dependencies to the editor itself in the API.
  2. Try to find a balance between all feature requests and just accept that it does not work out for some users.
  3. Write a simple plugin system.

And of course I decided to go for option 3:

How to write your own plugin?

Technically speaking a UI editor lives in a sandboxed iframe,which interacts with the web application through a small SDK using messaging. This SDK is a proxy of the Angular ControlValueAccessor, without having the dependencies to Angular itself.

In the schema editor you can define the URL to your editor.

Define the URL to your editor.

Lets see how the code looks like:

You just have to reference the editor SDK and react to the events. You also have to push the current value to the web application whenever it changes. Validation will happen automatically then.

I will publish more editors to the samples and I hope for contributions.

You directly link them, e.g. https://squidex.github.io/squidex-samples/editors/cke-simple.html

The editor is so complicated, remove everything except the bare minimum.