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

11

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:

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?

DᴀʀᴛʜVᴀᴅᴇʀ
quelle
Sie meinen also, wie Sie im TinyMCE-Editor eine Schaltfläche erstellen, die einen selbstschließenden Shortcode in den Inhalt einfügt?
Birgire
1
@birgire Ja, ich möchte die Grundlage für die Integration einer benutzerdefinierten Schaltfläche in TinyMCE kennen, mit der der Shortcode zum Post-Visual hinzugefügt wird.
DᴀʀᴛʜVᴀᴅᴇʀ
1
Hast du dir die großartige Antwort hier von @bueltge angesehen?
Birgire
@birgire nein, es ist nicht von meiner Suche zurückgekehrt, aber es ist eine gute
Frage

Antworten:

14

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.

Christine Cooper
quelle