TagWYSIWYG

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

[Magento 2] Initiation à l’injection de dépendances en créant un widget custom qui permet l’upload d’une image et l’ajout d’un lien vers une page CMS

Note: pour mettre en place l’upload d’image, nous allons installer l’extension magento2-widget-parameters. Je vous invite à consulter le billet de blog suivant pour la démarche à suivre: [Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Une fois l’extension magento2-widget-parameters installée, nous allons créer les fichiers suivants:

app/code/Sodifrance/Pdv/etc/widget.xml

Le champ « Clé d’URL de la page de destination » est en required="false" car l’utilisateur n’est pas obligé d’associer un lien pointant vers une autre page à ce widget. Nous verrons avec le code de la vue PHTML comment nous gérons ça en PHP par le biais d’une condition if/else.

app/code/Sodifrance/Pdv/Block/Widget/TwoColsDynamic.php

Ici, on crée 2 fonctions publiques:

  • getWidgetMediaUrl() qui récupère l’URL de base du site, lui ajoute le chemin vers l’endroit où reposent les médias de contenu éditorial dans Magento 2 et le libellé et le format de l’image uploadée via le widget en BO.
  • getWidgetTargetPageUrl() qui récupère l’URL de base du site et lui ajoute la clé d’URL de la page cible, telle que renseignée via le widget en BO.

Note: dans l’IDE PHP Storm, il est possible de ne taper que les lignes suivantes:

Ensuite, placez le curseur sous ces lignes et faites le raccourci Alt + Inser. Vous aurez accès à une liste de bouts de code que l’IDE se propose d’écrire pour vous! Si vous choisissez « constructor » et que vous sélectionnez ensuite les 2 entrées $helper et $urlInterface (placez le curseur sur la première, puis Maj + flèche du bas), le constructeur sera généré automatiquement.

app/code/Sodifrance/Pdv/view/frontend/templates/widget/twocolsdynamic.phtml

Dans le template PHTML, on ajoute une condition <?php if (!empty($block->getData('block_link'))): ?> qui vérifie si le champ URL est rempli en BO et génère du HTML en fonction.

Flushez vos caches; le widget devrait être disponible en backoffice!

[Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom

Pour ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom dans Magento 2, nous allons utiliser l’extension suivante: Useful widget types for Magento 2 like image selector and wysiwyg text editor (un article de l’auteur ici: Using an Image Selector Parameter for Magento Widgets).

Code source zippé – magento2-widget-parameters-master.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Installation de l’extension magento2-widget-parameters via Composer

Documentation officielle de Magento 2 sur comment installer une extension via composer.

Lancer la commande $ composer require dmatthew/magento2-widget-parameters:1.0.1 à la racine de votre projet Magento 2.
Des warnings vont probablement s’afficher. Ne pas en tenir compte.

app/code/Sodifrance/Pdv/etc/widget.xml

Nous allons déclarer un widget contenant 3 paramètres:

  • un titre
  • une image issue de la « médiathèque » de Magento 2
  • un champ WYSIWYG (qui permet d’utiliser du code HTML pour la mise en page, ou d’inclure un bloc statique)

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

Il a fallu créer une fonction pour permettre de récupérer l’URL de l’image uploadée.

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Le template PHTML.

Flusher les caches:

Si problèmes…

Voir aussi: [Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue.

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

[Magento] Supprimer le wrapper WYSIWYG (classe .std)

Source : How to remove std div in magento.

Dans Magento, les contenus WYSIWYG sont nativement entourés d’un container <div class="std" />. Il peut arriver qu’on glisse du contenu dans une page CMS (un widget par exemple comme une liste de produits sur la page d’accueil) et qu’on ne souhaite pas qu’il hérite des styles associés à la classe .std. En ajoutant le code ci-dessous, vous pouvez retirer le wrapper et sa classe et protéger vos blocs d’un éventuel héritage de styles non désiré :

[Magento][TinyMCE] Customizer les settings du WYSIWYG

Le fichier setup de TinyMCE est localisé dans js/mage/adminhtml/wysiwyg/tiny_mce/setup.js.

Dans ce fichier, repérer la variable var settings = { :

Les lignes suivantes pourront être ajoutées à ces variables pour :

Modifier le Doctype

[entity_encoding] Eviter que les caractères accentués (é, è, à, etc…) soient transformés en entités HTML (é, è, etc…)

Si la boutique est entièrement en UTF-8, cette fonction peut être désactivée en éditant la configuration de tinyMCE. Ajouter la ligne :

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:entity_encoding, [Résolu] TinyMCE et accents.

[valid_elements]

Source, documentation officielle de TinyMCE : valid_elements.

[extended_valid_elements] Etendre le champ des balises et attributs HTML valides

Ajouter des paramètres pour éviter que TinyMCE ne supprime certaines balises vides.
Très embêtant lorsqu’on cherche, par exemple, à exploiter une police d’icônes dans un bloc statique. Le code HTML suivant est, par défaut, automatiquement supprimé :

Pour pallier à ce souci, ajouter la ligne suivante :

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements.

[valid_children] Etendre le champ des balises HTML enfants valides

Permettre, par exemple, l’imbrication d’un H1 dans un A (pratique désormais permise en HTML5).

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:valid_children.

[force_br_newlines][force_p_newlines] Gestion des retours chariot et du formatage des paragraphes

Supprimer le comportement qui consiste à créer un nouveau paragraphe à chaque retour chariot saisi par l’utilisateur backoffice.

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:force_p_newlines, http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines.

[forced_root_block] Supprimer l’imbrication automatique du texte dans une balise P

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration3x:forced_root_block.

TinyMCE valid_elements setting for HTML5

  • Source Git : https://gist.github.com/veprbl/1136304
  • Fork le plus récent (code ci-dessous)(Last active on 20 Mar 2013) : https://gist.github.com/susebus/5204059
  • © 2020 devfrontend.info

    Theme by Anders NorénUp ↑