Agregue el botón personalizado TinyMCE 4, utilizable desde WordPress 3.9-beta1

¿Cómo es posible agregar un botón personalizado al editor visual TinyMCE, Versión 4 ?

Actualmente encontré estas preguntas y respuestas con un poco de pistas sobre el tema, pero no una solución o cómo hacerlo. Pero no puedo encontrar un tutorial, documentación, preguntas y respuestas sobre el tema para agregar un botón personalizado a la versión 4 de TinyMCE, incluido en WordPress desde la versión 3.9-beta1.

Objetivo

El siguiente pequeño complemento crea un botón personalizado dentro de la línea 1 de la versión 4 de WordPress TinyMCE, probado en WP versión 3.9-beta2.

El complemento se ha var_dumpincluido para comprender los valores. También es posible añadir el botón a otras líneas del editor visual, sólo otro gancho, al igual que para la línea 2: mce_buttons_2.

Resultado

Plugin, lado 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, lado de 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 );
                    }

                } );
            }

        } );

    } );

} )();

Esencia

Utilice el bueistge Gist / 9758082 como referencia o descárguelo. The Gist también tiene más ejemplos para diferentes botones en TinyMCE.

Campo de golf

• TinyMCE API 4
• Guía de migración desde 3.x
• WP Trac Ticket
• TinyMCE Fuente predeterminada para iconos-fuentes
• Icono alternativo a través de Dashicon o Genericons
• Complementos predeterminados de TinyMCE
• Complemento de compatibilidad: este complemento contiene algunos archivos de compatibilidad para la antigua rama 3.x. Esto le permite ejecutar los complementos 3.x más antiguos sin ninguna modificación.

Y, si desea tener un botón de icono real, puede aprovechar los dashicons o su propia fuente de icono.

Cree un archivo CSS y ponga en cola en el lado del administrador;

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;
}

Básicamente tomado directamente del núcleo.

El método simple de agregar botón

1) AGREGAR ESTE CÓDIGO EN FUNCIONES.PHP, O EN 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) Cree 1_button.php en la carpeta de destino e inserte este código (tenga en cuenta, cambie las URL "wp-load" y "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);  
})();