Wordpress: How does 'Insert Read More tag' works?

Question

I want to add a button to tinyMCE editor on new post page. With this toturial I managed to get the button work perfectly, but there is something I couldn't figure out. When you insert a "More" tag, an image will appended to the html with appropriate 'background-image'. See screenshot bellow:

But when you switch to 'Text' mode there is a html comment like this: <!--more-->.

I could add the image in the html but on 'Text' mode there is an img tag.

I want to have something like this: <!--my-custom-tag-->

How wordpress manage to do this? Or how could I append a custom tag on tinyMCE editor?

Answer 1

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" />';
                }
            }
        });

    }
});

Answer 2

Or you can make a shortcode. I use it always you can write you're own code so you understand it. Little to no writing in jQuery from tinymce!

example

function oex_toggle_ul($atts, $content = null){
extract(shortcode_atts(array(
    ),$atts));


   return '<ul>'.do_shortcode( $content ).'</ul>';

}

function oex_toggle($atts, $content = null){
    extract(shortcode_atts(array(
        'titel' => '',
        'open' => 'closed'
        ),$atts));

    return '<li class="'.$open.'"><a href="#">'.$titel.'<span></span></a><ul class="'.$open.'">'.do_shortcode( $content ).'</ul></li>';
}

https://codex.wordpress.org/Function_Reference/add_shortcode