Solution testée fonctionnelle Magento 2.3!
Votre charte graphique prévoit sans doutes des styles spécifiques pour vos titres. Ces styles sont affectés via des classes CSS aux éléments Hx et ne font pas l’objet d’une prise en compte automatique par l’éditeur WYSIWYG TinyMCE 4 fourni dans Magento 2.
Convention: dans nos examples, le <vendorNamespace> sera Sodifrance et le <moduleName> sera Customtinymce. Le code source de ce module Tiny MCE 4 custom est disponible ici au téléchargement.
Créer un nouveau module
La commande ci-dessous va créer un nouveau module et initier tous les fichiers de base nécessaires à la configuration de ce dernier.
|
1 2 |
// $ n98-magerun2 dev:module:create <vendorNamespace> <moduleName> $ n98-magerun2 dev:module:create Sodifrance Customtinymce |
Editer le fichier app/code/Sodifrance/Customtinymce/registration.php
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Sodifrance_Customtinymce', __DIR__ ); |
Editer le fichier app/code/Sodifrance/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="sodifrance_customtinymce_config" type="Sodifrance\Customtinymce\Plugin\Config" sortOrder="10"/> </type> </config> |
Editer le fichier app/code/Sodifrance/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="Sodifrance_Customtinymce" setup_version="0.1.0" /> </config> |
Créer le fichier app/code/Sodifrance/Customtinymce/Plugin/Config.php
Solution partiellement trouvée ici (si l’on excepte l’option $settings['style_formats'] = [ ... ]; que j’ai rajouté moi): Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Attention: cette solution a ensuite été reprise, améliorée et rendue disponible par Magefan sur son repository Git.
|
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 58 59 60 61 62 63 64 65 66 67 68 69 |
<?php namespace Sodifrance\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'; $settings['style_formats'] = [ [ 'title' => 'Custom Heading 1', 'block' => 'h1', 'classes' => 'cms-blockHeading-1-heading' ], [ 'title' => 'Custom Heading 2', 'block' => 'h2', 'classes' => 'cms-blockHeading-2-heading' ] ]; $result->setData('settings', $settings); return $result; } else{ // don't make any changes if the current wysiwyg editor is not tinymce 4 return $result; } } } |
Dans le fichier ci-dessus, vous pouvez éditer la partie suivante à votre convenance pour réorganiser votre éditeur WYSIWYG:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 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'; $settings['style_formats'] = [ [ 'title' => 'Custom Heading 1', 'block' => 'h1', 'classes' => 'cms-blockHeading-1-heading' ], [ 'title' => 'Custom Heading 2', 'block' => 'h2', 'classes' => 'cms-blockHeading-2-heading' ] ]; |
Mettre en place vos paramètres TinyMCE 4 custom dans Magento 2 (exemple avec l’option style_formats)
Avec Magento, exit l’initialisation de votre plugin en front via javaScript avec passage d’un objet pour paramétrer le tout. Les options natives de TinyMCE v4 pour formater le contenu sont prises en charge, mais il faut les déclarer dans le fichier app/code/Sodifrance/Customtinymce/etc/module.xml, en PHP.
Aussi, pour l’option <a href="https://www.tiny.cloud/docs-4x/configure/content-formatting/#style_formats">style_formats</a> qu’on utiliserait nativement de cette manière:
|
1 2 3 4 5 6 7 8 9 |
tinymce.init({ option1, option2, option3, style_formats: [ {title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading'}}, {title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading'}} ] }); |
…l’heureux développeur Magento 2 se voit contraint et forcé de déclarer ses paramètres de cette manière:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$settings['style_formats'] = [ [ 'title' => 'Custom Heading 1', 'block' => 'h1', 'classes' => 'cms-blockHeading-1-heading' ], [ 'title' => 'Custom Heading 2', 'block' => 'h2', 'classes' => 'cms-blockHeading-2-heading' ] ]; |
Quelques outils pour convertir un tableau JSON en tableau PHP
(puisqu’on est obligé de travailler comme ça, hein…)
Tester la validité de votre tableau avec PHP Sandbox
Dans le champ « script », tapez ceci et activez le bouton « Execute code »:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $settings = [ [ 'title' => 'Custom Heading 1', 'block' => 'h1', 'classes' => 'cms-blockHeading-1-heading' ], [ 'title' => 'Custom Heading 2', 'block' => 'h2', 'classes' => 'cms-blockHeading-2-heading' ] ]; echo json_encode($settings); |
Le champ « Result » doit vous retourner un JSON correct:
|
1 |
[{"title":"Custom Heading 1","block":"h1","classes":"cms-blockHeading-1-heading"},{"title":"Custom Heading 2","block":"h2","classes":"cms-blockHeading-2-heading"}] |
Tester la validité de données JSON avec JSON Formatter & Validator
Dans le champ « JSON Data/Url », collez le code JSON retourné juste au-dessus par PHP Sandbox et cliquer sur le bouton « Process ».
Passée la ligne ci-dessous, les devs sont expérimentaux et à ne pas utiliser en prod.
ATTENTION! La solution présentée, bien que fonctionnelle, est absolument dégueulasse en terme de bonnes pratiques. Elle se révélera notamment assez compliquée à maintenir.
Vous pouvez télécharger le code source du module permettant d’ajouter des styles custom (style_formats) à l’éditeur WYSIWYG TinyMCE 4 pour Magento 2 et le tester immédiatement dans votre projet en tapant les commandes suivantes (attention: le zip contient 2 modules; c’est le module Customtinymce qu’il faut utiliser):
|
1 |
$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 setup:static-content:deploy -f; n98-magerun2 cache:clean |
Mes sources d’inspiration pour parvenir à mes fins:
- Je suis parti de la solution proposée ici: [Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4 – Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch.
- Je me suis également inspiré de ce projet: Replaces the current Magento 2 core RTE editor by the newest version of TinyMCE 4.
- …et de cette solution proposée sur stackoverflow: magento2 : how to override lib/web/mage/adminhtml/browser.js? (puisqu’il s’agit de faire un override d’une librairie se trouvant dans
lib/web/.
Dans app\code\Sodifrance\Customtinymce\view\adminhtml\web\js\customtinymce.js (qui n’est autre que la version 4.9.5 native du plugin TinyMCE4 (DEV package, code non minifié)), passez les paramètres style_formats custom que vous souhaitez ajouter dans la variable getDefaultSettings:
|
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 |
var getDefaultSettings = function (id, documentBaseUrl, editor) { return { id: id, theme: 'modern', delta_width: 0, delta_height: 0, popup_css: '', plugins: '', document_base_url: documentBaseUrl, add_form_submit_trigger: true, submit_patch: true, add_unload_trigger: true, convert_urls: true, relative_urls: true, remove_script_host: true, object_resizing: true, doctype: '<!DOCTYPE html>', visual: true, font_size_style_values: 'xx-small,x-small,small,medium,large,x-large,xx-large', font_size_legacy_values: 'xx-small,small,medium,large,x-large,xx-large,300%', forced_root_block: 'p', hidden_input: true, render_ui: true, indentation: '40px', inline_styles: true, convert_fonts_to_spans: true, indent: 'simple', indent_before: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist', indent_after: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist', entity_encoding: 'named', url_converter: editor.convertURL, url_converter_scope: editor, ie7_compat: true, style_formats: [ { title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading' }, { title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading' } ] }; }; |
Dans le fichier app/code/Sodifrance/Customtinymce/view/base/requirejs-config.js, il faut ensuite mapper l’alias tinymce4 (initialement défini ici: vendor/magento/module-ui/view/base/requirejs-config.js) vers notre surcharge de la source du plugin TinyMCE4:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var config = { shim: { 'Sodifrance_Customtinymce/js/customtinymce': { exports: 'tinyMCE' } }, map: { '*': { tinymce4: 'Sodifrance_Customtinymce/js/customtinymce' } } }; |