web-dev-qa-db-fra.com

Comment utiliser les nouveaux Dashicons pour les boutons personnalisés de TinyMCE?

J'ai suivi un tutoriel sur Tuts + (lié à partir du Codex WordPress) sur la manière d'interagir avec l'éditeur TinyMCE pour ajouter des boutons. Après l'exemple de code sur cet article, j'ai un fichier JS qui ajoute les boutons à TinyMCE. La copie pertinente de JS qui ajoute l'icône est:

ed.addButton('dropcap', {
    title : 'DropCap',
    cmd : 'dropcap',
    image : url + '/dropcap.png'
});

Maintenant, c'était correct avant WP 3.8, cependant, depuis que Dashicons ont été introduits, il semble obsolète d'utiliser des fichiers PNG statiques pour les boutons TinyMCE ... Depuis la version 3.8, j'ai mis à jour mes types de publication personnalisés pour utiliser Dashicons, mais je me demandais quelle est la bonne façon d’obtenir les boutons TinyMCE en utilisant également Dashicons? Il existe un guide pratique de James Coster sur l’utilisation des Dashicons qui peut être pertinente (bien que je suppose qu’il n’est pas nécessaire de passer des appels pour mettre en file d'attente les scripts Dashicons car ils seront déjà chargés dans le back-end).

tinymcewp-editor
4
MBL

Pour attribuer un style aux icônes à l'aide des fichiers CSS de Dashicons déjà chargés dans le tableau de bord WP, vous devez ajouter du code CSS supplémentaire. Dans la dernière version bêta de Wordpress (3.9), TinyMCE 4.0 est utilisé. Par conséquent, je ne suis pas sûr que cela fonctionnera avec les versions précédentes (une version modifiée peut toutefois convenir, en ajustant les différentes classes émises par les boutons TinyMCE précédents). Dans WP 3.9 (et TinyMCE 4.0), les icônes de l'éditeur sont affichées, par exemple.

<div id="mce_16" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mce_16" role="button" aria-label="DropCap">
    <button role="presentation" type="button" tabindex="-1">
        <i class="mce-ico mce-i-dropcap"></i>
    </button>
</div>

Il y a 2 étapes. Tout d'abord, ajoutez une fonction pour mettre en file d'attente une feuille de style personnalisée dans WP admin (qui sera utilisé pour styliser les nouveaux boutons).

add_action( 'admin_enqueue_scripts', 'se12334_stylesheet_to_admin' );
/**
 * Add stylesheet to the admin pages
 */
function se12334_stylesheet_to_admin() {
    wp_enqueue_style( 'custom-mce-style', get_template_directory_uri() . 'PATH/TO/CSS.FILE' );
}

Ensuite, en suivant le guide James Koster sur l'utilisation de Dashicons, un simple sélecteur CSS de :before peut s'appliquer à votre classe CSS d'icônes. Dans l'exemple de la question d'origine, la classe CSS serait mce-i-dropcap

.CUSTOM_MCE_BUTTON_CLASS:before {
    font-family: "dashicons";
    content: "\f100";
}

Assurez-vous également de supprimer l'appel pour ajouter une image dans la fonction JS ed.addButton d'origine et l'icône de la police sera utilisée à la place.

Notez que la fonction admin_enqueue_scripts sera appelée sur chaque page d’administrateur. Par conséquent, si votre feuille de style personnalisée est volumineuse, elle risque de ralentir les temps de chargement (bien qu’une feuille de style agrandie ne contenant que des définitions d’icône ait peu d’impact sur les temps de chargement).

3
MBL

Ajouter Dashicon

Tous les boutons de TinyMCE ont une classe, ainsi que votre bouton personnalisé. Incluez (utilisez wp_enqueue_style() une feuille de style avec un style avec Dashicons, comme dans l'exemple suivant.

.myicon:before {
    content: '\2605';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
}

Par défaut, le Dashicon est actif sur chaque page de modification, mais ajoutez le dashicon à la feuille de style dépend et il a également été inclus.

Assistant

Voir ce plugin pour trouver la bonne police, les instructions et les exemples à inclure dans le back-end WordPress.

TinyMCE et WordPress 3.9

Petit conseil de ma part à développer sur ce sujet. La prochaine version de WP 3.9 inclut l'inclusion de TinyMCE 4.0 * dans une nouvelle API et le didacticiel Tuts n'est pas la meilleure ressource pour trouver des solutions dans cette rubrique. Consultez les deux liens suivants et vérifiez votre développement actuel avec le WP 3.9-beta.

Exemples de sources, 3.0 vs 4.0

TinyMCE 3

  tinyMCE.onAddEditor.add(function(mgr, ed) {
    var editor = $('#' + ed.editorId + '.atjs');
    if (editor.length == 1) {
      ed.onInit.add(function(ed, l) {
        $(ed.contentDocument.activeElement).atwho({settings go here});
      });
    }
  });

TinyMCE 4

tinymce.init({
  selector: "#mce",
  init_instance_callback: function(editor) {
    $(editor.contentDocument.activeElement).atwho(at_config);
  }
});
6
bueltge

Une solution simple consiste à utiliser une image SVG codée en Base64 comme ceci

ed.addButton('dropcap', {
    ...
    'image'      => 'data:image/svg+xml;base64,{{BASE64}}',
    ...
}

Où {{BASE}} est l'image SVG codée avec Base64.

J'utilise ces commandes Linux pré-installées pour télécharger le fichier SVG de Github et le coder (en utilisant l'icône Twitter comme exemple):

#!/usr/bin/env bash
icon=Twitter
svg64=$(wget -O- -nv https://raw.githubusercontent.com/WordPress/dashicons/master/svg/$icon.svg | base64 -w 0) > /dev/null 2>&1 
echo $svg64

Sortie:

PD94bWwgdmVyc2lvb[...]Cg==
1
Nabil Kadimi

Voici votre solution facile (j'espère que cela aidera également d'autres personnes):

1) ajouter une classe personnalisée pour icon, dans cet exemple "myicons"

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'myicons dashicons-Twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Mettez en file d'attente votre fichier de styles d'administrateur

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Ajoutez ensuite ceci dans votre fichier custom_admin_style.css :

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
0
Albo Best