Edytory tekstu sformatowanego: Tiptap
Zintegruj edytor Tiptap ProseMirror z formularzem SvelteKit za pomocą wrappera Svelte.
Edytory tekstu sformatowanego: Tiptap to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Tiptap
Tiptap to popularny edytor oparty na ProseMirror, wyposażony w przyjazny system rozszerzeń.
Instalacja
Należy dodać pakiet core i starter kit.
npm install @tiptap/core @tiptap/starter-kitInicjalizacja
W onMount należy utworzyć Editor wskazujący element div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Wiązanie z DOM-em
Do pobrania referencji do elementu należy użyć bind:this.
<div bind:this={el} class="editor" />Czyszczenie
W onDestroy należy wywołać editor.destroy(), aby zwolnić zasoby.
Wiązanie dwukierunkowe
Należy zasubskrybować zdarzenie update edytora, aby synchronizować treść ze store'em Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Pasek narzędzi
Pasek narzędzi należy zbudować z przycisków wywołujących editor.chain().focus().toggleBold().run() itd.
Reaktywne stany aktywne
Należy subskrybować aktualizacje edytora, aby wyróżniać aktywne przyciski.
Rozszerzenia
Za pomocą rozszerzeń Tiptap można dodać obrazy, wzmianki, tabele i bloki kodu.
Dostosowywanie schematu
Należy zdefiniować własny schemat dla edycji właściwej dla danej domeny.
Wrapper SvelteKit
Edytor należy opakować w komponent z właściwością content i wysyłanymi aktualizacjami.
Urządzenia mobilne
Należy testować na urządzeniach dotykowych; ProseMirror dobrze obsługuje zaznaczanie na różnych platformach.
Szybkie sprawdzenie
Co robi editor.destroy()?
Podsumowanie
Tiptap należy opakować w komponent z bind:this i hookami cyklu życia. Paski narzędzi należy budować za pomocą poleceń edytora.
Często zadawane pytania
Czy lekcja „Edytory tekstu sformatowanego: Tiptap” jest bezpłatna?
Tak — pełny tekst „Edytory tekstu sformatowanego: Tiptap” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Edytory tekstu sformatowanego: Tiptap”?
Zintegruj edytor Tiptap ProseMirror z formularzem SvelteKit za pomocą wrappera Svelte. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Edytory tekstu sformatowanego: Tiptap”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Używanie Tailwind CSS z SvelteKit
- Wykresy D3.js w Svelte
- Mapy Leaflet z akcjami Svelte
- Edytory tekstu sformatowanego: Tiptap