CKEditor dans Drupal 8 Configuration de nouvelles options pt. I

12.12.2017

Qu'est-ce que CKEditor ?

CKEditor est l'un des nombreux éditeurs HTML visuels. Il permet de saisir facilement du texte en utilisant une interface qui ressemble à des éditeurs tels qu'OpenOffice.
Il facilite le formatage du texte grâce à un ensemble de boutons qui servent, entre autres, pour des actions telles que :

changer la police,
la taille du texte,
ajouter une image,
faire des listes,
et bien d'autres.

Le CKEditor est l'éditeur de texte par défaut dans Drupal 8. Vous n'avez pas besoin d'ajouter de bibliothèques ou de modules pour l'utiliser. CKEditor est excellent car il donne du pouvoir aux éditeurs. Grâce à lui, ils peuvent gérer le balisage de leurs sites web Drupal sans avoir à demander à leur agence Drupal de le faire pour eux.

L'image montre CKEditor activé dans le formulaire d'ajout de texte
Éditeur activé dans le formulaire d'ajout de contenu

Par défaut, l'éditeur est activé pour deux formats d'entrée de texte :

HTML basique,
HTML complet.

Ils diffèrent par le nombre d'options de formatage de texte activées. Vous vous en rendrez compte lorsque vous changerez de format lors de l'ajout de contenu.
Les options de formatage du texte et la visibilité de l'éditeur en fonction du filtre sélectionné ou du rôle de l'utilisateur sont entièrement configurables.
Les paramètres de l'éditeur se trouvent à la page
Configuration → Écriture de contenu → Formats de texte et éditeurs

Le chemin vers les options de l'éditeur comme mentionné ci-dessus et certaines des options qui peuvent être modifiées

Par défaut, tout utilisateur connecté peut utiliser le CKEditor en activant le filtre "HTML basique".
Le filtre "HTML complet" est réservé aux utilisateurs qui sont administrateurs de la page.
Avec chaque filtre activé pour l'éditeur, vous avez la possibilité de configurer les options d'outils.
Ci-dessous, vous trouverez les options pour "HTML basique".

Vous pouvez voir ici l'option "Éditeur de texte", qui active ou désactive un éditeur étendu pour ce format de texte.
Dans la section "Rôles", les rôles des utilisateurs pouvant utiliser ce format sont définis.
La section "CONFIGURATION DE LA BARRE D'OUTILS" est responsable de l'activation et de la désactivation des options dans le CKEditor.
"Boutons disponibles" indiquent quels boutons sont disponibles à l'utilisation dans le CKEditor (sauf ceux déjà ajoutés).
"Barre d'outils active" est une section avec des boutons activés.
En utilisant une méthode simple de glisser-déposer, vous pouvez activer des options supplémentaires. Il suffit de déplacer le bouton de la section "Boutons disponibles" vers la "Barre d'outils active". Il ne vous reste plus qu'à enregistrer les paramètres.

Utiliser l'éditeur

Ajoutez un nouvel article à la page.
Contenu -> Ajouter du contenu -> Article.
Dans le champ de texte, vous devriez voir l'éditeur de texte pour le format de données "HTML basique".

Quelques boutons de l'éditeur HTML basique visibles ckeditor activé

Si vous changez le format de texte en "HTML complet", alors vous verrez probablement plus d'options d'éditeur.
En plus des options standard, telles que le gras ou l'italique, vous avez également la possibilité d'insérer une image en l'ajoutant au serveur de la page.

Éditeur étendu avec une option de téléchargement d'images ouvert.

Ci-dessous se trouve un exemple de contenu avec un texte, un lien et une image.
Dans l'éditeur, vous pouvez voir immédiatement comment cela va paraître après que le contenu soit enregistré (d'où le nom de tels éditeurs – WYSIWYG – Ce Que Vous Voyez Est Ce Que Vous Obtenez).

Exemple de texte, lien et image, une voiture de sport dans ce cas - créé avec CKEditor.

Chaque bouton génère un code HTML qui, une fois que le contenu est enregistré, est placé sur la page.
L'exemple ci-dessus a généré quelque chose comme ceci :

<p><em><strong>Ceci est un exemple de texte. </strong></em><a href="https://drupal.org">Avec lien.&nbsp;</a></p>

<p>Et image</p>
<img alt="img" data-align="center" data-entity-type="file" data-entity-uuid="bae745ac-f47d-4426-84cd-9d319f8403f1" src="/sites/default/files/inline-images/DBten-web-news.jpg" />
<p>&nbsp;</p>

Champ de texte personnalisé avec CKEditor

Dans Drupal, vous pouvez facilement créer de nouveaux types de contenu et y ajouter des champs.
Sur l'exemple du type de contenu existant – l'Article, il montrera comment ajouter un champ pouvant utiliser automatiquement l'éditeur de texte étendu.
La page Structure -> Types de contenu

Types de contenu définis dans l'éditeur. Une flèche rouge marque un bouton qui offre une option pour gérer les champs

En cliquant sur "Gérer les champs", vous pouvez ajouter vos propres champs pour le type de contenu choisi.

Un bouton qui permet à l'utilisateur d'ajouter de nouveaux types de champs.

Choisissez Texte (formaté, long) comme type de champ
Il ajoute une zone de texte multilignes.

Ajout d'un nouveau champ. L'option décrite ci-dessus est définie

Après avoir enregistré toutes les options, vous remarquerez que l'éditeur est automatiquement activé pour ce champ.

Et c'est tout, il suffit d'enregistrer le champ pour pouvoir l'utiliser.

Étendre les capacités de CKEditor dans Drupal 8

Il existe de nombreux modules qui introduisent de nouvelles fonctionnalités au CKEditor.
Certains sont décrits ci-dessous, et voici la liste complète des modules étendant CKEditor.

Editor Advanced Link
Une boîte de dialogue étendue pour créer des liens.
Il vous permet de définir des attributs tels que :

titre
classe
id
cible

Editor File Upload

Il vous permet de télécharger directement des fichiers et de créer des liens vers eux dans le texte.

LinkIt
Fournit une interface simple pour créer des liens internes et externes. Vous pouvez lier en interne, par exemple, via un champ d'autocomplétion qui recherche des liens basés sur les titres des contenus ajoutés au système.