Faites apparaître votre Drupal 9 CKEditor - 7 modules utiles dont vous ignoriez l'existence

L'éditeur de contenu est fondamentalement la fonction la plus cruciale d'un CMS. Et avec une centrale comme CKEditor comme outil d'édition de texte riche par défaut, Drupal a considérablement amélioré son jeu de gestion de contenu avec plusieurs nouvelles fonctionnalités pour Drupal 8/9 comme le système de widgets CKEditor et le filtre de contenu avancé (ACF). Donc, oui, c'est assez puissant même avec les fonctionnalités par défaut… Mais vous pouvez vraiment améliorer votre jeu CKEditor avec l'aide de certains modules et plug-ins contribués. Lisez la suite pour avoir notre point de vue sur les modules complémentaires les meilleurs et les plus intéressants pour étendre les fonctionnalités et la convivialité de CKEditor.

L'éditeur CK de Drupal 9

Tout d'abord, pour ceux qui découvrent Drupal, CKEditor 4.5 est l'éditeur riche par défaut WYSIWYG (ce que vous voyez est ce que vous obtenez) dans Drupal 8/9. Il s'agit d'un éditeur de texte qui aide les administrateurs de sites Web à rédiger et à modifier le contenu directement dans les pages Web. Comme Drupal, CKEditor est un projet open source et a récemment été mis à niveau avec de nombreuses nouvelles fonctionnalités puissantes qui continueront d'être améliorées. Dans le cadre de l'initiative de préparation à Drupal 10, les contributeurs de Drupal travaillent à la mise en œuvre de la version la plus récente et la plus moderne - CKEditor 5 - dans Drupal 10.

Maintenant que nous avons les bases, passons aux améliorations !

Extension de CKEditor avec ces fantastiques modules Drupal 9

1. CKEditor Lire la suite

Vous connaissez ces moments où vous voulez donner au lecteur le choix de voir le reste d'une grande quantité de texte ? C'est votre signal pour utiliser la fonction Lire la suite de CKEditor, qui invite vos utilisateurs à « lire » tout en donnant à votre page une mise en page compacte. Pour l'ajouter, Drupal 9 fournit un moyen simple et facile d'activer la fonctionnalité Lire plus / Afficher moins une fois que vous avez installé le module contributeur.

Implémentation du module :

Une fois ce module installé, vous devrez configurer quelques paramètres :

1. Modifiez le format de texte préféré et activez « Limiter les balises HTML autorisées ».
2. Ajoutez <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> dans « Balises HTML autorisées ». Désactivez « Limiter les balises HTML autorisées » et appuyez sur Enregistrer.
3. Maintenant, faites glisser et déposez l'icône « En savoir plus » des boutons disponibles vers la barre d'outils active (comme indiqué dans l'image ci-dessus) et appuyez sur Enregistrer.
4. Après avoir vidé le cache, vous trouverez l'icône " Lire la suite " dans l'éditeur de texte lorsque vous choisissez le " Format de texte préféré ".

Comment l'utiliser:

Dans la zone de contenu, cliquez sur l'icône « Format texte ». Vous obtiendrez maintenant une boîte rectangulaire. Ajoutez le reste du contenu que vous souhaitez afficher une fois que votre utilisateur a cliqué sur Lire la suite.

FAQ : Puis-je modifier le texte Lire la suite ?

Absolument! Cliquez simplement sur l'onglet « bouton Lire la suite » dans « Paramètres du plugin CKEditor » et modifiez le texte.

2. Bouton de couleur CKEditor

Par défaut, CKEditor ne vous offre pas la possibilité de changer la couleur du texte depuis l'éditeur. Mais si vous vouliez changer la couleur d'un texte spécifique ou même mettre en évidence le texte avec différentes couleurs, le module Drupal 9 CKEditor Color Button devrait être sur votre liste. Notez que ce module nécessite également l'installation du module de boutons du panneau et que ces deux modules nécessitent l'installation des bibliothèques, bibliothèque de boutons de couleur et bibliothèque de boutons de panneau. Après avoir installé les modules et ajouté des bibliothèques dans le dossier des bibliothèques du thème, nous pouvons déplacer le bouton des couleurs des boutons disponibles vers la barre d'outils active dans le format de texte préféré.

FAQ : puis-je ajouter une couleur personnalisée ?

Oui! Si vous ne souhaitez utiliser aucune des couleurs par défaut déjà disponibles, vous pouvez également définir une couleur personnalisée. Vous pouvez le faire dans la section « Format des éditeurs de texte » à partir de laquelle vous avez activé les options de couleur. Recherchez le « Bouton de couleur CKEditor » dans la section « Paramètres des plugins CKEditor » de « Format des éditeurs de texte » et ajoutez de la couleur dans la zone de texte « Couleurs du texte » séparée par des virgules et sans signe #.

3. CKEditor Youtube

Le module Youtube de Drupal 9 CKEditor vous permet d'ajouter des vidéos Youtube dans votre contenu sans un long code d'intégration. Après avoir installé et déplacé le formulaire d'icône Youtube des boutons disponibles vers la barre d'outils active, vous pouvez trouver des icônes Youtube dans l'éditeur de texte au format de texte préféré. Ce module dépend de la bibliothèque.

L'une des meilleures choses à propos de ce module est la flexibilité. Comme le montre la capture d'écran ci-dessus, vous pouvez « Coller le code d'intégration » ou coller une URL Youtube tout en spécifiant la largeur et la hauteur. Vous disposez également d'options pratiques telles que « Lecture automatique », « Démarrer à (heure spécifique) » et « Afficher les commandes du lecteur ».

4. Modèles CKEditor et interface utilisateur des modèles CKEditor

Avez-vous beaucoup de la même structure de contenu pour les pages ou les articles de votre site Web ? Les modules d'interface utilisateur CKEditor Templates et CKEditor Templates sont votre ticket pour une duplication facile. Les deux modules dépendent des bibliothèques qui peuvent être téléchargées et installées comme indiqué dans les pages du module. Après avoir installé ces bibliothèques, vous pouvez déplacer l'icône du modèle des boutons disponibles vers la barre d'outils active, comme indiqué dans l'image ci-dessous.

Le module CKEditor Templates fournit une boîte de dialogue avec des modèles prédéfinis. Lorsque vous cliquez sur l'icône du modèle (comme indiqué dans la capture d'écran ci-dessus), vous verrez une fenêtre contextuelle s'ouvrir vous permettant de choisir l'un de vos modèles prédéfinis. Le modèle sera ensuite inséré avec le « format de texte et les styles » qui sont inclus.

Le module d' interface utilisateur des modèles CKEditor est ce que vous utilisez pour créer les modèles que vous choisissez dans le module Modèles CKEditor . Après avoir activé le module, vous trouverez une option dans la section Config > Création de contenu > Modèles CKEditor .

Lorsque vous cliquez sur CKEditor Templates depuis la configuration, vous serez redirigé vers la page des modèles de configuration CKEditor . Vous pouvez maintenant ajouter ou modifier des modèles.

5. Extrait de code CKEditor

En utilisant le module CKEditor CodeSnippet, vous pouvez ajouter votre "contenu de code" dans le contenu afin qu'il soit mis en évidence et bien formaté. Ce module utilise la bibliothèque Highlight-js et tous les styles disponibles pour celui-ci. L'installation de ce module à l'aide de composer installera automatiquement la bibliothèque. Après avoir installé ce module, vous pouvez déplacer l'icône « extrait de code » du bouton Disponible vers la barre d'outils Active.

Vous trouverez maintenant l'onglet Code Snippet dans les paramètres du plugin CKEditor au format texte. Ici, vous pouvez cocher/décocher les langages de programmation pris en charge.

FAQ : Comment l'utiliser ?

Une fois le module installé, vous pouvez insérer la fonctionnalité CodeSnippet dans votre contenu depuis CKEditor. Lorsque vous cliquez sur l'icône Extrait de code, vous obtenez une fenêtre contextuelle. Ici, vous pouvez coller votre code et sélectionner la langue du code.

6. Nombre de mots de CKEditor

Vous travaillez donc avec une limite de mots/caractères… C'est une situation courante dans les sites très stylisés avec des mises en page dynamiques. Et ceux-ci peuvent devenir particulièrement compliqués avec plusieurs mains travaillant sur le même contenu. Dans ces cas, il est utile de voir le nombre de caractères et de mots directement dans votre CKEditor dans le pied de page de l'éditeur lui-même (comme vous le feriez dans MS Word). C'est à ce moment-là que vous installerez le module CKEditor Wordcount. Après avoir installé le module et la bibliothèque, vous pouvez trouver « le nombre de mots et le nombre de caractères » dans les paramètres du plug-in CKEditor au format texte. Ici, vous pouvez cocher/décocher les fonctionnalités selon vos besoins. Vous trouverez également un compteur dans CKEditor en bas à droite de celui-ci.

7. Texte tweetable de CKEditor

Vous essayez de marquer des points Internet ? En utilisant le module Tweetable Text de CKEditor, vous pouvez donner à vos utilisateurs la possibilité de tweeter un morceau de texte particulier en cliquant sur un mot ou une syntaxe. Installez simplement le module et la bibliothèque comme indiqué sur la page du module et déplacez l'icône de texte tweetable du bouton Disponible vers la barre d'outils Active. Vous trouverez alors une icône de tweet dans l'éditeur de texte. Lorsque vous cliquez sur cette icône, une fenêtre contextuelle s'ouvrira. Ici, vous pouvez ajouter un texte d'affichage (pour quel(s) mot(s) vous souhaitez ajouter l'icône de tweet) et un texte pouvant être tweeté (le texte qui apparaîtra dans le tweet). Lorsqu'un utilisateur clique sur Afficher le texte, il sera redirigé vers Twitter et le texte tweetable sera affiché.