Rapport sur le budget communautaire : une expérience d'éditeur de texte enrichi (RTE) moderne avec TipTap
Auteurs : Florian Langer
Traduit par : Célia - W-Seils
Dans ce rapport, Florian Langer partage l'histoire derrière son idée de budget communautaire et présente les premiers résultats de la nouvelle intégration de l'éditeur de texte enrichi TipTap.
Après l'approbation de mon idée de budget communautaire pour le troisième trimestre 2025 il y a trois mois, je suis ravi de partager le premier résultat de notre travail : un prototype et une version bêta d'une nouvelle alternative performante à CkEditor 5 dans TYPO3. Cette intégration, basée sur le framework moderne d'éditeur de texte en temps réel TipTap , est une initiative des développeurs d' in2code , pilotée par Felix Ranesberger , Bastien Lutz , Andreas Nedbal et moi-même. Elle a été créée pour répondre aux retours de la communauté et améliorer l'un des aspects les plus fondamentaux de la gestion de contenu : l'expérience éditoriale elle-même.
Contexte et problème que nous résolvons
En août 2023, j'ai publié sur mon site web personnel un article intitulé TYPO3 v12 et le dilemme de CkEditor 5. J'y décrivais les défis majeurs posés par la transition vers CkEditor 5. Les retours ont été nombreux et il est apparu clairement que de nombreux développeurs partageaient cette inquiétude. C'est alors que j'ai décidé de ne pas me contenter de critiquer TYPO3 Core pour cette décision, mais de contribuer à la solution. C'est cette motivation qui m'a poussé à lancer cette idée de budget communautaire.
Je suis convaincu qu'un RTE intuitif et de haute qualité est essentiel à tout CMS moderne. Notre objectif est de fournir à TYPO3 une alternative puissante, moderne et plus facile à gérer. En développant une extension RTE TipTap, nous souhaitons simplifier le développement, améliorer l'expérience utilisateur et proposer une solution plus durable pour ce composant CMS essentiel.
Présentation de l'extension TipTap
Cette nouvelle extension offre une intégration TipTap RTE pour TYPO3. Les développeurs trouveront la transition familière. Comme l'intégration actuelle de CkEditor, TipTap se configure à l'aide de fichiers YAML simples. Vous pouvez placer votre configuration personnalisée dans le package de votre site, dans Configuration/RTE/Full.yaml .
Le projet est actuellement au stade de prototype. Nous disposons d'une base solide et nous sommes maintenant à un stade où les retours de la communauté sont essentiels pour guider son développement futur.
Principales caractéristiques et limitations actuelles
La version bêta actuelle prend déjà en charge une gamme de fonctionnalités essentielles :
- Titres : choisissez parmi différents niveaux de titre.
- Citations en bloc : mettez en valeur le texte avec des citations en bloc.
- Styles de texte standard : toutes les bases sont couvertes, y compris le gras, l'italique, le soulignement et le barré.
- Listes : créez des listes à puces et numérotées.
- Alignement du texte : alignez facilement votre texte à gauche, à droite, au centre ou justifié.
- Classes CSS personnalisées : comme avec CkEditor, vous pouvez appliquer des classes CSS prédéfinies à votre contenu.
- TYPO3 Link-Wizard : intégration complète avec l'assistant de lien familier TYPO3 pour créer des liens internes et externes.
- Affichage du code source : la vue source est disponible pour modifier directement le code HTML.
- Annuler/Rétablir : la fonctionnalité standard d'annulation et de rétablissement est disponible.
- Menu à bulles : un menu contextuel apparaît lorsque vous sélectionnez du texte, offrant un accès rapide aux options de formatage.
- Glisser-déposer des blocs de texte : une fonctionnalité unique à cette nouvelle intégration : vous pouvez désormais marquer et déplacer des blocs de texte entiers par un simple glisser-déposer, ce qui n'est pas possible dans CkEditor.
Il est également important de noter ce qui ne fait pas partie du prototype :
- Tables : la prise en charge des tables n'est pas encore implémentée, mais ce serait une bonne prochaine étape.
- Caractères spéciaux : un sélecteur de caractères spéciaux n'est pas encore inclus.
- Téléchargement d'images : Le téléchargement direct d'images n'est pas possible. Nous ne considérons pas cela comme une priorité absolue, car nous recommandons d'utiliser l'élément de contenu standard « Text-Media » de TYPO3 à cette fin.
Note complémentaire sur les plugins personnalisés
Bien qu'il soit déjà possible d'intégrer des plugins personnalisés, nous souhaitons améliorer ce processus. Notre objectif est de permettre aux développeurs d'intégrer facilement des plugins personnalisés plus volumineux et plus complexes à l'avenir.
Détails techniques
Nous avons choisi Vue.js pour l'intégration technique de TipTap. TipTap étant un RTE headless , il nous offre une liberté totale pour l'implémentation front-end. L'utilisation de Vue.js nous a permis d'exploiter plus facilement les puissantes fonctionnalités natives de TipTap tout en créant une interface utilisateur personnalisée de A à Z. Le style a été soigneusement conçu pour garantir l'intégration de l'éditeur au back-end TYPO3. Notre objectif était de le rendre natif du système et non pas un « objet étranger » comme CkEditor peut parfois le paraître.
Un grand merci à l'équipe de développement
Je tiens à remercier les développeurs qui ont mis leur expertise et leur travail acharné à contribution pour donner vie à ce prototype. Cette initiative n'aurait pas été possible sans le dévouement de :
- Félix Ranesberger (Frontend)
- Bastien Lutz (Backend)
- Andreas Nedbal (contributeur principal et backend)
Leur engagement et leur compétence ont été déterminants pour atteindre cette étape !
Comment s'impliquer
Nous vous encourageons à tester l'extension et à partager vos impressions. Pour l'installation, veuillez suivre le fichier README et le guide d'installation disponibles sur le dépôt GitHub typo3-tiptap . Après avoir suivi ce guide, l'éditeur de texte en temps réel CkEditor par défaut sera remplacé par l'éditeur TipTap dans votre backend TYPO3.
Vos commentaires sont précieux pour façonner l'avenir de cette extension. N'hésitez pas à signaler tout problème ou à en discuter sur notre page GitHub dédiée .
Perspectives d'avenir
En proposant une alternative moderne à l'édition de texte enrichi, nous nous alignons sur notre objectif stratégique d'améliorer l'expérience utilisateur pour TYPO3 v14 et les versions ultérieures. Travaillons ensemble pour créer une expérience d'édition plus performante et plus flexible pour toute la communauté TYPO3 !
Nous souhaitons poursuivre le développement de cette extension et l'aide de la communauté est grandement appréciée. Notre objectif est de créer une extension qui s'intègre naturellement à TYPO3 et qui, espérons-le, pourra un jour être intégrée au noyau. Nous sommes en contact avec l'équipe Core pour nous aider à y parvenir. En attendant, elle restera une extension tierce.