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' is invalid".

To do this, we are using tokens. Using the above as an example, our user would type in "Your chosen name '{name}' is invalid", and it would get replaced on render.

I'm currently writing a plugin for TinyMCE to better help the user manage these tokens. They would click the icon, select a token from a predefined list, and it would get inserted into the content automatically.

The problem I have is how this token is treated within the content editor. At present, it's just text that can be edited, but what I want to do is make TinyMCE treat it as a single element so it can be removed, moved, but the actual token itself can not be edited.

I've tried using the noneditable plugin by wrapping the token in a span with the mceNonEditable class but this doesn't behave as expected, e.g. you can't backspace delete the token, if the token is at the end of the content you can't type after it, etc.

So to clarify, what I essentially want is for TinyMCE to treat some text like it would an image. It would be a solid block, a.k.a. treated as one character/element.

Is this possible?

Thank you.

Answer 1

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.