Exprimez vos idées sans limites

Une librairie React personnalisable et facile à utiliser : éditeur de texte riche WYSIWYG, avec Material UI et Tiptap.

Tiavina Michael RALAINIRINA

Description du projet

J'ai créé un éditeur de texte riche WYSIWYG moderne et intuitif, conçu pour offrir une expérience d'édition fluide et personnalisable. Cet éditeur a été initialement développé pour mon portfolio. En rédigeant ce texte avec, j'ai réalisé son potentiel, et c'est pourquoi j'ai décidé de le rendre open source, afin que d'autres puissent en bénéficier et l'adapter à leurs propres projets.

L'éditeur est construit sous la forme d'une bibliothèque React écrite en Typescript, ce qui assure une typage stricte et une meilleure maintenabilité du code. En utilisant Material UI, l'un des frameworks d'interface utilisateur les plus populaires pour React, l'éditeur bénéficie de composants élégants et accessibles.

Pour la gestion de la logique d'édition du texte, l'éditeur s'appuie sur Tiptap, une puissante extension basée sur ProseMirror, offrant une interface de manipulation du contenu riche et flexible. Tiptap permet d’ajouter facilement des fonctionnalités comme la gestion des mentions, le téléchargement d’images, et bien plus, tout en restant léger et rapide.

Fonctionnalités principales :

1. Mention d'utilisateur : Intégrez facilement un système de mentions (comme @utilisateur), parfait pour les applications collaboratives ou sociales.

2. Téléchargement d'images avec légendes et texte alternatif : Les utilisateurs peuvent télécharger des images, ajouter des légendes personnalisées et définir des textes alternatifs pour améliorer l'accessibilité.

3. Sauvegarde en chaîne HTML : Le contenu peut être exporté en tant que chaîne HTML propre, facilitant son utilisation dans d'autres parties de votre application ou pour le stockage.

4. Internationalisation (i18n) : Compatible avec des bibliothèques d'internationalisation comme i18n ou next-intl, l’éditeur permet de gérer plusieurs langues facilement.

5. Personnalisation des styles : Vous pouvez personnaliser les styles en utilisant du CSS natif, vanilla-extract ou TailwindCSS, selon vos préférences ou besoins de design.

6. Intégration avec Formik et React Hook Form : Idéal pour les formulaires complexes, l'éditeur peut être utilisé avec des bibliothèques de gestion de formulaires comme Formik ou React Hook Form.

7. Validation des données : Pour garantir l'intégrité des données, l’éditeur peut être associé à des bibliothèques de validation comme Joi, Zod ou Yup.

En rendant cet éditeur open source, je souhaite encourager d'autres développeurs à l'utiliser, à contribuer à son amélioration, et à l'adapter à leurs propres besoins.

Capture d'écran

Exprimez vos idées sans limites

Video

Exprimez vos idées sans limites
Société

Open Source

Platforms

Web

1

Partages

iconiconiconiconiconiconicon

S'abonner à ma newsletter

Abonnez-vous à ma newsletter pour pouvoir suivre et récevoir des offres spéciales et les articles / tutos que je publie occasionnellement sur mon blog

* Vous pouvez se désabonner à tout moment en cliquant sur le lien de désabonnement contenu dans chacun de nos mails.