Ajouter un bouton TinyMCE 4 personnalisé, utilisable depuis WordPress 3.9-beta1

Comment ajouter un bouton personnalisé à l'éditeur visuel TinyMCE, version 4 ?

Actuellement, j'ai trouvé ce Q & A avec un peu de conseils sur le sujet, mais pas une solution ou un comment. Mais je ne trouve pas de tutoriel, de documentation, de questions et réponses pour que le sujet ajoute un bouton personnalisé à la version 4 de TinyMCE, inclus dans WordPress depuis la version 3.9-beta1.

Objectif

Le petit plugin suivant crée un bouton personnalisé à l'intérieur de la ligne 1 de WordPress TinyMCE version 4, testé dans WP version 3.9-beta2.

Le plugin a var_dumpinclus pour comprendre les valeurs. Il est également possible d'ajouter le bouton à d' autres lignes de l'éditeur visuel, seul un autre crochet, comme pour la ligne 2: mce_buttons_2.

Résultat

Plugin, côté PHP - tinymce4-test.php

<?php
/**
 * Plugin Name: TinyMCE 4 @ WP Test
 * Description: 
 * Plugin URI:  
 * Version:     0.0.1
 * Author:      Frank Bültge
 * Author URI:  http://bueltge.de
 * License:     GPLv2
 * License URI: ./assets/license.txt
 * Text Domain: 
 * Domain Path: /languages
 * Network:     false
 */

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
    global $typenow;

    // Only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return ;

    add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// Inlcude the JS for TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {

    $plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
    // Print all plugin JS path
    var_dump( $plugin_array );
    return $plugin_array;
}

// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {

    array_push( $buttons, 'fb_test_button_key' );
    // Print all buttons
    var_dump( $buttons );
    return $buttons;
}

Script, côté JavaScript - plugin.js

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

        // Add a button that opens a window
        editor.addButton( 'fb_test_button_key', {

            text: 'FB Test Button',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Example plugin',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        label: 'Title'
                    }],
                    onsubmit: function( e ) {
                        // Insert content when the window form is submitted
                        editor.insertContent( 'Title: ' + e.data.title );
                    }

                } );
            }

        } );

    } );

} )();

Essentiel

Utilisez le Gist bueltge / 9758082 comme référence ou téléchargez-le. Le Gist a également plus d'exemples pour différents boutons dans TinyMCE.

Liens

• API TinyMCE 4
• Guide de migration à partir de 3.x
• Billet WP Trac
• Police par défaut TinyMCE pour les icônes-polices
• Icône alternative via Dashicon ou Genericons
• Plugins par défaut TinyMCE
• Plugin de compatibilité - Ce plugin contient quelques fichiers de compatibilité pour l'ancienne branche 3.x. Cela vous permet d'exécuter la plupart des anciens plugins 3.x sans aucune modification.

Et, si vous souhaitez avoir un bouton d'icône réel, vous pouvez utiliser des tirets ou votre propre police d'icône pour cela.

Créez un fichier CSS et mettez-vous en file d'attente côté administrateur;

i.mce-i-pluginname:before {
    content: "\f164";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font: 400 20px/1 dashicons!important;
    speak: none;
    vertical-align: top;
}

Fondamentalement pris directement du noyau.

La méthode simple pour ajouter un bouton

1) AJOUTEZ CE CODE DANS FUNCTIONS.PHP OU DANS LE PLUGIN

//add_protect_shortcode_button
add_action('admin_init', 'add_cb_button');function add_cb_button() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
   }
}
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Créez 1_button.php dans le dossier cible et insérez ce code (notez, changez les URL "wp-load" et "ButtonImage.png" !!!)

<?php 
header("Content-type: application/x-javascript");
require('../../../../wp-load.php');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            ed.selection.setContent('[statistics_sp]');  
                                //var vidId = prompt("YouTube Video", "");
                                //ed.execCommand('mceInsertContent', false, '[youtube id="'+vidId+'"]');
                        }  
                    });


        }, 

        createControl   : function(n, cm) {     return null;  }, 
    });  
    tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);  
})();