Search code examples
reactjswysiwyg

Is there a wysiwyg editor that supports template variables?

I'm a bit diving into a rabbit hole when it comes to implementing a rich text editor. Currently using react-quill, but want to implement a concept of template variables and/or allowing users to choose templates.

I know there is TinyMCE out there, but the self-hosted setup is very unstable and the cloud provided setup is not stable in the country I am residing. :(

I am pretty much looking into implementing something similar to this: https://ambassify.github.io/tinymce-variable/

That would replace {{ mustache }} syntaxes with a bit more visual appealing element, that cant be edited but can be deleted.

So the thing I tried so far was using this as an example to insert Embed/blots in the QuillJS text editor. But this doesnt really insert things using mustache syntax, and also when a user chooses a whole template, then the variables are not being highlighted.

Example of a template a user could choose:

Hey {{ receiver.fullname }}, 


Some message here


Thanks! 

{{user.first_name}}

{{user.company.name}}

How it shoud look like:

Example of Result

The user has the option to edit the template they chose, and after clicking on send. Taking the same template they edited (with the variables) to the next email window.

So my question here is, does anyone have a recommendation on how to accomplish this and which wysiwyg-editor might offer the right solution for this (besides TinyMCE)?

Solution

  • I recommend you to use tiptap framework. This is an headless wysiwyg that gives you full control on the editor.

    They provide a simple extension system which could perfectly match your need.