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

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

El complemento tiene incluido var_dump para comprender los valores. También es posible agregar el botón a otras líneas del editor visual, solo a otro enlace, como para la línea 2: mce_buttons_2 .

Resultado

Complemento,ladodePHP-tinymce4-test.php

<?php/***PluginName:TinyMCE4@WPTest*Description:*PluginURI:*Version:0.0.1*Author:FrankBültge*AuthorURI:http://bueltge.de*License:GPLv2*LicenseURI:./assets/license.txt*TextDomain:*DomainPath:/languages*Network:false*/add_action('admin_head','fb_add_tinymce');functionfb_add_tinymce(){global$typenow;//OnlyonPostType:postandpageif(!in_array($typenow,array('post','page')))return;add_filter('mce_external_plugins','fb_add_tinymce_plugin');//Addtoline1formWPTinyMCEadd_filter('mce_buttons','fb_add_tinymce_button');}//InlcudetheJSforTinyMCEfunctionfb_add_tinymce_plugin($plugin_array){$plugin_array['fb_test']=plugins_url('/plugin.js',__FILE__);//PrintallpluginJSpathvar_dump($plugin_array);return$plugin_array;}//AddthebuttonkeyforaddressviaJSfunctionfb_add_tinymce_button($buttons){array_push($buttons,'fb_test_button_key');//Printallbuttonsvar_dump($buttons);return$buttons;}

Script,ladodeJavaScript-plugin.js

(function(){tinymce.PluginManager.add('fb_test',function(editor,url){//Addabuttonthatopensawindoweditor.addButton('fb_test_button_key',{text:'FBTestButton',icon:false,onclick:function(){//Openwindoweditor.windowManager.open({title:'Exampleplugin',body:[{type:'textbox',name:'title',label:'Title'}],onsubmit:function(e){//Insertcontentwhenthewindowformissubmittededitor.insertContent('Title:'+e.data.title);}});}});});})();

Gist

Utilice Gist bueltge / 9758082 como referencia, o descargue. The Gist también tiene más ejemplos de diferentes botones en TinyMCE.

Enlaces

• TinyMCE API 4
• Guía de migración de 3.x
• Boleto de WP Trac
• TinyMCE Fuente predeterminada para Icons-Fonts
• Icono alternativo a través de Dashicon o Genericons
• Complementos por defecto de TinyMCE
• Compat Plugin : este plugin contiene algunos archivos de compatibilidad para la antigua rama 3.x. Esto le permite ejecutar la mayoría de los complementos 3.x antiguos sin ninguna modificación.

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

Crea un archivo CSS y ponlo 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 desde el núcleo.

El método simple de agregar botón

1) AGREGUE ESTE CÓDIGO EN FUNCTIONS.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) Crea 1_button.php en la carpeta de destino e inserta este código (nota, cambia "wp-load" y "ButtonImage.png" urls !!!)

<?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);  
})();