TagTinyMCE 4

[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] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4

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

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.

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:

Create app/code/Project/Customtinymce/etc/module.xml:

Create app/code/Project/Customtinymce/registration.php

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

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.

Lancer les commandes:

© 2021 devfrontend.info

Theme by Anders NorénUp ↑