How to make an element in a TinyMCE editor treated as a non-editable single item?

Question

Within our CMS, our users can edit error messages for forms using TinyMCE. The problem is, some of these messages may require dynamic data, e.g. \"Your chosen name \'X\' i

Answer 1

As a duck-tape programmer, I have to ask - can't you use an image? I think TinyMCE used smilies, maybe you can replace those with "elementies" and allow customer to insert them and on save convert to tokens.

Answer 2

You could use an image-tag as token. Using a tinymce UI button to insert this image should work if you replace it after the user has submitted the error message form. For example the image tag you insert could look like this

<img  src="../image/token1.gif" class="token1">

This way you only need to replace image-tags with the class token1 after the submit/save.

Answer 3

The real answer to this is just use the noneditable plugin.

https://www.tiny.cloud/docs/plugins/noneditable/#noneditable_editable_class

This does what you want.

Answer 4

After trying about 100 different work arounds, we finally found a solution which works (for our needs anyway).

We're inserting a disabled button with all the styles removed. For example,

<input type="button" class="token" value="my token" disabled="disabled" />

And then adding some code to onGetContent() to convert the input to plain text.

This solution, although not very elegant,

1. Makes the token behave as a single character/item.
2. Makes it read only.
3. Is dynamic in the context of the editor so we can display our token text.

Edit: This is what we ended up with.