web-dev-qa-db-fra.com

Comment créer un bouton personnalisé pour l'éditeur visuel qui ajoute 4 espaces insécables? (plugin ou code simple)

Pour l'éditeur visuel de Wordpress (TinyMCE), j'aimerais ajouter un bouton qui ajoute quatre espaces insécables lorsque vous cliquez dessus, comme ceci:

    

J'ai trouvé des plugins qui ajoutent des boutons à l'éditeur HTML, mais pas à l'éditeur visuel ( celui-ci par exemple).

ou en général, il serait bon de savoir s’il existe un plugin ou une alternative codable (mais simple) pour ajouter des boutons personnalisés à l’éditeur visuel tinyMCE.

pluginscode
4
its_me

J'ai déjà montré comment vous pouvez obtenir une telle chose dans cette question mais je peux l'expliquer ici avec votre demande. J'ai testé cela dans Wordpress 3.5 et cela fonctionne avec élégance. Pour éviter que cette réponse ne soit la longueur d'une thèse, j'ai ajouté des commentaires dans tous les codes pour vous aider à comprendre le rôle de chaque fonction et je vous recommande vivement de les lire et de les comprendre à fond.

Tout d'abord, dans votre dossier de thèmes, ajoutez un dossier nommé admin et à l'intérieur, créez le fichier class.new_tinymce_btn.php avec le code:

<?php
//wpex_37798_christine_cooper
//class start
class add_new_tinymce_btn {

public $btn_arr;
public $js_file;
/*
 * call the constructor and set class variables
 * From the constructor call the functions via wordpress action/filter
*/
function __construct($seperator, $btn_name,$javascrip_location){
  $this->btn_arr = array("Seperator"=>$seperator,"Name"=>$btn_name);
  $this->js_file = $javascrip_location;
  add_action('init', array(&$this,'add_tinymce_button'));
  add_filter( 'tiny_mce_version', array(&$this,'refresh_mce_version'));

}
/*
 * create the buttons only if the user has editing privs.
 * If so we create the button and add it to the tinymce button array
*/
function add_tinymce_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     //the function that adds the javascript
     add_filter('mce_external_plugins', array(&$this,'add_new_tinymce_plugin'));
     //adds the button to the tinymce button array
     add_filter('mce_buttons', array(&$this,'register_new_button')); 
   }
}
/*
 * add the new button to the tinymce array
*/
function register_new_button($buttons) {
   array_Push($buttons, $this->btn_arr["Seperator"],$this->btn_arr["Name"]);
   return $buttons;
}
/*
 * Call the javascript file that loads the 
 * instructions for the new button
*/
function add_new_tinymce_plugin($plugin_array) {
   $plugin_array[$this->btn_arr['Name']] = $this->js_file;
   return $plugin_array;
}
/*
 * This function tricks tinymce in thinking 
 * it needs to refresh the buttons
*/
function refresh_mce_version($ver) {
  $ver += 3;
  return $ver;
}

}//class end
?>

Ce code ajoutera des boutons personnalisés à l'éditeur visuel.

Ensuite, dans votre dossier de thèmes, créez ces dossiers adminjs/buttons et à l'intérieur, créez ce fichier JS spacebutton.js avec le code:

(function() {
    tinymce.create('tinymce.plugins.nextpage', {
        init : function(ed, url) {
            ed.addButton('nextpage', {
                title : 'Space Button',
                image : url+'/images/btn_spacebutton.png',
                onclick : function() {                    
                    var Prompt_text = "&nbsp;&nbsp;&nbsp;&nbsp;";
                    var caret = "caret_pos_holder";
                    var insert = "<p>" + Prompt_text + " &nbsp;&nbsp;&nbsp;&nbsp;</p> <span id="+caret+"></span>";
                     ed.execCommand('mceInsertContent', false, insert);
                     ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                     ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('nextpage', tinymce.plugins.nextpage);
})();

Vous devrez ajouter une image pour le bouton (/images/btn_spacebutton.png). Le code ci-dessus est une fonction JavaScript assez simple pour ce qui se passe lorsque le bouton est enfoncé.

Maintenant, vous devrez charger cette classe de boutons en l'ajoutant à votre fichier de fonctions:

//load custom buttons class
require_once (TEMPLATEPATH . '/admin/class.new_tinymce_btn.php');
//create an instance of the class
$t = new add_new_tinymce_btn('|','nextpage',get_bloginfo('template_url').'/adminjs/buttons/spacebutton.js');

C'est ça. Vous devriez trouver votre nouveau bouton personnalisé dans l'éditeur visuel. Chaque fois que vous souhaitez ajouter d'autres boutons personnalisés, ajoutez simplement un nouveau fichier JS avec la fonction de bouton et chargez la classe de boutons comme indiqué ci-dessus.

6
Christine Cooper

TL; DR, le code est en bas.

OK, cela devrait fonctionner pour vous, mais c'est une version bêta. Cela fonctionne pour moi, mais je n'ai pas fait de test rigoureux. Une chose, il ne sort pas quatre entités &nbsp; consécutives; &nbsp;[space]&nbsp;[space], mais au moins, il les conserve tels quels lors du basculement entre les modes Visual et Texte. Cela ne fonctionne qu'en mode visuel, je n'ai pas pris le temps de comprendre comment le faire fonctionner en mode texte.

Il vient en deux fichiers, nommez comme bon vous semble. J'ai utilisé le très imaginatif name: 4Spaces . :) Le bouton TinyMCE se trouve dans la partie supérieure droite de l'éditeur. Il montrera quel que soit votre goût du navigateur montre des images inexistantes. Cela change facilement dans 4spaces.js , ligne 8:

image   : url + '/' + 'YOUR_IMAGE_HERE.png'

Changez `YOUR_IMAGE_HERE.png 'en votre fichier image, par rapport aux deux fichiers, ou utilisez un URI absolu comme ceci:

image   : '/path/to/image/YOUR_IMAGE_HERE.png'

ou

image   : 'http://example.com/path/to/image/YOUR_IMAGE_HERE.png'

J'ai commenté et/ou laissé des commentaires existants dans PHP, les commentaires JavaScript sont clairsemés. Vous verrez dans la section d'en-tête PHP d'où provient le code PHP et kind of d'où provient le code JavaScript.

Deux crédits notables, tous deux répertoriés dans l'en-tête PHP: this WordPress.SE Answer qui a fourni le code qui empêche TinyMCE (ou WordPress, qui n'est pas sûr de savoir) de supprimer les espaces, et le lien fournie dans la réponse précédente de @Alexey, qui, bien que non critique, m'a aidé à trébucher sur la solution JS.

Je ne pouvais pas créer le code dans ce lien travail, mais je suis finalement revenu dessus et j'ai trouvé la pépite qui le réunissait (avec quelques ajustements, bien sûr).

Je pense que ça résume tout. Voici le code:

4spaces.php

<?php
/* Plugin Name: 4Spaces
 * Version: 0.1.0
 * Author: AK Ted
 * Author URI: http://akted.com
 * License: GPLv2 or later
 *
 *
 * PHP code adapted & refined from the following two sources:
 * WordPress Codex - http://codex.wordpress.org/TinyMCE_Custom_Buttons#Loading_a_TinyMCE__Plugin
 *
 * WordPress Answers (Stack Exchange) - https://wordpress.stackexchange.com/questions/54398/how-can-i-stop-tinymce-from-converting-my-html-entities-to-characters#answer-54480
 *
 *
 * The JavaScript arose from a lot of trial-and-error, with code [beat into submission...er, I mean] inspired by both of the following sources:
 * tinymce wiki - http://www.tinymce.com/wiki.php/Creating_a_plugin
 * &
 * brett terpstra - http://brettterpstra.com/2010/04/17/adding-a-tinymce-button/
 *
 */

new akt_4spaces();

class akt_4spaces {
    function __construct() {
        add_action('admin_init', array($this, 'init'));
    } // function __construct

    // callback for init
    // sets all the hooks only if user has capability & rich_editing is true 
    function init() {
        // Don't bother doing this stuff if the current user lacks permissions
        if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
            return;
        }

       // Add only in Rich Editor mode
       if ( get_user_option('rich_editing') == 'true') {
            add_filter('mce_buttons', array($this, 'add_button'));
            add_filter('mce_external_plugins', array($this, 'add_tinymce_plugin'));
            add_filter('tiny_mce_before_init', array($this, 'preserve_entities'));
       }
    } // function init


    // callback for mce_buttons filter
    // adds button to TinyMCE
    function add_button($buttons) {
        array_Push($buttons, 'separator', 'four_spaces');
        return $buttons;
    } // function add_button

    // callback for mce_external_plugins filter
    // attaches the JavaScript file to TinyMCE
    function add_tinymce_plugin($plugin_array) {
        $plugin_array['four_spaces'] = plugins_url('/', __FILE__) . '4spaces.js';
        return $plugin_array;
    } // function add_tinymce_plugin


    // callback for tiny_mce_before_init
    // stops TinyMCE (WordPress?) from automatically converting &nbsp; entities
    function preserve_entities( $initArray ) {
        // The odd entries are the entity *number*, the even entries are the entity *name*. If the entity has no name,
        // use the number, prefixed with a hash (for example, the service mark is "8480,#8480").
        $initArray['entities'] = '160,nbsp,' . $initArray['entities'];
        return $initArray;
    } // function preserve_entities

} // class akt_4spaces

4spaces.js

(function() {

    tinymce.create('tinymce.plugins.four_spaces', {
        init : function(ed, url) {
            // Register four_spaces button
            ed.addButton('four_spaces', {
                title   : '4Spaces',
                image   : url + '/' + 'YOUR_IMAGE_HERE.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "&nbsp;&nbsp;&nbsp;&nbsp;"
                    );
                }
            });
        }
    });

    // Register plugin
    tinymce.PluginManager.add('four_spaces', tinymce.plugins.four_spaces);

})();

Edit: j'ai oublié de mentionner, pour ceux qui ne le savent pas, mettez ces deux fichiers dans un répertoire sous /wp-content/plugins/ (chemin par défaut). Il devrait ressembler à/wp-content/plugins/4spaces/ou au nom de votre choix, puis activez-le dans Admin.

P.S. - Je suis relativement nouveau dansOOP, n'hésitez donc pas à faire part de vos critiques, conseils, etc. de la part de ceux qui visionneront cette réponse.

5
akTed