it-swarm.com.de

Füge die selbstschließende Shortcode-Schaltfläche zu TinyMCE in hinzu WP 4.6

Ich bin vertraut mit dem Erstellen von selbstschließenden Shortcodes 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 würde gerne damit beginnen, diese dem TinyMCE hinzuzufügen. Ich habe mehrere Suchanfragen durchgeführt, aber alle Suchergebnisse sind entweder datiert oder verwenden einen Ansatz, der nicht mehr empfohlen wird:

Ich weiß, dass Entwickler noch in den Anfängen steckt, aber das Plugin-Handbuch behandelt nur kurz TinyMCE Enhanced Shortcodes und Shortcode API und add_shortcode() TinyMCE nicht.

Das führt mich zu meiner Frage. Was ist die grundlegende Vorgehensweise, um einen selbstschließenden Shortcode im TinyMCE-Editor in eine anklickbare Schaltfläche umzuwandeln?

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 Schaltflächen finden Sie unter Inhaltsformatierung ) wir anzeigen möchten. Wenn Sie UX verwenden, werden nur einige davon angezeigt. 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 Funktion add_tinymce_plugin_custom_em sehen können, deklarieren wir eine Javascript-Datei in get_template_directory_uri() .'/plug/custom-em/custom-em.js'.

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

Entweder können Sie mit dem folgenden Shortcode-Format [shortcode foo="" bar=""] oder [shortcode][/shortcode] arbeiten.

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

(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, verwenden wir ein Bild als Schaltflächensymbol. Sie können dies in Text umwandeln, wie im folgenden Beispiel dargestellt.

Folgendes verwenden wir auf unserer eigenen Plattform, es umschließt die Auswahl mit: <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 posten Sie die Ergebnisse und nehmen Sie Änderungen vor. TinyMCE ist eine Seuche und erfordert Kopfschmerzen, kann aber auf kollaborative Weise gelöst werden.

14