Définir des styles CSS pour l'éditeur WYSIWYG

1. La notion de style dans l'éditeur WYSIWYG

L'éditeur WYSIWYG utilise deux groupes de styles :

• les styles globaux : ce sont des classes CSS appliquées à une balise DIV  englobant la totalité du contenu

• les styles locaux : ce sont des classes CSS, héritant du style global en cours, appliquées à des balises SPAN englobant des portions de texte (ou de code HTML). Des styles locaux sont définis pour chaque style global

2. Enrichir la barre d’outils CSS de l'éditeur WYSIWYG

2.1 Via le fichier css/wysiwyg.css

La barre d'outils CSS de l'éditeur WYSIWYG est générée automatiquement depuis le fichier css/wysiwyg.css. On retrouve donc la notion de styles globaux et locaux dans ce fichier et son écriture. Avec l’introduction de LESS via Bootstrap dans JCMS, il faut désormais passer par le fichier css/wysiwyg.less afin de générer le fichier css/wysiwyg.css

Voici le fichier wysiwyg.less modifié  et son résultat généré :

Les styles définis dans le fichier css/wysiwyg.css ont, dans le cas général, cette syntaxe que le processus de création de la barre d'outils reconnaît. Le processus de parsing du CSS cherche un premier nom de classe pour créer un style global (s'il n'existe pas déjà) puis un éventuel style local à y associer. A noter que les noms des styles correspondent aux noms des classes.

Ce processus est capable de lire toutes les syntaxes admises en CSS. Dans notre exemple, le style global global1 est créé avec les deux styles locaux associés local1 et local2.

Attention, à partir de JCMS 9 le fichier wysiwyg.css n'est plus intégré automatiquement dans le site. Si vous souhaitez l'utiliser vous devez ajouter dans la configuration de votre module la propriété suivante : 

channel.css.all.081.fo: css/wysiwyg.css

2.2 Via un module (méthode préconisée)

La méthode précédente ne permet pas d’enrichir la barre d’outils CSS de manière modulaire car il faut modifier directement css/wysiwyg.css. Pour ce faire, il faut passer par un module en utilisant le mécanisme de branchement de JCMS :

• Créer d’abord un module MyWysiwygPlugin
• Déclarer un composant de type policyfilter avec le code suivant :

<policyfilter class="com.example.jcmsplugin.mywysiwyg.MyWysiwygPolicyFilter" />

public class MyWysiwygPolicyFilter extends BasicWysiwygPolicyFilter { 
  @Override 
  public void checkWysiwygCSSFile(Set cssFileSet){ 
  cssFileSet.add("plugins/MyWysiwygPlugin/css/mywysiwyg.css"); 
  }
}

• Déclarer la génération du fichier less via le plugin.prop du module composant de type policyfilter.

channel.less.plugins/MyWysiwygPlugin/css/mywysiwyg.css: plugins/MyWysiwygPlugin/css/mywysiwyg.less

• Le contenu du fichier mywysiwyg.less est le suivant :

// Include variables and mixins
@import "../../../css/jalios/core/init.less"; // Use init-mixins.less if more mixins are required
// ------------------------------------------
// CUSTOM WYSIWYG STYLES
// ------------------------------------------
.global1, .global2{ 
 .local1, .local2{
 font-style: oblique;
 font-size: @basefont + 2;
 }
}

.community { 
 UL LI { list-style: square inside; }
}

• Relancer JCMS.

2.3 Attention aux commentaires CSS

Involontairement, on peut induire en erreur le processus de parsing avec du CSS mal formé. Exemple avec les commentaires où la différence est minime :

3. Édition de wysiwyg avec les styles CSS du Front Office

3.1 Introduction

A partir de JCMS 7.1 SP1, il est possible d'appliquer des styles css spécifiques dans l'éditeur wysiwyg TinyMCE. Cette possibilité permet aux contributeurs de visualiser le rendu durant l'édition, presque comme le rendu définitif en Front Office.

* presque : presque car, selon l'endroit et le portail d'arrivée du contenu, d'autres styles supplémentaires pourraient encore s'appliquer en Front Office (le style du portail, des styles ajoutés par certaines portlets présentes dans la page)

Sans application du CSS spécifique

Avec application du CSS spécifique

3.2 Mise en place

Supposons que le style du balise <h1> dans le front office est personnalisé via le fichier CSS plugins/ExamplePlugin/css/front-style.css ayant le contenu suivant :

.myapp H1{
 color: red; 
}

Pour appliquer ce style au niveau de l’iframe d’édition TinyMCE, il faut donc passer par deux étapes :

1. charger le fichier plugins/ExamplePlugin/css/front-style.css dans le header de l’iframe TinyMCE
2. positionner une classe sur le body de l’iframe pour activer les styles, en l’occurence la classe myapp

3.2.1 Chargement de css dans l'iframe TinyMCE

Pour charger le fichier plugins/ExamplePlugin/css/front-style.css, il faut passer par le mécanisme de déclaration dans un fichier de propriété de JCMS. Dans notre exemple, nous recommandons de le déclarer dans le fichier plugin.prop du module ExamplePlugin pour faciliter la maintenance. Nous avons donc la déclaration suivante :

wysiwyg.tinymce.content-css: css/jalios/core/core.css, plugins/ExamplePlugin/css/front-style.css

La propriété wysiwyg.tinymce.content-css accepte une liste de fichiers css, séparés par des virgules. Il faut conserver la déclartion du fichier core.css.
Redémarrer JCMS et inspecter le code HTML de l’édition d’une zone wysiwyg pour noter la présence du fichier.

<head xmlns="http://www.w3.org/1999/xhtml">
<style id="mceDefaultStyles" type="text/css">...</style>
<base href="http://127.0.0.1:8080/8.0.2/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
<link type="text/css" rel="stylesheet" href="http://127.0.0.1:8080/8.0.2/css/jalios/core/core.css">
<link type="text/css" rel="stylesheet" href="http://127.0.0.1:8080/8.0.2/css/wysiwyg.css">
<link type="text/css" rel="stylesheet" href="http://127.0.0.1:8080/8.0.2/plugins/ExamplePlugin/css/front-style.css">
...
</head>

3.2.2 Ajout d'une classe sur le body de l'iframe tinymce

Le fichier CSS est maintenant chargé, afin que les règles s'appliquent, il faut ajouter la classe myapp sur le body de l'iframe. Ceci se fait grâce à la propriété suivante, toujours placée dans plugin.prop :

wysiwyg.tinymce.init-options: body_class : 'myapp'

Pour plus de détails d’utilisation de cette propriété, consulter le fichier jcms.prop.
Cela se traduit en HTML par :

<body id="tinymce" class="mceContentBody wysiwyg classic myapp" contenteditable="true" spellcheck="false" dir="ltr">…</body>

3.2.3 Tester

Afin de tester le rendu, il faut redémarrer JCMS, puis appeler la JSP suivante afin de vérifier la bonne prise en compte du paramétrage :

http://server:port/context/js/jalios/wysiwyg/wysiwyg-init.jsp

La sortie HTML de cette page produit du code javascript qui contient la ou les classes CSS spécifique(s) précédemment déclarées :

 theme_advanced_buttons1 : 'cut,copy,paste,pastetext,pasteword,...,
 theme : 'advanced',
 entity_encoding : 'raw', // needed as we want data to be store in UTF-8
 ...
 theme_advanced_resizing_use_cookie : false,
body_class : 'myapp'
});

Editer maintenant un article.

4. Conseils pour bien profiter du CSS dans l'éditeur WYSIWYG

4.1 Concevoir du CSS dans la globalité

Il est indispensable de concevoir le fichier wysiwyg.css en gardant à l’esprit les contraintes suivantes :

• il y a des styles provenant du portail 
• les navigateurs n'ont pas tous la même manière d’interpréter du CSS

Il faut donc mener des tests plus poussés sans se contenter de ceux dans l'éditeur

4.2 Eviter les styles locaux

Cette pratique est recommandée car elle simplifie l'utilisation de la barre de style et profite de la sémantique des balises HTML.

Exemple sur la liste non ordonnée où il suffit de changer le style global :

4.3 Harmoniser le nom des styles

Il est recommandé de donner aux styles, en particulier ceux locaux si le besoin oblige, des noms en rapport avec leur usage et la sémantique, et non avec le rendu graphique.

On pourra ainsi changer de style global pour un champ wysiwyg sans qu'une partie des balises HTML deviennent inutiles et comparer les différentes apparences proposées une fois le document rédigé.

Par exemple dans l’exemple précédent, si nous souhaitons changer le style des listes non listes non ordonnées du site “community”, il suffit de corriger dans wysiwyg.less

// ------------------------------------------
// CUSTOM WYSIWYG STYLES
// ------------------------------------------
.community { 
 UL LI { list-style: square inside; }
}