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

18

Comment est-il possible d’ajouter un bouton personnalisé à l’éditeur visuel TinyMCE, Version 4 ?

Actuellement, j'ai trouvé ce q & a avec quelques indices sur le sujet, mais pas de solution ni de procédure. Mais je ne trouve pas de didacticiel, de documentation, pour ajouter un bouton personnalisé à la version 4 de TinyMCE, inclus dans WordPress depuis la version 3.9-beta1.

objectif

    
posée bueltge 25.03.2014 - 16:36

3 réponses

23

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_dump inclus pour comprendre les valeurs. Il est également possible d’ajouter le bouton aux autres lignes de l’éditeur visuel, mais uniquement à un autre crochet, comme pour la ligne 2: mce_buttons_2 .

Résultat

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

<?php/***PluginName:[email protected]*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,côtéJavaScript-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

Utilisezle Gist bueltge / 9758082 comme référence ou téléchargez-le. Gist propose également d'autres exemples de différents boutons dans TinyMCE.

Liens

réponse donnée bueltge 25.03.2014 - 16:36
3

Et si vous souhaitez avoir un bouton d'icône, vous pouvez utiliser les dashicons, ou votre propre police d'icône pour cela.

Créez un fichier CSS et mettez-le 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.

    
réponse donnée Dale Sattler 27.03.2014 - 09:14
0

La méthode simple pour ajouter un bouton

1) AJOUTEZ CE CODE DANS FUNCTIONS.PHP OU DANS UN 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 (remarque: modifiez 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);  
})();
    
réponse donnée T.Todua 20.02.2015 - 16:37

Lire d'autres questions sur les étiquettes