Utilisation de l'éditeur TinyMCE dans WordPress [Guide]

Bien qu’ils ne connaissent peut-être pas son nom, tous ceux qui utilisent WordPress connaissent le Éditeur TinyMCE. C'est l'éditeur que vous utilisez lorsque vous créez ou éditez votre contenu - celui avec les boutons permettant de créer du texte en gras, des en-têtes, l'alignement du texte, etc. Voilà ce que nous allons jeter un oeil dans ce post, et je vais vous montrer comment vous pouvez ajouter des fonctionnalités et comment vous pouvez l'utiliser dans vos plugins.

L'éditeur repose sur un système Javascript indépendant de la plate-forme, appelé TinyMCE, utilisé dans de nombreux projets sur le Web. Il a une excellente API dans laquelle WordPress vous permet de puiser pour créer vos propres boutons et de les ajouter à d’autres emplacements dans WordPress..

Ajout de boutons disponibles

WordPress utilise certaines des options disponibles dans TinyMCE pour désactiver des boutons particuliers - tels que les indices supérieurs, les indices et les règles horizontales - afin de nettoyer l’interface. Ils peuvent être rajoutés sans trop de problèmes.

La première étape consiste à créer un plugin. Jetez un coup d'œil au codex WordPress pour savoir comment faire cela. En un mot, vous pouvez vous en sortir en créant un dossier nommé «my-mce-plugin» dans le dossier wp-content / plugins. Créez un fichier avec le même nom, avec une extension PHP: my-mce-plugin.php.

Dans ce fichier, collez ce qui suit:

  
Une fois cela fait, vous devriez pouvoir sélectionner ce plugin dans WordPress et l'activer. Tout le code à partir de maintenant peut être collé dans ce fichier.
 
Donc, retour à permettant quelques boutons intégrés mais cachés. Voici le code qui nous permet d'activer les 3 boutons que j'ai mentionnés:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'exposant'; $ buttons [] = 'indice'; $ boutons [] = hr; retourne les boutons $;  
 
 
 
Pour savoir quels boutons peuvent être ajoutés et comment ils sont appelés, jetez un coup d'œil à la liste de contrôles dans la documentation de TinyMCE.
 
Créer nos propres boutons
 
Pourquoi ne pas créer nos propres boutons à partir de zéro? De nombreux sites Web utilisent Prism pour la mise en surbrillance de code, qui utilise une approche très sémantique pour marquer les segments de code. Vous devez envelopper votre code dans  et 
 balises, quelque chose comme ça:
 
$ variable = 'valeur'
 
Créons un bouton qui le fera pour nous!
 
C'est un processus en trois étapes. Vous devrez ajouter un bouton, charger un fichier javascript et écrire le contenu du fichier Javascript. Commençons!
 
Ajouter le bouton et charger le fichier Javascript est assez simple, voici le code que j'ai utilisé pour le faire:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); fonction pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; retourne les boutons $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); fonction pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 
Quand je vois des tutoriels à ce sujet, je vois souvent 2 problèmes.
 
Ils négligent de mentionner que le nom du bouton ajouté dans la fonction pre_code_add_button () doit être identique à la clé de la variable $ plugin_array dans la fonction pre_code_add_javascript (). Nous devrons également utiliser la même chaîne dans notre Javascript plus tard.
 
Quelques tutoriels aussi utilisez un hook admin_head supplémentaire pour tout emballer. Bien que cela fonctionne, cela n’est pas obligatoire et, comme le Codex ne l’utilise pas, il devrait probablement être évité..
 
La prochaine étape consiste à écrire du code Javascript pour implémenter nos fonctionnalités. Voici ce que j'ai utilisé pour obtenir le 
 et  balises sortie tout à la fois.
 
 (function () tinymce.PluginManager.add ('pre_code_button', éditeur, url) editor.addButton ('pre_code_button', text: 'Prism', icône: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ sélectionné +'
'; editor.insertContent (content + "\ n"); ); ); ) (); 
 
La plupart de ceci est dicté par la manière dont un plugin TinyMCE est censé être codé. Vous pouvez trouver des informations à ce sujet dans la documentation de TinyMCE. Pour l'instant, tout ce que vous devez savoir, c'est que le nom de votre bouton (pre_code_button) devrait être utilisé dans les lignes 2 et 3. La valeur de "texte" à la ligne 4 sera affichée si vous n'utilisez pas d'icône (nous verrons comment ajouter des icônes dans un instant).
 
La méthode onclick indique ce que fait ce bouton lorsque vous cliquez dessus. Je veux l'utiliser pour envelopper le texte sélectionné dans la structure HTML décrite précédemment.
 
Le texte sélectionné peut être saisi en utilisant tinyMCE.activeEditor.selection.getContent (). Ensuite, j’enroule les éléments autour de lui et l’insère, en remplaçant le contenu mis en surbrillance par le nouvel élément. J'ai également ajouté une nouvelle ligne afin de pouvoir facilement écrire après l'élément de code..
 
Si vous souhaitez utiliser une icône, je vous suggère de la sélectionner dans l’ensemble Dashicons fourni avec WordPress. La référence de développeur a un excellent outil pour trouver des icônes et leur CSS / HTML / Glyph. Trouvez le symbole de code et notez l'unicode dessous: f475.
 
Nous aurons besoin de joindre une feuille de style à notre plugin puis d'ajouter un style simple pour afficher notre icône. Tout d'abord, ajoutons notre style à WordPress:
 
 add_action ('admin_enqueue_scripts', 'styles_pré_code'); fonction pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Retournez au Javascript et à côté de l'icône dans la fonction addButton, remplacez “faux” avec une classe que vous voudriez que votre bouton ait - j'ai utilisé pre_code_button.
 
Créez maintenant le fichier style.css dans votre répertoire plugin et ajoutez le CSS suivant:
 
 i.mce-i-pre_code_button: before font-family: dashicons; contenu: "\ f475";  
 
 
 
Notez que le bouton recevra le mce-i- [votre classe ici] classe que vous pouvez utiliser pour cibler et ajouter des styles. Spécifiez la police sous forme de dashicons et le contenu à l'aide de la valeur unicode précédente.
 
Utilisation de TinyMCE ailleurs
 
Les plugins créent souvent des zones de texte pour saisir un texte plus long, Ne serait-ce pas formidable si nous pouvions également utiliser TinyMCE? Bien sûr que nous pouvons, et c'est assez facile. La fonction wp_editor () nous permet d’en produire une n'importe où dans admin, voici à quoi elle ressemble:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Le premier paramètre définit le contenu initial de la boîte. Cela pourrait être utilisé pour charger une option de la base de données, par exemple. Le deuxième paramètre définit l'ID de l'élément HTML. Le troisième paramètre est un tableau de paramètres. Pour en savoir plus sur les paramètres exacts que vous pouvez utiliser, consultez la documentation de l'éditeur wp.
 
Le paramètre le plus important est le textarea_name. Ceci remplit l'attribut name de l'élément textarea, ce qui vous permet de sauvegarder facilement les données. Voici à quoi ressemble mon éditeur lorsqu'il est utilisé dans une page d'options:
 
$ settings = array ('textarea_name' => 'customer_bio');
 
wp_editor (get_option ('customer_bio'), 'customer_bio', $ paramètres);
 
Cela équivaut à écrire le code suivant, ce qui donnerait une simple zone de texte:
 
<?php get_option( 'buyer_bio' ) ?>
 
Conclusion
 
L'éditeur TinyMCE est un moyen convivial de donner aux utilisateurs plus de flexibilité lors de la saisie de contenu. Il permet à ceux qui ne souhaitent pas formater leur contenu de le taper et d'en finir, et à ceux qui le manipulent de passer tout le temps dont ils ont besoin..
 
La création de nouveaux boutons et de nouvelles fonctionnalités peut être réalisée de manière très modulaire, et nous venons tout juste de cerner les possibilités. Si vous connaissez un plugin ou un cas d'utilisation de TinyMCE particulièrement bon qui vous a beaucoup aidé, faites-le nous savoir dans les commentaires ci-dessous.!