CKEditor : personnaliser l'éditeur avec sa propre feuille de style
Par défaut, l'éditeur de texte WYSIWYG de Drupal ne contient pas le même rendu CSS que votre thème en "Front". Cela est d'autant plus vrai si vous utilisez CKEditor avec le thème d'administration.
Cela veut dire, que votre texte, vos listes à puces ou numérotées ou bien même vos liens, ont un look complétement différent entre le "Front" et le "Back-Office.
Il peut être confortable visuellement d'uniformiser ce que l'on écrit d'un coté avec ce que l'on voit de l'autre, en attribuant à chacun les mêmes règles CSS.
Mais comment faire ?
Rien de bien compliqué. Il suffit simplement d'attribuer à CKEditor sa propre feuille de style CSS.
Pour cela, nous allons procéder directement dans le thème "Front". Ici, pour l'exemple, je l'ai appelé "mycustomtheme".
1. Créer la feuille de style CSS
Nous allons créer un fichier "ckeditor.css" que nous allons placer dans le dossier "css" du thème "mycustomtheme".
Voici un exemple que ce qu'on pourra trouver dans ce fichier :
@font-face {
font-family: 'Ubuntu';
src: url('../fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype');
}
html {
margin: 1rem;
}
body {
font-family: 'Ubuntu', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #000;
background-color: #FFF;
margin: 0;
}
/*** link ***/
a {
color: #7F050A;
font-size: 1em;
text-decoration: none;
}
a:hover {
color: #7F050A;
text-decoration: underline;
}
/*** text ***/
p {
margin-top: 0;
margin-bottom: 1rem;
line-height: 1.6;
}
b, strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
/*** list ***/
ul,
ol {
padding: 0;
margin: 1rem 2rem;
}
Ici, je viens directement dire à CKEditor d'utiliser la police de charactères qui se trouvent dans le dossier "fonts" et que j'utilise également pour mon "Front". Ensuite, je déclare les règles CSS qui m'intéressent : texte, lien, liste, etc...
2. Rattacher la feuille de style à CKEditor
Pour se faire, nous allons simplement rajouter l'entrée "ckeditor_stylesheets" dans le fichier "mycustomtheme.info.yml" de notre thème :
name: "My Custom Theme"
description: "My custom theme"
type: theme
base theme: stable
core_version_requirement: ^8 || ^9
ckeditor_stylesheets:
- css/ckeditor.css
Et voilà !
Je ne vois aucun changement !
Pas de panique. Lorsque cela arrive, il faut avoir en tête que la plupart des fichiers CSS sont en cache dans le navigateur.
Donc, un petit nettoyage du cache navigateur est indispensable pour que le fichier soit pris en compte.
Et pour être sur, un petit vidage de cache de Drupal est toujours le bienvenu !
Méthode alternative
Une méthode alternative consiste à ne pas passer par le thème "Front" mais par un "custom" module : ici pour l'exemple "mycustommodule".
Même étape que précédemment, nous allons rajouter le fichier "ckeditor.css" dans le dossier "css" du module.
Ensuite, nous allons surcharger la fonction hook_ckeditor_css_alter() dans le fichier "mycustommodule.module".
<?php
use Drupal\editor\Entity\Editor;
/**
* @param array $css
* @param Editor $editor
*/
function mycustommodule_ckeditor_css_alter(array &$css, Editor $editor) {
$css[] = \Drupal::service('extension.list.module')->getPath('mycustommodule') . '/css/ckeditor.css';
}
Personnellement, pour des questions de maintenance, je préfère tout centraliser dans mon thème "Front" que de déporter cet ajout dans un module.
Mais c'est à vous de voir ce qui vous paraitra le plus simple à implanter et à maintenir en fonction de votre projet.