WordPress: Hinzufügen von Shortcode-Button im TinyMCE

Sehr praktisch zum Arbeiten für Redakteure sind Button für eigene angelegte WordPress Shortcodes. Diese können im TinyMCE-Editor wie folgt ergänzt und mit Dashicons verschönert werden.

Der Shortcode für dieses Beispiel lautet:

[update title="Titel des Shortcodes"]Ein Beispieltext im Shortcode[/update]

Das PHP Snippet für die functions.php:

add_action( 'after_setup_theme', 'wbq_theme_setup' );
function wbq_theme_setup() {
	
	// Important for adding Custom TinyMCE Buttons
	add_action( 'init', 'wbq_buttons' );
}

if ( ! function_exists( 'wbq_buttons' ) ) {
    function wbq_buttons() {
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) )
            return;

        if ( get_user_option( 'rich_editing' ) !== 'true' )
            return;

        add_filter( 'mce_external_plugins', 'wbq_add_buttons' );
        add_filter( 'mce_buttons', 'wbq_register_buttons' );
    }
}

if ( ! function_exists( 'wbq_add_buttons' ) ) {
    function wbq_add_buttons( $plugin_array ) {
        $plugin_array['wbq_buttons'] = get_stylesheet_directory_uri().'/js/dashboard.js';
        return $plugin_array;
    }
}

if ( ! function_exists( 'wbq_register_buttons' ) ) {
    function wbq_register_buttons( $buttons ) {
        array_push( $buttons, 'wbq_update' );
        return $buttons;
    }
}

add_action ( 'after_wp_tiny_mce', 'wbq_tinymce_extra_vars' );

if ( !function_exists( 'wbq_tinymce_extra_vars' ) ) {
	function wbq_tinymce_extra_vars() { ?>
		<script type="text/javascript">
			var tinyMCE_object = <?php echo json_encode(
				array(
					'update_name' => esc_html__('Update', 'wbq'),
					'update_title' => esc_html__('Update Shortcode', 'wbq'),
				)
			);
			?>;
		</script><?php
	}
}

Das JavaScript Snippet für die dashboard.js (der Dateiname ist nur ein Beispiel) sollte auch nur im Dashboard geladen werden:

// Add Button to TinyMCE editor
(function() {
    tinymce.PluginManager.add('wbq_buttons', function( editor, url ) {
		editor.addButton( 'wbq_update', {
            text: tinyMCE_object.update_name,
            icon: 'mce-ico mce-i-icon dashicons-flag',
			tooltip: tinyMCE_object.update_title,
            onclick: function() {
                editor.windowManager.open( {
                    title: tinyMCE_object.update_title,
                    body: [
                        {
                            type   : 'textbox',
                            name   : 'title',
                            label  : 'Title',
                            tooltip: 'Text',
                            value  : ''
                        },
                        {
                            type   : 'textbox',
                            name   : 'text',
                            label  : 'Text',
                            tooltip: 'Text',
							vakue  : 'Vakue Cobntent',
							multiline: true,
                            style  : 'min-width:300px;'
                        },                    ],
                    onsubmit: function( e ) {
                        editor.insertContent( '[update title="' + e.data.title + '"]' + e.data.text + '[/update]');
                    }
                });
            },
        });
    });

})();

Quellen und Links

• Adding shortcode button to TinyMCE editor