Wie füge ich dem TinyMCE-Editor eine Shortcode-Schaltfläche hinzu?

34

Wie erstelle ich ein Plugin-Symbol in einem WordPress-Beitrag? Der Code, den ich in den Plugin-Code einfügen möchte, wird in der Post-Leiste [wp-admin / post.php] angezeigt.

Wie dieses Bild:

Bildbeschreibung hier eingeben

Ausgabe: Wenn ich auf das Symbol klicke, schreibt es automatisch wie folgt [plugin]in den Beitragsinhalt:

Bildbeschreibung hier eingeben

Juan Lie
quelle
Fügen Sie einen Screenshot des gewünschten Ergebnisses hinzu. Es ist nicht klar, was Sie wollen.
fuxia
Ich denke, Sie möchten ein Plugin erstellen, das dem Editor eine TinyMCE-Schaltfläche hinzufügt, die einen WordPress-Shortcode einfügt, oder?
DevelopDaly

Antworten:

65

Um unsere Schaltfläche zum TinyMCE-Editor hinzuzufügen, müssen wir einige Dinge tun:

  1. Fügen Sie unsere Schaltfläche zur Symbolleiste hinzu
  2. Registrieren Sie ein TinyMCE-Plugin
  3. Erstellen Sie das TinyMCE-Plug-In, das TinyMCE mitteilt, was zu tun ist, wenn auf unsere Schaltfläche geklickt wird.

Schritte 1 und 2

In diesen Schritten registrieren wir unser TinyMCE-Plugin, das in einer Javascript-Datei unter 'path/to/shortcode.js'(siehe wpse72394_register_tinymce_plugin()unten) gespeichert wird.

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Schritt 3

Jetzt müssen wir unser TinyMCE-Plug-In erstellen. Dies wird in eine Datei geschrieben 'path/to/shortcode.js'(wie in den ersten Schritten angegeben).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
Stephen Harris
quelle
1
In Schritt 1 kann durch Ändern des initHakens in den admin_initHaken auch eine geringfügige zusätzliche Verarbeitung am Frontend eingespart werden.
Tim Malone
Es kommt darauf an, dass Sie TinyMCE auch im Front-End haben können. Aber ja, wenn dies nur für Administratoren ist, admin_initwäre dies vorzuziehen.
Stephen Harris
5

Es gibt zu viel, um die ganze Antwort hierher zu bringen. Schauen Sie sich diesen Leitfaden an: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Sie müssen eine Javascript-Datei erstellen, die über die in WordPress registrierte Schaltfläche eine Aktion ausführt und die TinyMCE-Schaltfläche in den Editor einfügt.

Developdaly
quelle
3
Verwendet query_posts und ist daher möglicherweise nicht das beste Beispiel für einen Link.
Brad Dalton