Édition de texte open source pour votre site Web avec CKEditor

La plupart des applications permettent aux utilisateurs de créer et d’ajouter du contenu textuel, tel qu’un commentaire, un message de chat, un article, une description de produit ou un document juridique. Aujourd’hui, le texte brut ne suffit plus. Les utilisateurs formatent du texte, insèrent des images et des mèmes, des vidéos, des tableaux et créent des listes et des liens. Un développeur peut probablement créer ce contenu riche en HTML à la main, mais il y a de fortes chances que vos utilisateurs apprécient de l’aide.

L’édition WYSIWYG (“What You See Is What You Get”) vous permet de voir et d’éditer le contenu de texte enrichi sous une forme qui ressemble à la façon dont il est affiché aux utilisateurs finaux. Un éditeur WYSIWYG fournit une interface utilisateur qui facilite la mise en forme du texte et l’incorporation de divers éléments tels que des images, des liens ou des tableaux dans votre contenu numérique.

Si vous souhaitez fournir ce type de fonctionnalité dans votre application, vous pouvez choisir de :

1. Construisez-le vous-même
2. Trouvez un composant d’éditeur WYSIWYG que vous pouvez réutiliser

Chaque option a des avantages et des inconvénients.

Construisez-le vous-même…

Si votre cas d’utilisation est simple et que vous n’avez pas besoin de nombreuses fonctionnalités, la création de votre propre composant peut sembler être une voie à suivre. L’édition WYSIWYG semble facile.

Ce n’est pas.

Même lorsque vous commencez simplement, les exigences ont tendance à augmenter avec le temps. La création de contenu est un paradigme si largement accepté que les utilisateurs s’attendent désormais à ce qu’il fonctionne dans votre application de la même manière que partout ailleurs. Ils veulent voir un ensemble de fonctionnalités et des modèles UX familiers. Créer et maintenir cela prend du temps et des efforts qui pourraient autrement être consacrés au développement de votre application.

Il y a une raison valable pour laquelle la fonctionnalité d’édition de contenu est souvent sous-traitée à une bibliothèque externe, même dans les grands projets avec des équipes d’ingénierie considérables. Cela nécessite une connaissance approfondie du domaine pour bien le faire.

Supposons que vous décidiez d’intégrer un composant ou un framework d’édition prêt à l’emploi. Il existe de nombreuses solutions d’édition de texte enrichi sur le marché. Les différences entre eux tournent généralement autour de l’ensemble de fonctionnalités, de l’expérience utilisateur, des intégrations avec diverses technologies, de l’extensibilité, des licences, de la popularité, de la santé du projet et des options de support. Ainsi, comme pour toute bibliothèque externe, lorsque vous choisissez un éditeur, il est préférable de prendre en compte votre cas d’utilisation afin d’éviter une erreur coûteuse et une nouvelle migration à l’avenir.

Bien sûr, vous devez faire face à certains défis lors de l’intégration d’un composant d’édition WYSIWYG, mais ils sont faciles à résoudre lorsque vous utilisez l’open source populaire CKEditor 5.

Ou choisissez CKEditor

CKEditor existe depuis 20 ans (!) en tant que projet open source. Il est soutenu par CKSource, une entreprise d’environ 100 personnes qui travaillent, jour après jour, à l’amélioration de l’éditeur. La dernière version, CKEditor 5, est un composant moderne, flexible, extensible et personnalisable écrit en pur TypeScript et JavaScript. Il repose sur un cadre d’édition robuste prêt pour la collaboration avec une architecture modèle-vue-contrôleur (MVC), un modèle de données personnalisé et un DOM virtuel.

Exécuter un éditeur simple en 3 étapes avec CKEditor 5

Voici les bases de l’intégration de CKEditor avec un site Web simple.

Pour être opérationnel, chargez le script de l’éditeur à partir du CDN et appelez son create() méthode pour créer l’éditeur :

1. Dans une page HTML, ajoutez un élément pour servir d’espace réservé pour une instance de CKEditor 5 :

   <div id="editor"></div>

2. Chargez le script de construction de l’éditeur (ici, un soi-disant éditeur classique build est chargé depuis le CDN) :

   <script
     src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js">
   </script>

3. Appeler le ClassicEditor.create() méthode pour afficher l’éditeur.

   <script>
       ClassicEditor
           .create( document.querySelector( '#editor' ) )
           .catch( error => {
               console.error( error );
           } );
   </script>
   

Et c’est tout. Une page Web complète avec un CKEditor 5 intégré :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script 
      src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js">
    </script>
</head>
<body>
    <h1>CKEditor 5 - cool, eh?</h1>
    <div id="editor">
        <p>This is some sample content for my new WYSIWYG editor.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Ouvrez-le dans votre navigateur pour tester l’éditeur WYSIWYG :

Image par :

(Anna Tomanek, CC BY-SA 4.0)

Édition WYSIWYG avancée

Oui, il n’y a que trois étapes, et ça marche. Mais cet exemple simple révèle également certains défis typiques auxquels est confronté un intégrateur d’un framework externe.

• C’est juste un simple site Web HTML qui manque tout le contexte de votre application.
• L’interface utilisateur ne correspond pas à votre système de conception.
• Votre application est écrite en React/Angular/Vue, ou autre chose.
• Vous ne voulez pas servir de scripts CDN et préférez vous auto-héberger.
• L’ensemble de fonctionnalités de l’éditeur n’est pas ce dont vous avez besoin.
• De plus, certains de vos utilisateurs préfèrent Markdown à la « magie » HTML ou WYSIWYG.

Alors, comment résolvez-vous certains de ces problèmes ? La plupart des composants de l’éditeur permettent un certain degré de personnalisation qui est toujours moins cher que l’écriture d’un script personnalisé pour gérer correctement la création de contenu utilisateur.

CKEditor 5 utilise une architecture basée sur des plugins, qui offre une excellente personnalisation et extensibilité. En faisant quelques efforts, vous pouvez bénéficier d’une solution stable, populaire et fiable configurée pour ressembler et fonctionner exactement comme vous le souhaitez. Drupal 10, par exemple, a intégré CKEditor 5 dans son cœur et l’a enrichi de certaines fonctionnalités CMS typiques comme une bibliothèque multimédia via des plugins personnalisés.

De quelles manières pouvez-vous tirer parti de toutes ces options de personnalisation ? En voici cinq qui mettent en valeur sa polyvalence :

1. Options d’interface utilisateur flexibles

La première chose à remarquer lorsque vous examinez un composant à intégrer à votre application est son interface utilisateur. Le framework CKEditor 5 offre une quelques types d’interface utilisateur différents. Par exemple:

• L’éditeur classique, utilisé dans le premier exemple, propose une barre d’outils avec une zone d’édition placée à un endroit précis de la page. La barre d’outils reste visible lorsque vous faites défiler la page et l’éditeur grandit automatiquement avec le contenu.
• L’éditeur de documents offre une expérience d’édition similaire à des applications telles que Microsoft Word ou Google Docs, avec une interface utilisateur qui ressemble à un document papier.
• Si vous recherchez une édition sans distraction, où le contenu est placé à son emplacement cible sur la page Web sans que l’interface utilisateur de l’éditeur ne vous gêne, vous avez quelques options. L’éditeur en ligne, l’éditeur de bulles et l’éditeur de blocs de bulles sont tous livrés avec différents types de barres d’outils flottantes qui apparaissent selon les besoins.

En plus de cela, vous pouvez jouer avec la barre d’outils pour déplacer les boutons, les regrouper dans des listes déroulantes, utiliser une barre d’outils multiligne ou masquer certains boutons moins fréquemment utilisés dans le menu “trois points” ou “plus d’options”. Ou, si vous le souhaitez, déplacez toute la barre d’outils vers le bas.

Il peut également arriver que vous préfériez emprunter la voie sans tête. De nombreux projets utilisent le puissant moteur d’édition de CKEditor 5 mais associé à leur propre interface utilisateur créée, par exemple, dans React. L’exemple le plus notable est Microsoft Teams, croyez-le ou non. Oui, il utilise CKEditor 5.

Image par :

(Anna Tomanek, CC BY-SA 4.0)

2. Choisissez un éditeur complet ou léger

Dans l’édition de contenu numérique, il n’y a pas de solution “taille unique”. Selon le type de contenu dont vous avez besoin, l’ensemble de fonctionnalités diffère. CKEditor 5 a une architecture basée sur des plugins et les fonctionnalités sont implémentées de manière hautement découplée et granulaire.

Il est facile de se perdre dans toutes les fonctionnalités, sous-fonctionnalités et options de configuration possibles sans quelques conseils. Voici quelques ressources utiles pour vous aider à créer l’éditeur qui correspond parfaitement à votre cas d’utilisation :

• Essaie le démo de l’éditeur riche en fonctionnalités pour tester certaines des fonctionnalités les plus populaires.
• Regardez d’autres configurations d’éditeur sur la page démo. Vous pouvez trouver le code source complet de chaque démo dans le référentiel ckeditor5-demos.
• L’ensemble Caractéristiques partie de la Documentation explique toutes les fonctionnalités de CKEditor 5, les options de configuration possibles, les boutons de la barre d’outils et l’API.
• Constructeur en ligne CKEditor 5 est une solution simple et rapide pour créer votre éditeur personnalisé en 5 étapes. Il vous permet de choisir le type d’interface utilisateur, les plugins, la configuration de la barre d’outils et la langue de l’interface utilisateur, puis de télécharger un ensemble d’éditeurs prêt à l’emploi.

Image par :

(Anna Tomanek, CC BY-SA 4.0)

3. Intégrations avec les frameworks JavaScript

Le constructeur en ligne et les démos sont un terrain de jeu amusant si vous souhaitez tester quelques solutions sans code, mais vous aurez peut-être besoin d’une intégration plus étroite. Vous pouvez également installer CKEditor 5 avec npm, ou le regrouper avec votre application en utilisant webpack ou Vite. CKEditor 5 est écrit en pur TypeScript et JavaScript, il est donc compatible avec tous les frameworks JavaScript disponibles.

Quatre intégrations officielles sont disponibles pour les frameworks les plus populaires :

• Angulaire
• Réagir
• Vue.js v2
• Vue.js v3

Par exemple, pour configurer l’éditeur classique (utilisé dans mon premier exemple) dans React, vous pouvez utiliser ce one-liner :

npx create-react-app ckeditor5-classic-demo \
--template @ckeditor/ckeditor5-classic

4. Markdown et HTML

Pour certains développeurs, Markdown peut sembler une seconde nature. Il a cependant ses limites. Par exemple, la prise en charge des tables est assez basique. Pourtant, pour de nombreux utilisateurs, créer du contenu dans Markdown est beaucoup plus efficace que d’utiliser l’interface utilisateur de l’éditeur pour le formater.

Et voici la partie amusante. Grâce à la mise en forme automatique de CKEditor, vous pouvez utiliser la syntaxe Markdown lors de l’écriture, et l’éditeur formate le contenu au fur et à mesure que vous tapez. Il s’agit d’un bon compromis pour couvrir les besoins des utilisateurs expérimentés et des utilisateurs non familiarisés avec Markdown et préférant créer du texte enrichi à l’aide de l’interface utilisateur WYSIWYG.

5. Entrée et sortie différentes

La mise en forme automatique n’est qu’un aspect de la prise en charge de Markdown dans CKEditor 5. Un autre est que vous pouvez configurer l’éditeur pour qu’il traite Markdown comme son format d’entrée et de sortie au lieu de HTML.

Image par :

(Anna Tomanek, CC BY-SA 4.0)

Voici un autre défi. Si vous autorisez les utilisateurs à saisir du contenu dans votre application, ils peuvent le créer mais aussi le coller à partir de différentes sources (autres sites Web, Microsoft Word, Google Docs). Ils s’attendent naturellement à ce que la structure et la mise en forme du texte collé soient préservées. Cela peut entraîner des styles désagréables et des éléments indésirables qui se retrouvent dans votre contenu, et vous devez nettoyer. Au lieu d’essayer de concilier ces deux conflits d’intérêts potentiels par vous-même, il vaut mieux s’appuyer sur un bon éditeur qui résoudra ce problème pour vous.

Dans le cas de CKEditor 5, le Coller depuis Office offre une excellente prise en charge pour coller du contenu à partir de Word ou de Google Docs, en préservant la structure et en traduisant la mise en forme en contenu sémantique.

Les paramètres par défaut de CKEditor 5 empêchent également les utilisateurs d’ajouter ou de coller des éléments et des styles non pris en charge par l’ensemble de fonctionnalités choisi pour votre éditeur. Si vous, en tant qu’intégrateur, configurez l’éditeur pour prendre en charge uniquement les liens, les listes et les styles de base tels que le gras ou l’italique, l’utilisateur ne peut pas ajouter de tableaux, d’images ou de vidéos YouTube.

Là encore, si vous souhaitez que votre éditeur accepte du contenu qui n’est pas couvert par votre ensemble de fonctionnalités ou même qui n’est pas pris en charge par les fonctionnalités existantes de CKEditor 5, vous pouvez y parvenir grâce au soi-disant Prise en charge HTML générale Fonctionnalité. Ceci est utile pour charger du contenu préexistant créé dans d’autres outils et peut faciliter votre migration vers CKEditor 5.

Construire des plugins personnalisés

Quelle que soit la qualité d’une solution prête à l’emploi, vous devrez peut-être encore la personnaliser davantage. Après tout, grâce à la réutilisation d’un composant d’édition WYSIWYG avancé, vous vous êtes épargné beaucoup de temps et d’efforts de codage. Vous voudrez peut-être vous salir les mains et peaufiner un peu votre solution, par exemple en créant des plugins personnalisés.

Voici quelques ressources utiles pour vous aider à démarrer :

Image par :

(Anna Tomanek, CC BY-SA 4.0)

Comment obtenir CKEditor

CKEditor 5 est sous licence selon les termes de la GPL 2 ou ultérieure, mais si vous exécutez un projet open source sous une licence approuvée par l’OSI incompatible avec la GPL, l’équipe de CKEditor est heureux de vous soutenir avec une licence gratuite.

CKEditor 5 est un puissant cadre d’éditeur de texte enrichi moderne qui permet aux développeurs de s’appuyer sur un éditeur open source, testé et fiable. Les start-ups, les grandes marques et les fournisseurs de logiciels l’utilisent pour améliorer à la fois leurs workflows de création et de production de contenu. Si vos utilisateurs apprécient ces avantages, Vérifiez-le!