web-dev-qa-db-fra.com

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

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 une solution ni un moyen de le faire. Mais je ne trouve pas de tutoriel, de documentation, de questions-réponses pour que le sujet ajoute un bouton personnalisé à la version 4 de TinyMCE, à inclure dans WordPress depuis la version 3.9-beta1.

Objectif

enter image description here

plugin-developmenttinymcevisual-editor
19
bueltge

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 point d'ancrage, comme pour la ligne 2: mce_buttons_2.

Résultat

enter image description here

Plugin, PHP side - 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

23
bueltge

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

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

3
Dale Sattler

La méthode simple d'ajout de bouton

1) AJOUTEZ CE CODE DANS FUNCTIONS.PHP, OR IN 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, 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);  
})();
0
T.Todua