Tinymce – How to hook before or after live shortcodes rendering?

by

Well, yes, you can do that:

//replace live edited content to display html
editor.on('BeforeSetcontent', function(event){
    event.content = tinymce_to_html( event.content );
});

//Transform your html content to raw content
editor.on('GetContent', function(event){
    event.content = html_to_tinymce( event.content );
});

Let’s explain that:

Under the hood, tinymce use a plain-text editor to store content, use in forms, etc etc. But what you see is an HTML wrapper, reading the content of the textarea to set up an HTML view. If you insert special content (like a shortcode), insert the plain text shortcode, and use tinymce_to_html to deduce from it the corresponding HTML.

I don’t remember exactly why (I’ve wrote this piece of code a long time ago) but html_to_tinymce should do the exact inverse than tinymce_to_html, and is important to keep your content clean when switching back & forth with plain text editor or saving it to your database.

Hope it helps, & cheers

Leave a Comment