Editor di testo avanzato: Tiptap
Integri l'editor ProseMirror Tiptap in un modulo SvelteKit con un wrapper Svelte.
Editor di testo avanzato: Tiptap è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Tiptap
Tiptap è un editor popolare basato su ProseMirror, con un sistema di estensioni intuitivo.
Installazione
Aggiunga il core e lo starter kit.
npm install @tiptap/core @tiptap/starter-kitInizializzazione
Crei un Editor in onMount indirizzato a un div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Collegamento al DOM
Utilizzi bind:this per acquisire il riferimento all'elemento.
<div bind:this={el} class="editor" />Pulizia
Chiami editor.destroy() in onDestroy per liberare le risorse.
Binding bidirezionale
Si sottoscriva all'evento update dell'editor per sincronizzare il contenuto con uno store Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Barra degli strumenti
Costruisca una barra degli strumenti con pulsanti che chiamano editor.chain().focus().toggleBold().run() e così via.
Stati attivi reattivi
Si sottoscriva agli aggiornamenti dell'editor per evidenziare i pulsanti attivi.
Estensioni
Aggiunga immagini, menzioni, tabelle e blocchi di codice tramite le estensioni Tiptap.
Personalizzazione dello schema
Definisca uno schema personalizzato per esperienze di modifica specifiche del dominio.
Wrapper SvelteKit
Racchiuda l'editor in un componente con una prop content e aggiornamenti inviati tramite dispatch.
Dispositivi mobili
Esegua i test su dispositivi touch; ProseMirror gestisce bene la selezione su diverse piattaforme.
Verifica rapida
A cosa serve editor.destroy()?
Riepilogo
Racchiuda Tiptap in un componente con bind:this e hook del ciclo di vita. Costruisca le barre degli strumenti tramite i comandi dell'editor.
Domande Frequenti
La lezione «Editor di testo avanzato: Tiptap» è gratuita?
Sì — il testo completo di «Editor di testo avanzato: Tiptap» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Editor di testo avanzato: Tiptap»?
Integri l'editor ProseMirror Tiptap in un modulo SvelteKit con un wrapper Svelte. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Editor di testo avanzato: Tiptap»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Uso di Tailwind CSS con SvelteKit
- Grafici D3.js in Svelte
- Mappe Leaflet con le actions Svelte
- Editor di testo avanzato: Tiptap