Recherche de site Web

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

Utilisez la puissance de JavaScript et de CKEditor pour apporter une édition de texte enrichi à votre site Web.

La plupart des applications permettent aux utilisateurs de créer et d'ajouter du contenu textuel, tel qu'un commentaire, un message de discussion, un article, une description de produit ou un document juridique. Aujourd’hui, le texte brut ne suffit plus. Les utilisateurs formatent le 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écieront de l'aide.

L'édition WYSIWYG (« Ce que vous voyez est ce que vous obtenez ») vous permet de voir et de modifier du 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 le formatage 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 présente 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 beaucoup de fonctionnalités, créer votre propre composant peut sembler une voie à suivre. L'édition WYSIWYG semble facile.

Ce n'est pas.

Même lorsque vous démarrez simplement, les exigences ont tendance à croître avec le temps. La création de contenu est un paradigme tellement largement accepté que les utilisateurs s'attendent désormais à ce qu'elle 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 demande du temps et des efforts qui pourraient autrement être consacrés au développement de votre application.

Il existe une raison valable pour laquelle la fonctionnalité d'édition de contenu est souvent externalisée vers une bibliothèque externe, même dans les grands projets impliquant 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 riches sur le marché. Les différences entre eux tournent généralement autour de l'ensemble des fonctionnalités, de l'UX, 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 migration supplémentaire à l'avenir.

Bien sûr, vous êtes confronté à certains défis lors de l'intégration d'un composant d'édition WYSIWYG, mais ils sont faciles à résoudre lorsque vous utilisez le populaire open source 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 TypeScript et JavaScript purs. Il repose sur un cadre d'édition robuste et 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 sa méthode create() 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 build de l'éditeur (ici, un build dit éditeur classique est chargé depuis le CDN) :

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

  3. Appelez la méthode ClassicEditor.create() 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 :

(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.

  • Il s'agit simplement d'un simple site Web HTML qui ne contient pas 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 souhaitez pas diffuser de scripts CDN et préférez vous auto-héberger.
  • L'ensemble des fonctionnalités de l'éditeur n'est pas ce dont vous avez besoin.
  • De plus, certains de vos utilisateurs préfèrent Markdown au HTML ou à la « magie » WYSIWYG.

Alors, comment résoudre certains de ces problèmes ? La plupart des composants de l'éditeur permettent un certain degré de personnalisation qui reste moins coûteux 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 déployant 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 noyau 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 profiter 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 propose différents types d'interface utilisateur. Par exemple:

  • Classic Editor, utilisé dans le premier exemple, propose une barre d'outils avec une zone d'édition placée à un emplacement spécifique sur la page. La barre d'outils reste visible lorsque vous faites défiler la page vers le bas 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 disposez de 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 se peut également que vous préfériez emprunter la voie sans tête. De nombreux projets utilisent le puissant moteur d'édition de CKEditor 5 mais couplé à 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.

(Anna Tomanek, CC BY-SA 4.0)

2. Choisissez un éditeur complet ou un éditeur léger

En matière d'édition de contenu numérique, il n'existe pas de solution universelle. Selon le type de contenu dont vous avez besoin, l'ensemble des 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 parfaitement adapté à votre cas d’utilisation :

  • Essayez la démo de l'éditeur riche en fonctionnalités pour tester certaines des fonctionnalités les plus populaires.
  • Regardez quelques autres configurations d'éditeur sur la page de démonstration. Vous pouvez trouver le code source complet de chaque démo dans le référentiel ckeditor5-demos.
  • L'intégralité de la section Fonctionnalités 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.
  • Le 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.

(Anna Tomanek, CC BY-SA 4.0)

3. Intégrations avec les frameworks JavaScript

Le constructeur en ligne et les démos constituent 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 à l'aide de webpack ou de Vite. CKEditor 5 est écrit en TypeScript et JavaScript purs, 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. Cela 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 au formatage 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. C'est un bon compromis pour couvrir les besoins des utilisateurs expérimentés et des utilisateurs peu familiers avec Markdown et préférant pour créer du texte enrichi à l'aide de l'interface utilisateur WYSIWYG.

5. Différentes entrées et sorties

Le formatage 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 format d'entrée et de sortie au lieu de HTML.

(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 y créer mais également 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 l'apparition de styles désagréables et d'éléments indésirables dans votre contenu, et vous devez nettoyer. Au lieu d'essayer de concilier ces deux potentiels conflits d'intérêts par vous-même, mieux vaut vous fier à un bon éditeur qui résout ce problème à votre place.

Dans le cas de CKEditor 5, la fonctionnalité Coller depuis Office offre une excellente prise en charge pour coller du contenu depuis Word ou Google Docs, en préservant la structure et en traduisant le formatage 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, en tant qu'intégrateur, vous configurez l'éditeur pour qu'il prenne uniquement en charge 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 à ce que l'on appelle la Support HTML général. Fonctionnalité. Ceci est utile pour charger du contenu préexistant créé dans d'autres outils et peut faciliter votre migration vers CKEditor 5.

Créer des plugins personnalisés

Quelle que soit la qualité d’une solution prête à l’emploi, vous devrez peut-être la personnaliser encore davantage. Après tout, grâce à la réutilisation d'un composant d'édition WYSIWYG avancé, vous avez économisé beaucoup de temps et d'efforts de codage. Vous souhaiterez 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 :

  • Créer vos propres plugins : Documentation pour les développeurs.
  • Générateur de packages : un outil pratique qui vous aide à configurer votre environnement de développement de plugins.
  • Inspecteur CKEditor 5 : outils de débogage pour les éléments internes de l'éditeur tels que le modèle, la vue et les commandes.

(Anna Tomanek, CC BY-SA 4.0)

Comment obtenir CKEditor

CKEditor 5 est sous licence GPL 2 ou version ultérieure, mais si vous exécutez un projet open source sous une licence approuvée par OSI incompatible avec la GPL, l'équipe CKEditor se fera un plaisir de vous aider avec une licence gratuite.

CKEditor 5 est un puissant framework d'édition de texte riche et 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 flux de création et de production de contenu. Si vos utilisateurs apprécient ces avantages, jetez-y un œil !

Articles connexes: