Éditeurs de texte enrichi : Tiptap
Intégrez l’éditeur Tiptap ProseMirror dans un formulaire SvelteKit avec un adaptateur Svelte.
Éditeurs de texte enrichi : Tiptap est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Tiptap
Tiptap est un éditeur populaire fondé sur ProseMirror, doté d’un système d’extensions convivial.
Installation
Ajoutez le noyau et le kit de démarrage.
npm install @tiptap/core @tiptap/starter-kitInitialisation
Créez un éditeur dans onMount en le ciblant sur un élément div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Lier au DOM
Utilisez bind:this pour récupérer la référence de l’élément.
<div bind:this={el} class="editor" />Nettoyage
Appelez editor.destroy() dans onDestroy pour libérer les ressources.
Liaison bidirectionnelle
Abonnez-vous à l’événement de mise à jour de l’éditeur pour synchroniser le contenu avec un magasin Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Barre d’outils
Créez une barre d’outils avec des boutons qui appellent editor.chain().focus().toggleBold().run(), etc.
États actifs réactifs
Abonnez-vous aux mises à jour de l’éditeur pour mettre en évidence les boutons actifs.
Extensions
Ajoutez des images, des mentions, des tableaux et des blocs de code grâce aux extensions Tiptap.
Personnalisation du schéma
Définissez votre propre schéma pour des expériences d’édition propres à votre domaine.
Encapsulation SvelteKit
Encapsulez l’éditeur dans un composant avec une propriété de contenu et des mises à jour distribuées.
Mobile
Testez sur des appareils tactiles ; ProseMirror gère bien la sélection sur toutes les plateformes.
Vérification rapide
Que fait editor.destroy() ?
Récapitulatif
Encapsulez Tiptap dans un composant avec bind:this et des hooks du cycle de vie. Créez des barres d’outils au moyen des commandes de l’éditeur.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Éditeurs de texte enrichi : Tiptap » est-elle gratuite ?
Oui — le texte complet de « Éditeurs de texte enrichi : Tiptap » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Éditeurs de texte enrichi : Tiptap » ?
Intégrez l’éditeur Tiptap ProseMirror dans un formulaire SvelteKit avec un adaptateur Svelte. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Éditeurs de texte enrichi : Tiptap » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Utiliser Tailwind CSS avec SvelteKit
- Graphiques D3.js dans Svelte
- Cartes Leaflet avec les actions Svelte
- Éditeurs de texte enrichi : Tiptap