CKEditor4: Make Text Differ from its HTML

Question

I add StrInsert plugin to my CKEditor. It basically adds a button, which in my editor, is labeled CRM Field.

What the button does is it will append a value to my editor. For example: when I click $[FIRST_NAME] from the dropdown, it will append the text ${__VCG__VAL__FIRST_NAME}to my editor.

Why did I name the dropdown $[FIRST_NAME] instead of${__VCG__VAL__FIRST_NAME}? Because I want the HTML to be <p>${__VCG__VAL__FIRST_NAME}</p> while the text shown in the editor is $[FIRST_NAME]

As seen in screenshot_2, the HTMLshown underneath is exactly what I want, but instead of showing the text ${__VCG__VAL__FIRST_NAME} I want the editor to show the text $[FIRST_NAME]

My question is, how can I make the HTML differ from the text shown in the editor for some reserved keywords?

Answer 1

Is a workaround fine? If you can post- and preprocess the data, the solution is simple. Preprocess the data incoming by replacing ${__VCG__VAL__FIRST_NAME} with $[FIRST_NAME] and before saving, do the opposite.

For a fancier method with more complicated replaces but has a nicer UX, I'd use widgets with code like this:

<p data-real="${__VCG__VAL__FIRST_NAME}">$[FIRST_NAME]</p>

You'd create a plugin that defines that every P with a data-real attribute as a widget. Then before saving you'd convert them into the simple P you like and when loading you'd convert the simple P back to the widget. The benefits here is that the user can't accidentally edit the text and that drag and drop is easy. The replaces should be pretty easy with jquery for example.

I don't know why you'd want them to be block level though, I'd imagine that variables such as these would be nicer inline - but that's up to your requirements.

Widget documentation at http://docs.ckeditor.com/#!/guide/dev_widgets