Fügen Sie TinyMCE in WP 4.6 eine selbstschließende Shortcode-Schaltfläche hinzu

Ich bin mit dem Erstellen selbstschließender Shortcodes vertraut wie:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

aber ich möchte anfangen, diese dem TinyMCE hinzuzufügen. Ich habe mehrere Suchvorgänge durchgeführt, aber alle Suchergebnisse sind entweder veraltet oder verwenden einen Ansatz, der nicht mehr empfohlen wird:

• Wie füge ich dem TinyMCE-Editor eine Shortcode-Schaltfläche hinzu? : ausgezeichneter Ausgangspunkt, aber die Frage wurde im Jahr 2012 erstellt.
• WordPress Shortcodes: Eine vollständige Anleitung : Guter Artikel, aber ab 2012 und es verwendet query_posts(), könnte aber optimiert werden
• Leitfaden zum Erstellen eigener WordPress-Editor-Schaltflächen : ist ein schöner Artikel, der noch vor einiger Zeit, 2013, erstellt wurde. Er behandelt jedoch nicht die Grundlagen oder Grundlagen für die Verwendung von TinyMCE.

Ich weiß, dass sich der Entwickler noch in einem frühen Stadium befindet, aber das Plugin-Handbuch spricht nur kurz über TinyMCE Enhanced Shortcodes und Shortcode API und add_shortcode()erwähnt TinyMCE nicht.

Das führt mich also zu meiner Frage. Wie wird ein selbstschließender Shortcode im TinyMCE-Editor in eine anklickbare Schaltfläche umgewandelt?

Wir beginnen mit dem Hinzufügen des benutzerdefinierten TinyMCE-Buttons:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

Dann deklarieren und registrieren wir den neuen Button:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

Schließlich entscheiden wir, welche Schaltflächen (weitere Informationen zu Schaltflächen finden Sie unter Inhaltsformatierung ) angezeigt werden sollen. Wenn Sie an UX denken, würden Sie natürlich nur einige davon anzeigen, zum Beispiel:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

Wie Sie in der add_tinymce_plugin_custom_emFunktion sehen können, deklarieren wir eine Javascript-Datei daringet_template_directory_uri() .'/plug/custom-em/custom-em.js'

Erstellen Sie also die custom-em.jsDatei, und Sie haben zwei Möglichkeiten, dies zu tun.

Sie können entweder das folgende Shortcode-Format verwenden [shortcode foo="" bar=""]oder [shortcode][/shortcode].

Beginnen wir mit dem [shortcode foo="" bar=""]Format:

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

Wie Sie sehen können, verwenden wir ein Bild als Schaltflächensymbol. Sie können dies in Text umwandeln, wie im folgenden Beispiel dargestellt.

Im Folgenden ist das, was wir auf unsere eigene Plattform verwenden, ist es um die Auswahl hüllt in: <em class="whatever">hello world</em>:

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

Bitte veröffentlichen Sie die Ergebnisse und führen Sie Änderungen durch. TinyMCE ist eine Seuche und erfordert Kopfschmerzen, kann aber auf kollaborative Weise gelöst werden.