WordPress 3.9+ TinyMCE 4 Tweaks: Ajout de styles, boutons, polices, listes déroulantes et pop-ups

L’une de mes mises à jour préférées dans WordPress 3.9 consistait à créer le noyau TinyMCE version 4.0. Le nouveau TinyMCE a l’air plus propre (correspond vraiment au tableau de bord WP) et il a de très belles fonctionnalités supplémentaires. Beaucoup de mes anciens thèmes et plugins ont dû être mis à jour pour fonctionner avec le nouveau TinyMCE, j’ai donc passé un peu de temps à fouiller l’API et trouver des trucs sympas. Ci-dessous, je vais vous donner quelques exemples sur la façon dont vous pouvez étendre les fonctionnalités de TinyMCE. Je ne vais pas vous guider à travers toutes les étapes ou ce que le code signifie exactement (cela est destiné aux développeurs), mais je vous fournirai le code exact que vous pouvez copier / coller dans votre thème ou plugin, puis peaufiner en conséquence.


Ajout de sélections de taille de police et de famille de polices

Par défaut, les polices personnalisées et les tailles de police ne sont pas ajoutées dans l’éditeur TinyMCE. La fonction ci-dessous ajoutera ces deux listes déroulantes à l’extrême gauche de l’éditeur dans la deuxième ligne. Changez simplement l’endroit où il est dit «mce_buttons_2» si vous le souhaitez dans une ligne différente (ex: utilisez «mce_buttons_3» pour la 3ème ligne).

// Activer les sélections de taille et de famille de polices dans l'éditeur
if (! function_exists ('wpex_mce_buttons')) {
fonction wpex_mce_buttons (boutons $) {
array_unshift (boutons $, 'fontselect'); // Ajouter une sélection de police
array_unshift (boutons $, 'fontsizeselect'); // Ajouter une taille de police
retourner les boutons $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Ajout de tailles de police personnalisées

Par défaut, les tailles de police sont définies sur des valeurs pt, ce qui n’est pas toujours idéal. Je préfère utiliser des valeurs de pixels (12px, 13px, 14px, 16px..etc) et offrir plus d’options pour la flexibilité de la râpe. La fonction ci-dessous modifiera les options de taille de police par défaut dans le sélecteur déroulant.

// Personnalisation des tailles de police de l'éditeur mce
if (! function_exists ('wpex_mce_text_sizes')) {
fonction wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Ajout de polices personnalisées

Les options de police par défaut dans le sélecteur de famille de polices sont toutes les polices «Web sécurisées» par défaut, mais que se passe-t-il si vous souhaitez ajouter plus de polices au sélecteur? Peut-être quelques polices Google? Nous allons voir très facilement l’exemple ci-dessous.

// Ajouter des polices personnalisées à la liste des polices
if (! function_exists ('wpex_mce_google_fonts_array')) {
fonction wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = courier new, courier; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impact, chicago; Symbol = symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Remarquez comment j’ai ajouté «Lato» à la liste dans le code ci-dessus? C’est si simple! Dans mon thème Total WordPress, je passe en revue toutes les polices personnalisées utilisées sur le site telles que définies dans le panneau de thème et les ajoute à la zone de sélection afin qu’elles soient également disponibles lors de la modification de vos articles / pages (doux). Mais le code annonce UNIQUEMENT la famille de polices dans la liste déroulante, il ne chargera pas comme par magie le script de sorte que lorsque vous changez votre texte dans l’éditeur, vous pouvez réellement voir que la police personnalisée lui est appliquée … C’est ce que fait le code ci-dessous!

// Ajouter des scripts Google à utiliser avec l'éditeur
if (! function_exists ('wpex_mce_google_fonts_styles')) {
fonction wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Activer le menu déroulant Formats (styles) et ajouter de nouveaux styles

Rappelez-vous la liste déroulante «Styles» dans WP 3.8? C’était plutôt cool! Vous pouvez l’utiliser pour ajouter des classes intéressantes à utiliser dans l’éditeur de publication (je l’utilise sur WPExplorer en fait pour les boutons, les étendues colorées, les boîtes … etc.). Nous allons dans WP 3.9, vous pouvez toujours ajouter des styles, cependant, il a été renommé dans le nouveau TinyMCE 4.0 en «Formats» afin que cela fonctionne un tout petit peu différent. Vous trouverez ci-dessous un exemple d’activation de la liste déroulante Formats et d’ajout de nouveaux éléments.

Menu déroulant des formats WordPress TInyMCE

Activer le menu déroulant des formats

Cela se fait en fait de la même manière avant WP 3.9 mais je partage au cas où vous ne saviez pas comment le faire.

// Ajouter un menu déroulant de formats à MCE
if (! function_exists ('wpex_style_select')) {
fonction wpex_style_select ($ boutons) {
array_push ($ boutons, 'styleselect');
retourner les boutons $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Ajouter de nouveaux éléments aux formats

L’ajout de nouveaux éléments est super facile. Veuillez noter comment j’ai ajouté «$ settings [‘ style_formats_merge ’] = true;” au code ci-dessous, cela garantit que vos modifications sont ajoutées au menu déroulant des formats avec les autres – n’écrasez pas le tout (peut-être que d’autres plugins veulent également l’utiliser).

// Ajout de nouveaux styles au menu déroulant du menu "formats" de TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
fonction wpex_styles_dropdown ($ settings) {

// Créer un tableau de nouveaux styles
$ new_styles = array (
tableau (
'title' => __ ('Styles personnalisés', 'wpex'),
'items' => tableau (
tableau (
'title' => __ ('Button Theme', 'wpex'),
'selector' => 'a',
'classes' => 'bouton-thème'
),
tableau (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'classes' => 'texte en surbrillance',
),
),
),
);

// Fusion d'anciens et de nouveaux styles
$ settings ['style_formats_merge'] = true;

// Ajouter de nouveaux styles
$ settings ['style_formats'] = json_encode ($ new_styles);

// Retourne de nouveaux paramètres
retourner $ settings;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Ajout d’un simple bouton MCE

L’ajout d’un nouveau bouton à l’éditeur TinyMCE est particulièrement utile pour les shortcodes, car en tant qu’utilisateur, vous n’avez pas à vous souvenir des shortcodes, vous pouvez simplement cliquer sur un bouton et il l’insère. Je ne dis pas d’ajouter des centaines de boutons au TinyMCE pour tous vos shortcodes (je déteste quand les développeurs font cela, c’est une mauvaise pratique et ça a l’air horrible) mais si vous ajoutez 1 ou quelques-uns, je le laisserai passer �� Si vous voulez ajouter un groupe, vous devez créer un sous-menu comme expliqué dans la section qui suit.

Nouveau bouton WordPress MCE

Code PHP – Déclarez le nouveau plugin MCE dans WP

Ce code déclarera votre nouveau plugin MCE assurez-vous de changer l’emplacement du fichier javascript “mce-button.js” pour correspondre à l’emplacement de votre fichier (dont je vous donnerai le code également dans la sous-section suivante). comme renommer évidemment le préfixe «mon» en quelque chose de plus unique!

// Accroche vos fonctions dans les bons filtres
function my_add_mce_button () {
// vérifier les autorisations des utilisateurs
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
revenir;
}
// vérifie si WYSIWYG est activé
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Déclarer le script du nouveau bouton
function my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Enregistrer un nouveau bouton dans l'éditeur
function my_register_mce_button ($ buttons) {
array_push ($ buttons, 'my_mce_button');
retourner les boutons $;
}

Code JS – Ajouter le bouton au MCE

Ce code js va dans le fichier js enregistré dans l’extrait ci-dessus dans la fonction “symple_shortcodes_add_tinymce_plugin”. Cela devrait ajouter un nouveau bouton de texte qui dit “Nouveau bouton” dans votre éditeur et lorsque vous cliquez dessus, il insérera le texte “WPExplorer.com est génial!” (bien sûr).

(une fonction() {
tinymce.PluginManager.add ('my_mce_button', fonction (éditeur, url) {
editor.addButton ('my_mce_button', {
texte: 'Nouveau bouton',
icône: faux,
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
});
});
}) ();

Ajoutez une icône personnalisée à votre nouveau bouton MCE

Ci-dessus, je vous ai montré comment ajouter un nouveau bouton qui s’affichera comme “Nouveau bouton” dans l’éditeur, c’est un peu boiteux … Le code modifié vous montrera donc comment ajouter votre propre icône personnalisée.

Chargez une feuille de style avec votre CSS

Utilisez cette fonction pour charger une nouvelle feuille de style à utiliser dans votre panneau d’administration – certains plugins / thèmes peuvent déjà ajouter une feuille de style, donc si votre thème / plugin le fait, sautez cela et ajoutez simplement votre CSS personnalisé et ajustez le js (illustré ci-dessous).

function my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Votre CSS personnalisé

Ceci est le CSS pour ajouter la feuille de style chargée précédemment.

i.my-mce-icon {
background-image: url ('VOTRE URL ICÔNE');
}

Ajustez votre Javascript

Maintenant, ajustez simplement le javascript que vous avez ajouté précédemment pour supprimer le paramètre de texte et au lieu de définir l’icône sur false, donnez-lui un nom de classe personnalisé.

(une fonction() {
tinymce.PluginManager.add ('my_mce_button', fonction (éditeur, url) {
editor.addButton ('my_mce_button', {
icône: 'my-mce-icon',
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
});
});
}) ();

Ajouter un bouton avec un sous-menu

Sous-menu du bouton MCE

Plus tôt, j’ai mentionné que l’ajout d’une tonne de nouvelles icônes à la barre TinyMCE est une mauvaise idée (et c’est le cas), alors consultez le code ci-dessous pour voir comment vous pouvez modifier le javascript pour afficher un sous-menu pour votre bouton personnalisé. Si vous voulez le voir en action, consultez mon Vidéo des codes courts Symple.

(une fonction() {
tinymce.PluginManager.add ('my_mce_button', fonction (éditeur, url) {
editor.addButton ('my_mce_button', {
texte: «Exemple de liste déroulante»,
icône: faux,
type: 'menubutton',
menu: [
{
texte: «Point 1»,
menu: [
{
texte: «Sous-point 1»,
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
},
{
texte: «Sous-point 2»,
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
}
]
},
{
texte: «Point 2»,
menu: [
{
texte: «Sous-point 1»,
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
},
{
texte: «Sous-point 2»,
onclick: fonction () {
editor.insertContent ('WPExplorer.com est génial!');
}
}
]
}
]
});
});
}) ();

Ajout d’une fenêtre contextuelle à votre bouton en un clic

Dans l’exemple ci-dessus, vous remarquerez peut-être que chaque bouton insère simplement le texte “WPExplorer.com est génial!” ce qui est cool, mais qu’en est-il de la création d’une fenêtre contextuelle où un utilisateur peut modifier ce qui est inséré dans le texte? Alors ça ce serait gentil! Et c’est quelque chose que j’ai ajouté à la version 1.6 de mes codes courts Symple, ce qui rend le plugin beaucoup plus convivial.

Fenêtre contextuelle WordPress MCE

(une fonction() {
tinymce.PluginManager.add ('my_mce_button', fonction (éditeur, url) {
editor.addButton ('my_mce_button', {
texte: «Exemple de liste déroulante»,
icône: faux,
type: 'menubutton',
menu: [
{
texte: «Point 1»,
menu: [
{
texte: 'Pop-Up',
onclick: fonction () {
editor.windowManager.open ({
title: 'Insérer un shortcode aléatoire',
corps: [
{
tapez: 'zone de texte',
nom: 'textboxName',
étiquette: 'Text Box',
valeur: '30'
},
{
tapez: 'zone de texte',
nom: 'multilineName',
étiquette: 'Multiline Text Box',
valeur: «Vous pouvez dire beaucoup de choses ici»,
multiligne: vrai,
minWidth: 300,
minHeight: 100
},
{
tapez: 'listbox',
nom: 'listboxName',
étiquette: 'List Box',
'valeurs': [
{texte: 'Option 1', valeur: '1'},
{texte: 'Option 2', valeur: '2'},
{texte: 'Option 3', valeur: '3'}
]
}
],
onsubmit: fonction (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

C’est cool… maintenant quoi?

Bonne question! Il est maintenant temps pour vous de prendre ces ajustements impressionnants et d’aller créer quelque chose d’épique ou de mettre à jour vos plugins / thèmes pour être compatible avec le nouveau TinyMCE dans WordPress 3.9. Faites-moi savoir ce que vous proposez dans les commentaires ci-dessous!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map