Tagcontenu éditorial

[Magento 2] Rendre accessibles des styles custom dans l’éditeur WYSIWYG TinyMCE

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.

Editer le fichier app/code/Sodifrance/Customtinymce/registration.php

Editer le fichier app/code/Sodifrance/Customtinymce/etc/di.xml

Editer le fichier app/code/Sodifrance/Customtinymce/etc/module.xml

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.

Dans le fichier ci-dessus, vous pouvez éditer la partie suivante à votre convenance pour réorganiser votre éditeur WYSIWYG:

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:

…l’heureux développeur Magento 2 se voit contraint et forcé de déclarer ses paramètres de cette manière:

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 »:

Le champ « Result » doit vous retourner un JSON correct:

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):

Mes sources d’inspiration pour parvenir à mes fins:

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:

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:

[Magento 2] Inclure un bloc statique depuis un champ WYSIWYG

Inclure un bloc statique depuis n’importe quel champ WYSIWYG (contenu de page CMS, etc…).

Exemple:

© 2021 devfrontend.info

Theme by Anders NorénUp ↑