TinyMCE image custom hash

Question

I'm working with TinyMCE editor with some old webpage content. All HTML content could contain "links" to images in format ".. <img src="##IMAGE:1234##"/> ..". I need to show image in HTML preview, but in code it has to stay in format "..<img src="##IMAGE:1234##"/>.."

I know URL to download/inline all images => http://example.com/images/1234

Do I need to parse editor content, replace IMG src by URL + ID from original IMG src (##IMAGE:1234##).

Is there some way, how to have in HTML code mode something like this "..<img src="##IMAGE:1234##"/>..", but in preview mode have image displayed?

Thanks

Answer 1

TinyMCE relies on the browser to render the HTML that you give to the editor. As the current src you are providing is not valid the image won't show.

What I would suggest is to use a data-xxx to store the value you need and programmatically set the src attribute when you place the content into the editor.

For example...

You might store the image tag in your database as <img data-imgsrc="##IMAGE:1234##" />. When you get ready to load the content into the editor add the src attribute to the image tag so you end up with <img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />. This allows the editor to render the images.

When you go to save the HTML content back to the database you can remove the src attribute from any image that also has the data-imgsrc attribute (assuming you need to do this for some reason).