Adicione o TinyMCE 4 Button personalizado, utilizável desde o WordPress 3.9-beta1

O pequeno plugin a seguir cria um botão personalizado dentro da linha 1 do WordPress TinyMCE Versão 4, testado no WP Versão 3.9-beta2.

O plug-in tem var_dump incluído para entender os valores. Também é possível adicionar o botão a outras linhas do editor visual, apenas um outro gancho, como para a linha 2: mce_buttons_2 .

Resultado

Plugin,ladodoPHP-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,ladodoJavaScript-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

Useo Gist bueltge / 9758082 como referência ou faça o download. O Gist também tem mais exemplos para diferentes botões no TinyMCE.

Links

• API do TinyMCE 4
• Guia de migração do 3.x
• Bilhete do WP Trac
• Fonte padrão do TinyMCE para ícones-fontes
• Ícone alternativo via Dashicon ou Genericons
• Plugins padrão do TinyMCE
• Plugin de compatibilidade - Este plugin contém alguns arquivos de compatibilidade para a antiga ramificação 3.x. Isso permite que você execute os plugins 3.x mais antigos sem nenhuma modificação.

E, se você quiser ter um botão de ícone real, pode aproveitar os doshicons ou a sua própria fonte de ícones para ele.

Crie um arquivo CSS e enfileire no lado do 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;
}

Basicamente tirado direto do núcleo.

O método simples de adicionar botão

1) ADICIONE ESTE CÓDIGO EM FUNÇÕES.PHP, OU EM 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) Crie 1_button.php na pasta de destino e insira este código (note, altere os URLs "wp-load" e "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);  
})();