Save replacement variables in TinyMCE, but show replaced content in visual editor

0
votes

I'm looking to add some more flexibility to content in our CMS.

I'd really like to be able to use a replacement variable in TinyMCE behind the scenes, like this (massively simplified):

Check out my cool image
[img:cool_image.jpg]
Isn't it great

And then, when the the content is rendered on the frontend, our server does a find and replace and produces:

Check out my cool image
<img src="//images/cool_image.jpg">
Isn't it great

But I would like the TinyMCE editor to render the replace as well so that our users can see the image while editing content.

It would of course still save as:

Check out my cool image
[img:cool_image.jpg]
Isn't it great

The step I am struggling with is getting TinyMCE to display and save differently.

Is this possible? Or is there a plugin to do so?

1
javascripttinymce

1 Answers

1
votes

When you have the content in TinyMCE you need it to be valid/well-formed HTML if you want images to be rendered.

What I think you need to do is simply intercept the content when you get ready to save it in your application and replace the real image tags with the square bracketed version from your example. This work can likely be done

  • as a part of the form post when you go to save the content
  • as a part of fetching the content from the database when you go to reload the data into TinyMCE (this is likely the same transformation you would do when rendering the content at runtime)

If you then need to reload the content back into TinyMCE for a later edit you will need to turn the square bracket syntax back into real HTML so that TinyMCE can properly render the content. There is no plugin that ships as a part of TinyMCE to do this ... but I don't know that you really need to create this as a TinyMCE plugin. Its really just code in your application that handles content manipulation when saving or extracting the content for loading into TinyMCE.