Comment ajouter des plugins personnalisés sur TinyMCE dans Magento 2.4.6

Table des matières

  1. Introduction
  2. L'évolution de TinyMCE dans Magento
  3. L'importance des plugins personnalisés
  4. Guide étape par étape pour ajouter des plugins personnalisés
  5. Étude de cas : Ajout du plugin 'Table'
  6. Conclusion
  7. FAQ

Introduction

Avez-vous récemment mis à jour vers Magento 2.4.6 et remarqué que plusieurs plugins familiers de TinyMCE sont absents? Vous n'êtes pas seul. De nombreux utilisateurs de Magento ont rencontré ce problème et cherchent des moyens d'améliorer leur éditeur de texte pour retrouver toutes ses fonctionnalités précédentes. Ce billet de blog est conçu pour vous aider à résoudre ce problème en fournissant des instructions étape par étape pour ajouter des plugins personnalisés à TinyMCE dans Magento 2.4.6. À la fin de ce guide, vous aurez un éditeur TinyMCE entièrement personnalisé qui répond à tous vos besoins.

L'évolution de TinyMCE dans Magento

TinyMCE, le populaire éditeur WYSIWYG, a subi d'importants changements avec la sortie de Magento 2.4.6. Ces changements ont laissé de nombreux utilisateurs perplexes, car l'éditeur dans sa nouvelle itération manque de certaines fonctionnalités présentes dans les versions précédentes. Comprendre les raisons derrière ces changements peut apporter de la clarté et nous guider dans la personnalisation de l'éditeur selon nos besoins.

L'importance des plugins personnalisés

Les plugins personnalisés sont essentiels car ils étendent les fonctionnalités de TinyMCE, en en faisant un outil plus puissant pour la gestion de contenu. Que vous ayez besoin d'options de mise en forme avancées, d'intégration multimédia ou de gestion améliorée des images, les plugins personnalisés peuvent fournir ces fonctionnalités. L'absence de ces plugins dans Magento 2.4.6 peut entraver votre capacité à gérer efficacement le contenu.

Guide étape par étape pour ajouter des plugins personnalisés

Étape 1 : Préparez votre environnement

Avant de plonger dans le code, assurez-vous d'avoir les outils nécessaires et l'accès :

  1. Accès administrateur Magento : Vous devez disposer des privilèges administratifs pour apporter des modifications.
  2. Accès FTP/SFTP : Accès à vos fichiers d'installation Magento via FTP ou SFTP.
  3. Éditeur de code : Un éditeur de code fiable comme VSCode ou Sublime Text.

Étape 2 : Localisez le fichier de configuration TinyMCE

Rendez-vous au chemin suivant pour localiser la configuration TinyMCE :

app/code/[Vendor]/[Module]/view/adminhtml/web/js/tiny_mce/plugins.config.js

Ici, [Vendor] et [Module] sont des espaces réservés pour vos modules Magento spécifiques.

Étape 3 : Modifier le fichier de configuration

Ouvrez le fichier plugins.config.js dans votre éditeur de code. Vous verrez une structure similaire à ceci :

tinymce.init({ selector: "textarea", plugins: "lists link image charmap print preview hr anchor pagebreak", toolbar: "insert | undo redo |  formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat" });

Pour ajouter un nouveau plugin, incluez-le dans la liste des plugins et les options de la barre d'outils. Supposons que vous vouliez ajouter un plugin de tableau :

tinymce.init({ selector: "textarea", plugins: "lists link image charmap print preview hr anchor pagebreak table", toolbar: "insert | undo redo |  formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat" });

Étape 4 : Téléchargez les fichiers du plugin

Si le plugin personnalisé ne fait pas partie du package TinyMCE par défaut, vous devrez le télécharger manuellement. Téléchargez le plugin désiré et placez ses fichiers dans le répertoire suivant :

app/code/[Vendor]/[Module]/view/adminhtml/web/js/tiny_mce/plugins/[plugin_name]

Assurez-vous que la structure du répertoire du plugin et les fichiers correspondent aux exigences de TinyMCE.

Étape 5 : Effacez le cache et déployez le contenu statique

Après avoir configuré et téléchargé le plugin, videz le cache de votre Magento et déployez le contenu statique :

php bin/magento cache:clean php bin/magento setup:static-content:deploy -f

Étape 6 : Vérifiez les changements

Connectez-vous à votre panneau d'administration Magento et naviguez vers une page de contenu utilisant TinyMCE. Confirmez que le nouveau plugin apparaît dans la barre d'outils de l'éditeur et fonctionne comme prévu.

Étude de cas : Ajout du plugin 'Table'

Explorons un exemple spécifique où nous ajoutons le plugin 'table' à TinyMCE dans Magento 2.4.6.

Configuration initiale

Tout d'abord, nous avons vérifié la configuration actuelle de TinyMCE dans notre installation Magento. Nous avons constaté l'absence du plugin 'table' dans la liste des plugins.

Changement de configuration

Nous avons ajouté 'table' aux plugins et à la configuration de la barre d'outils dans le fichier plugins.config.js :

plugins: "lists link image charmap print preview hr anchor pagebreak table", toolbar: "insert | undo redo |  formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat"

Téléchargement des fichiers du plugin

Étant donné que le package TinyMCE par défaut de Magento n'incluait pas le plugin 'table', nous l'avons téléchargé à partir du dépôt officiel de TinyMCE et avons placé les fichiers dans le répertoire spécifié.

Effacement du cache et déploiement du contenu statique

Nous avons ensuite exécuté les commandes suivantes :

php bin/magento cache:clean php bin/magento setup:static-content:deploy -f

Vérification

En vérifiant le panneau d'administration, nous avons confirmé que le plugin 'table' était disponible et fonctionnel.

Conclusion

Personnaliser TinyMCE dans Magento 2.4.6 peut restaurer les fonctionnalités dont vous avez besoin pour une gestion de contenu efficace. En suivant les étapes décrites ci-dessus, vous pouvez ajouter n'importe quel plugin personnalisé, en adaptant l'éditeur à vos besoins spécifiques. N'oubliez pas de vider votre cache et de déployer le contenu statique pour voir les changements. Bonne personnalisation !

FAQ

Comment trouver les fichiers de plugin corrects ?

Vous pouvez télécharger les fichiers du plugin à partir du dépôt officiel de TinyMCE ou d'autres sources fiables. Assurez-vous qu'ils sont compatibles avec votre version de TinyMCE.

Que faire si un plugin ne fonctionne pas ?

Vérifiez que les fichiers du plugin sont correctement placés et référencés dans le fichier de configuration. Consultez la console du navigateur pour les erreurs et consultez la documentation de TinyMCE pour des conseils de dépannage.

Puis-je ajouter plusieurs plugins en une fois ?

Oui, vous pouvez ajouter plusieurs plugins en les listant dans le fichier de configuration, séparés par des virgules.

Existe-t-il un moyen de revenir en arrière si quelque chose ne fonctionne pas ?

Oui, créez toujours une sauvegarde de vos fichiers de configuration d'origine. Si quelque chose ne fonctionne pas, vous pouvez revenir à la sauvegarde et résoudre le problème.

Y a-t-il des plugins recommandés pour Magento ?

Certains plugins utiles incluent 'mediaembed' pour l'intégration de contenu multimédia, 'code' pour la coloration syntaxique et 'textcolor' pour la mise en forme avancée du texte.