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

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 开发者_如何学Pythonto 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.

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.

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.

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.

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.