Pimp my WYSIWYG

Description WYSIWYG

Ce type de champ permet à un contributeur de mettre en forme son texte, d'ajouter des composants de différents types. (liste, tableau, image ...)
L'un des atouts majeur des WYSIWYG est qu'il permet de structurer sa page avec plusieurs niveaux de titre de façon très simple.
Mais attention ! Il est possible d'autoriser n'importe quel code HTML dans un WYSIWYG, ce qui rendra l'administration et la configuration non maintenable. Dans Drupal 8 c'est le WYSIWYG CKEditor qui est paramétré par défaut, c'est donc sur la version qu'utilise Drupal 8 que le reste de cet article va parler.

Administration des WYSIWYG

Il existe des profils afin de limiter ou non les différents types d'utilisateurs à l'utilisation du WYSIWYG. Avec une installation basique de Drupal plusieurs types de profils sont présent afin de restreindre les balises HTML et les plugins.

Création et utilisation des profils

Pour gérer ces profils il faut se rendre sur la page d'administration -> Configuration -> Rédaction de contenu -> Formats de texte et éditeurs ou via l'url /admin/config/content/formats.

Vous avez, depuis cette page, la possibilité de désactiver, d'ajouter ou de réordonner les différents profils.

Cet ordre est utilisé lorsqu'un champ WYSIWYG est affiché dans un formulaire. En fonction des droits que possède le(s) rôle(s) de l'utilisateur courant, la liste de sélection affichera les bons formats. Pour une meilleur expérience utilisateur, veillez à ordonner les formats du moins restrictif au plus restrictif. Cela permettra à vos contributeurs de saisir directement leur contenu sans devoir mettre à jour le sélecteur de chacun des champs WYSIWYG.

Gestions des plugins WYSIWYG utilisables

Une fois dans l'édition d'un format il y a tout un tas d'options. Le premier concerne les rôles pouvant utiliser ce format, puis de quelle moteur WYSIWYG il s'agît. Si vous n'avez ajouter aucun autre moteur via un module contrib ou custom vous n'aurez que CKEditor de disponible.

En dessous vous avez la configuration de la barre de plugin que le contributeur verra et pourra utiliser. La barre du dessus correspond à tous les plugins disponibles tandis que celle du dessous représente les plugins autorisés qui sont rangés dans des groupes eux mêmes affichés sur la première ou deuxième ligne. Vous avez une grande liberté dans la construction de la barre d'outils.

Ajout des styles WYSIWYG

L'un des éléments que j'utilise le plus est le plugin "Styles" (le premier à gauche de l'image ci-dessus). Il permet de définir des classes personnalisées sur des balises HTML. Ceci permet au contributeur de donner une dynamique à ces pages tout en n'ayant aucune connaissance en HTML/CSS. Pour activer ce plugin il faut mettre le sélecteur "Style" dans la barre active, puis un nouvel onglet s'affichera dans "Paramètres du plugin CKEDITOR" qui s'intitule "Liste déroulante Styles".

Dans ce paramètre ci il suffit de mettre un duo clé/valeur avec comme clé la balise suivi du nom de la classe séparée par un point. La valeur affichera le texte lisible dans le sélecteur.

Au vue de l'image ci-dessus quelques explications s'imposent. Lors d'une contribution dans un WYSIWYG on y écrit du texte. Dans un deuxième temps lorsque l'on veut mettre en forme du texte, on le sélectionne puis on clique sur un plugin. Dans mon exemple si on sélectionne un texte puis on choisit le style "Texte centré avec fond gris et bordure épaisse", cela va juste insérer le texte sélectionné dans une div possédant 2 classes (gray-push et border-fat).

On peux donc enchaîner les classes sur un même style. Pour que cela fonctionne il faut côté front appliquer du style sur ces classes.
Idéalement le contributeur devrait voir en direct depuis le BO les styles appliqués. Pour cela nous avons besoin d'ajouter du style lorsque l'on a un champ de type WYSIWYG.

Ajout de feuilles de styles pour le back-office

Pour ajouter du CSS à vos champs WYSIWYG deux manières s'offrent à vous.

Avec le hook hook_ckeditor_css_alter()

Avec ce hook, il est possible d'ajouter une feuille CSS avec des conditions. Par exemple si vous avez une feuille par format c'est la bonne façon de procéder. Voici un exemple de code :

/**
 * Implements hook_ckeditor_css_alter().
 *
 * Injects our CSS sheets anytime CKEditor has loaded.
 *
 * @param array $css
 * @param Drupal\editor\Entity\Editor $editor
 */
function mymodule_ckeditor_css_alter(array &$css, Editor $editor) {
  if (!$editor->hasAssociatedFilterFormat()) {
    return;
  }

  $known_formats = [
    'basic_html',
    'full_html'
  ];

  if (in_array($editor->getFilterFormat()->id(), $known_formats)) {
    $css[] = drupal_get_path('theme', 'mytheme') . '/build/css/style.css';
  }
}

Si vous souhaitez en savoir un peu plus voici le lien où j'ai trouvé cet exemple.

Avec le fichier montheme.info.yml de votre thème

Si vous n'avez pas de styles différents en fonction des profils ou X ou Y conditions, vous pouvez utiliser la manière simple. Depuis votre thème (front ou back), vous pouvez ajouter les lignes ci-dessous dans le fichier *.info.yml.

ckeditor_stylesheets:
  - css/custom-ckeditor-styles.css

Cette valeur sera chargée peut importe dans quel thème elle sera déclarée. Il faut juste que le thème soit activé et utilisé (Front ou Back).

Voici un exemple de ce que ça donne dans le WYWISYG.

Ceci permet au contributeur de voir un aperçu de sa contribution en même temps qu'il saisi son contenu.

Drupal 8 intègre ces outils nativement, il nous propose des options afin de simplifier et de personnaliser la contribution de contenu. Profitez de ces outils et rendez la vie de vos contributeurs plus simple. C'est toujours cela à faire en moins de votre côté.