L'éditeur de contenu est un élément clé de WordPress. Il permet aux utilisateurs de créer et de gérer leur contenu, leurs galeries et leurs vidéos, dans une vue visuelle wysiwyg (ce que vous voyez est ce que vous obtenez).
Il est également livré avec une vue texte , qui permet aux utilisateurs d'insérer ou de modifier HTML dans leur contenu.
L'éditeur visuel WordPress est alimenté par le contrôle de l'éditeur TinyMCE, qui fournit la vue Wysiwyg, ainsi que par les boutons de mise en forme que vous voyez:
Grâce à l'API TinyMCE et aux crochets filtrants de WordPress, nous pouvons ajouter nos propres fonctionnalités à l'éditeur visuel WordPress. Plus précisément, nous examinerons comment créer et enregistrer un plugin TinyMCE personnalisé qui enveloppe le texte sélectionné dans une classe CSS.
Dans votre site Web WordPress, créez le dossier WP-Content / Plugins / TinyMCE-Custom-Class.
Nous stockons ici les fichiers de notre plugin, alors créez ensuite un fichier appelé tinymce-custom-class.php, en utilisant le code suivant:
<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
<span>/**
</span><span> * Constructor. Called when the plugin is initialised.
</span><span> */
</span> <span>function __construct() {
</span>
<span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>Cela donne à WordPress quelques informations sur notre plugin et configure notre construction, où nous enregistrerons nos actions et filtres TinyMCE.
TinyMCE fournit deux filtres clés pour enregistrer un élément sur la barre d'outils de l'éditeur visuel:
Avant d'appeler ces filtres, nous voulons vérifier que nous sommes dans les écrans d'administration WordPress. Ajoutez le code suivant au __CONSTURT:
<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
<span>/**
</span><span> * Constructor. Called when the plugin is initialised.
</span><span> */
</span> <span>function __construct() {
</span>
<span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>Ensuite, ajoutez la fonction setup_tinymce_plugin pour effectuer quelques vérifications supplémentaires:
<span>if ( is_admin() ) {
</span> <span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>Cela vérifie si l'utilisateur actuel connecté dans WordPress peut modifier des publications ou des pages. S'ils ne le peuvent pas, il est inutile d'enregistrer notre plugin TinyMCE pour cet utilisateur, car ils ne verront jamais l'éditeur visuel.
Nous vérifions ensuite si l'utilisateur utilise l'éditeur visuel, car certains utilisateurs de WordPress désactivent cela via utilisateurs> votre profil . Encore une fois, si l'utilisateur n'utilise pas l'éditeur visuel, nous retournons (sortons) la fonction, car nous n'avons rien à faire d'autre.
Si les vérifications ci-dessus passent, les deux filtres WordPress TinyMCE sont enregistrés - MCE_EXTERNAL_PLUGINS et MCE_BUTTONS.
Le premier filtre - MCE_EXTERNAL_PLUGINS - nous permet d'enregistrer le fichier de plugin JavaScript TinyMCE qui interagira avec l'éditeur visuel. Ajoutons un appel de fonction pour ce filtre, à l'intérieur de notre classe:
<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
<span>// Check if the logged in WordPress User can edit Posts or Pages
</span> <span>// If not, don't register our TinyMCE plugin
</span> <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span> <span>return;
</span> <span>}
</span>
<span>// Check if the logged in WordPress User has the Visual Editor enabled
</span> <span>// If not, don't register our TinyMCE plugin
</span> <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span> <span>return;
</span> <span>}
</span>
<span>// Setup some filters
</span> <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span> <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>Ici, nous enregistrons un fichier JavaScript dans le $ Plugin_Array, qui contient tous les plugins JavaScript TinyMCE.
Le deuxième filtre - MCE_BUTTONS - dit à TinyMCE que nous aimerions enregistrer un bouton dans l'éditeur visuel. Encore une fois, ajoutons un appel de fonction pour ce filtre, à l'intérieur de notre classe:
<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
<span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span> <span>return $plugin_array;
</span>
<span>}</span>Cela enregistre le nom programmatique de notre bouton TinyMCE (Custom_class).
Lorsque nous avons appelé MCE_EXTERNAL_PLUGINS, nous avons fait référence à un fichier JavaScript. Nous devons maintenant créer ce fichier et y ajouter du code JavaScript. Cela indiquera à TinyMCE comment sortir le bouton, et que faire lorsqu'il est cliqué.
Créez un nouveau fichier dans le dossier du plugin appelé tinymce-custom-class.js, en insertant le code suivant:
<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
<span>array_push( $buttons, 'custom_class' );
</span> <span>return $buttons;
</span>
<span>}</span>Cette fonction JavaScript effectue quelques actions:
Nous devrons également inclure l'image icon.png dans notre dossier de plugin - c'est l'image d'icône qui sera utilisée pour le bouton:
Enregistrez votre code et activez votre plugin dans WordPress Administration> Plugins.
Ensuite, créez ou modifiez une page ou une publication, et vous espérez voir votre bouton avec l'icône:
Cliquez sur le bouton, et vous verrez le bouton cliquer! Alerte:
Remplacement de l'alerte par une invite, demandant à l'utilisateur le nom de classe CSS qu'il souhaite enrouler autour du texte sélectionné dans l'éditeur visuel:
<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
<span>/**
</span><span> * Constructor. Called when the plugin is initialised.
</span><span> */
</span> <span>function __construct() {
</span>
<span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>Cette commande effectue quelques vérifications de santé mentale, pour s'assurer que l'utilisateur a sélectionné un texte, entré un nom de classe CSS et n'a pas annulé le processus.
Si ces vérifications passent, nous exécutons ensuite la fonction EXECCOMAND de l'éditeur, pour remplacer le texte sélectionné, par le texte sélectionné enveloppé dans une balise SPAN qui inclut la classe CSS entrée.
Si tout fonctionnait, passez à la vue "texte" et vous verrez que votre texte sélectionné est maintenant enveloppé dans une étiquette de spor:
Nous avons créé un plugin WordPress pour ajouter un bouton à l'éditeur Visual TinyMCE. Dans ce processus, nous avons exploré les filtres que WordPress utilisés pour l'intégration avec TinyMCE, ainsi que le code JavaScript nécessaire pour ajouter un bouton et effectuer une action lorsque vous cliquez sur.
Pour télécharger le code source complet, visitez le référentiel GitHub ou le lien de téléchargement de fichiers zip directs.
Dans le prochain article, nous couvrirons quelques étapes plus avancées que nous pouvons prendre pour personnaliser notre plugin TinyMCE davantage.
L'ajout de boutons personnalisés à l'éditeur visuel WordPress peut être réalisé en utilisant l'API TinyMCE. Cette API vous permet d'ajouter de nouveaux boutons à la barre d'outils et de définir leur fonctionnalité. Vous pouvez créer un nouveau fichier de plugin dans le répertoire des plugins de votre installation WordPress et utiliser le filtre «MCE_BUTTON» pour ajouter votre bouton. Ensuite, vous pouvez utiliser le filtre 'MCE_EXTERNAL_PLUGINS' pour charger le fichier JavaScript de votre plugin, qui définira la fonctionnalité du bouton.
Oui, vous pouvez Personnalisez l'éditeur visuel WordPress sans codage à l'aide de plugins. Il existe plusieurs plugins disponibles qui vous permettent d'ajouter, de supprimer ou de réorganiser les boutons de la barre d'outils, de modifier l'apparence de l'éditeur et d'ajouter des styles et des formats personnalisés. À cet effet, certains plugins populaires incluent TinyMCE Advanced, WP Edit et Ultimate TinyMCE.
Vous pouvez ajouter des styles personnalisés au visuel WordPress visuel? Éditeur en utilisant le filtre 'tiny_mce_before_init'. Ce filtre vous permet de modifier le tableau des paramètres TinyMCE, qui comprend une option «style_formats». Vous pouvez ajouter vos styles personnalisés à cette option en tant que tableau de tableaux, chacun définissant un style. Chaque style doit inclure un «titre», un «bloc», des «classes» et une propriété «wrapper».
TinyMCE est un contrôle de l'éditeur JavaScript HTML WYSIWYG basé sur la plate-forme. C'est le logiciel sous-jacent qui alimente l'éditeur visuel WordPress. En comprenant et en utilisant l'API TinyMCE, vous pouvez ajouter des fonctionnalités personnalisées à l'éditeur visuel WordPress.
Vous pouvez ajouter une police personnalisée WordPress? à l'éditeur visuel WordPress en utilisant le filtre 'MCE_CSS'. Ce filtre vous permet d'ajouter des fichiers CSS supplémentaires à l'éditeur. Vous pouvez créer un fichier CSS qui importe votre police personnalisée et définit une classe qui l'utilise, puis ajouter ce fichier à l'éditeur à l'aide du filtre 'MCE_CSS'.
Oui, l'éditeur visuel WordPress est entièrement réactif et peut être utilisé sur les appareils mobiles. Cependant, en raison de la taille de l'écran plus petite, certains boutons de la barre d'outils peuvent être cachés dans la liste déroulante «Évier de cuisine».
Vous pouvez ajouter Formats personnalisés vers l'éditeur visuel WordPress en utilisant le filtre 'TINY_MCE_BEFORE_INIT' et l'option 'Style_Formats'. Vous pouvez définir vos formats personnalisés comme un tableau de tableaux, chacun définissant un format. Chaque format doit inclure une propriété «title», «en ligne», «classes» et «wrapper».
Vous pouvez désactiver le visual WordPress Visual Éditeur en accédant aux utilisateurs> votre profil dans la zone d'administration WordPress et en vérifiant l'option «Désactiver l'éditeur visuel lors de l'écriture».
Oui, oui, Vous pouvez utiliser Shortcodes dans l'éditeur visuel WordPress. Entrez simplement le shortcode dans l'éditeur et il sera traité lorsque le message s'affiche.
Vous pouvez ajouter une table à la WordPress WordPress? Éditeur visuel en utilisant le bouton «Table» dans la barre d'outils. Si ce bouton n'est pas visible, vous devrez peut-être installer un plugin comme TinyMce avancé pour l'ajouter.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment résoudre l'erreur 504 dans CDN
Comment insérer une vidéo en HTML
Quels sont les avantages et les inconvénients de la décentralisation
Solution de rapport d'erreur de fichier SQL d'importation Mysql
MySQL change la méthode du moteur de stockage d'une table
Comment centrer un div en CSS
Qu'est-ce que cela signifie lorsqu'un message a été envoyé mais rejeté par l'autre partie ?
À quel point Dimensity 9000 équivaut-il à Snapdragon ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
