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

20

Comment ajouter un bouton personnalisé à l'éditeur visuel TinyMCE, version 4 ?

Actuellement, j'ai trouvé ce Q & A avec un peu de conseils sur le sujet, mais pas une solution ou un comment. Mais je ne trouve pas de tutoriel, de documentation, de questions et réponses pour que le sujet ajoute un bouton personnalisé à la version 4 de TinyMCE, inclus dans WordPress depuis la version 3.9-beta1.

Objectif

entrez la description de l'image ici

bueltge
la source

Réponses:

24

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

Résultat

entrez la description de l'image ici

Plugin, côté 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, 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

bueltge
la source
2
La documentation TinyMCE sur la façon de créer une boîte de dialogue n'est en fait pas très utile. Je suis donc allé de l'avant et j'ai écrit un article répertoriant les différents widgets et la disposition des conteneurs disponibles: makina-corpus.com/blog/metier/2016/…
Gagaro
3

Et, si vous souhaitez avoir un bouton d'icône réel, vous pouvez utiliser des tirets ou votre propre police d'icône pour cela.

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

Dale Sattler
la source
À droite, était à l'intérieur de mes liens ci-dessus dans la liste des liens.
bueltge
J'aimerais avoir trouvé cette réponse avant de passer une demi-heure à essayer de l'ajouter via un fichier CSS. Cela semble être la meilleure façon de le faire; tous les tutoriels que j'ai trouvés en ligne sont inutilement verbeux.
aendrew
0

La méthode simple pour ajouter un bouton

1) AJOUTEZ CE CODE DANS FUNCTIONS.PHP OU DANS LE 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 (notez, 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);  
})();
T.Todua
la source
Je pense que ce n'est pas la meilleure façon. L'inclusion de wp-load.php n'est pas stable. Le rythme, où laisser ce fichier est différent. L'installation de WordPress a des possibilités par défaut pour déplacer le dossier du thème et du plugin.
bueltge