I found the answer. You need to add BeforeSetContent
and PostProcess
events on the editor object (As I mentioned earlier, first follow this toturial to add your button):
tinymce.create('tinymce.plugins.MyPlugin', {
init: function(editor, url) {
// Code to add the button...
// Replace tag with image
editor.on( 'BeforeSetContent', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />');
}
}
});
// Replace image with tag
editor.on( 'PostProcess', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />';
}
}
});
}
});