WordPress: Wie funktioniert „Weiterlesen-Tag einfügen“?

Ich möchte dem tinyMCE-Editor auf einer neuen Beitragsseite eine Schaltfläche hinzufügen. Mit dieses toturial Ich habe es geschafft, dass der Knopf perfekt funktioniert, aber es gibt etwas, das ich nicht herausfinden konnte. Wenn Sie ein “Mehr”-Tag einfügen, wird ein Bild mit dem entsprechenden “Hintergrundbild” an den HTML-Code angehängt. Siehe Screenshot unten:

Aber wenn Sie in den ‘Text’-Modus wechseln, gibt es einen HTML-Kommentar wie diesen: <!--more-->.

Ich könnte das Bild im HTML-Code hinzufügen, aber im ‘Text’-Modus gibt es eine img Schild.

Ich möchte sowas haben: <!--my-custom-tag-->

Wie schafft WordPress das? Oder wie könnte ich ein benutzerdefiniertes Tag im tinyMCE-Editor anhängen?

Ich habe die Antwort gefunden. Sie müssen hinzufügen BeforeSetContent und PostProcess Ereignisse auf dem Editor-Objekt (Wie ich bereits erwähnt habe, folgen Sie zuerst dieses toturial um Ihre Schaltfläche hinzuzufügen):

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

    }
});

Oder Sie können einen Shortcode erstellen. Ich verwende es immer, Sie können Ihren eigenen Code schreiben, damit Sie ihn verstehen. Wenig bis gar kein Schreiben in jQuery von tinymce!

Beispiel

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