Par défaut, l’éditeur WYSIWYG TinyMCE 4 proposé par Magento 2 n’inclut pas une bonne partie des fonctionnalités embarquées par la librairie TinyMCE 4 (couleur du texte, du fond, …) qui peuvent être utiles pour un rédacteur de contenu. Je prends pour exemple les Custom Formats (Demo CodePen), très utiles lorsque vous créez des styles qui reposent sur un assemblage d’éléments HTML et de classes.
- Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced
- Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch
Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced
Testé fonctionnel Magento 2.3.3. Attention: le plugin ne fournissant aucune licence, il est déconseillé de l’utiliser sur des projets que vous vendez.
Vous pouvez utiliser le plugin Better Magento 2 WYSIWYG TinyMCE4 Editor par Magefan.
- Télécharger le code source du plugin Magento 2 TinyMCE 4 WYSIWYG extension (version 2.0.5.2) pour la postérité.
- Accès à une brève documentation (installation, utilisation…) Magento 2.3 – TinyMCE 4 Toolbar / Text Color Tool Missing. Version PDF: magefan.com-Magento 23 – TinyMCE 4 Toolbar Text Color Tool Missing.
- Fil de discussion sur magento.stackexchange.com: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration et version PDF pour la postérité.
Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch
Testé fonctionnel Magento 2.3.3. Source: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Créer plusieurs fichiers:
Convention: dans notre exemple, Project et project sont à remplacer par le libellé de votre Vendor.
Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce
Create app/code/Project/Customtinymce/etc/di.xml:
|
1 2 3 4 5 6 7 |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface"> <plugin name="project_customtinymce_config" type="Project\Customtinymce\Plugin\Config" sortOrder="10"/> </type> </config> |
Create app/code/Project/Customtinymce/etc/module.xml:
|
1 2 3 4 5 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Project_Customtinymce" setup_version="0.1.0"/> </config> |
Create app/code/Project/Customtinymce/registration.php
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Project_Customtinymce', __DIR__ ); |
Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php namespace Project\Customtinymce\Plugin; class Config { protected $activeEditor; public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor) { $this->activeEditor = $activeEditor; } /** * Return WYSIWYG configuration * * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface * @param \Magento\Framework\DataObject $result * @return \Magento\Framework\DataObject */ public function afterGetConfig( \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface, \Magento\Framework\DataObject $result ) { // Get current wysiwyg adapter's path $editor = $this->activeEditor->getWysiwygAdapterPath(); // Is the current wysiwyg tinymce v4? if(strpos($editor,'tinymce4Adapter')){ if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){ // do not override ui_element config (unsure if this is needed) return $result; } $settings = $result->getData('settings'); if (!is_array($settings)) { $settings = []; } // configure tinymce settings $settings['menubar'] = true; $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code'; $settings['plugins'] = 'textcolor image code'; $result->setData('settings', $settings); return $result; } else{ // don't make any changes if the current wysiwyg editor is not tinymce 4 return $result; } } } |
Remarque: dans ce fichier Config.php, si on désactive tous les $settings[''] = ; (comme ci-dessous), c’est les fonctionnalités prévues par défaut dans Magento 2 qui s’afficheront dans vos champs d’éditeurs WYSIWYG en admin.
|
1 2 3 4 |
// configure tinymce settings // $settings['menubar'] = true; // $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code'; // $settings['plugins'] = 'textcolor image code'; |
Lancer les commandes:
|
1 2 |
$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor $ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush |