Editor Teks Kaya: Tiptap
Integrasikan editor Tiptap ProseMirror ke dalam formulir SvelteKit dengan pembungkus Svelte.
Editor Teks Kaya: Tiptap adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Tiptap
Tiptap adalah editor populer berbasis ProseMirror dengan sistem ekstensi yang mudah digunakan.
Pasang
Tambahkan inti dan StarterKit.
npm install @tiptap/core @tiptap/starter-kitInisialisasi
Buat Editor di onMount dengan sasaran berupa div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Ikat ke DOM
Gunakan bind:this untuk mengambil referensi elemen.
<div bind:this={el} class="editor" />Pembersihan
Panggil editor.destroy() di onDestroy untuk membebaskan sumber daya.
Pengikatan Dua Arah
Berlangganan ke peristiwa pembaruan editor untuk menyinkronkan konten ke penyimpanan Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Bilah Alat
Bangun bilah alat dengan tombol yang memanggil editor.chain().focus().toggleBold().run() dan sebagainya.
State Aktif Reaktif
Berlangganan pembaruan editor untuk menyoroti tombol yang aktif.
Ekstensi
Tambahkan gambar, sebutan, tabel, dan blok kode melalui ekstensi Tiptap.
Penyesuaian Skema
Definisikan skema Anda sendiri untuk pengalaman penyuntingan khusus domain.
Pembungkus SvelteKit
Bungkus editor dalam komponen dengan prop konten dan pembaruan yang dikirim.
Seluler
Uji pada perangkat sentuh; ProseMirror menangani pemilihan dengan baik di berbagai platform.
Pemeriksaan Singkat
Apa fungsi editor.destroy()?
Ringkasan
Bungkus Tiptap dalam komponen dengan bind:this dan kait siklus hidup. Bangun bilah alat melalui perintah editor.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Editor Teks Kaya: Tiptap” gratis?
Ya — teks lengkap “Editor Teks Kaya: Tiptap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Editor Teks Kaya: Tiptap”?
Integrasikan editor Tiptap ProseMirror ke dalam formulir SvelteKit dengan pembungkus Svelte. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Editor Teks Kaya: Tiptap” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menggunakan Tailwind CSS dengan SvelteKit
- Grafik D3.js dalam Svelte
- Peta Leaflet dengan Tindakan Svelte
- Editor Teks Kaya: Tiptap