Penyunting Teks Kaya: Tiptap
Sepadukan penyunting Tiptap ProseMirror ke dalam borang SvelteKit dengan pembalut Svelte.
Penyunting Teks Kaya: Tiptap ialah pelajaran Sveltejs Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sveltejs Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Tiptap
Tiptap ialah editor berasaskan ProseMirror yang popular dengan sistem sambungan yang mudah digunakan.
Pasang
Tambah teras dan kit permulaan.
npm install @tiptap/core @tiptap/starter-kitMulakan
Cipta editor dalam onMount yang menyasarkan div.
const editor = new Editor({ element: el, extensions: [StarterKit] });Ikat pada DOM
Gunakan bind:this untuk mendapatkan rujukan elemen.
<div bind:this={el} class="editor" />Pembersihan
Panggil editor.destroy() dalam onDestroy untuk membebaskan sumber.
Pengikatan Dua Hala
Langgan acara kemas kini editor untuk menyegerakkan kandungan dengan stor Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());Bar Alat
Bina bar alat dengan butang yang memanggil editor.chain().focus().toggleBold().run() dan sebagainya.
State Aktif Reaktif
Langgan kemas kini editor untuk menyerlahkan butang aktif.
Sambungan
Tambah imej, sebutan, jadual dan blok kod melalui sambungan Tiptap.
Penyesuaian Skema
Takrifkan skema anda sendiri untuk pengalaman penyuntingan khusus domain.
Pembungkus SvelteKit
Bungkus editor dalam komponen dengan prop kandungan dan kemas kini yang dihantar.
Mudah Alih
Uji pada peranti sentuh; ProseMirror mengendalikan pemilihan dengan baik merentas platform.
Semakan Pantas
Apakah fungsi editor.destroy()?
Imbas Kembali
Bungkus Tiptap dalam komponen dengan bind:this dan cangkuk kitar hayat. Bina bar alat melalui arahan editor.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Penyunting Teks Kaya: Tiptap” percuma?
Ya — teks penuh “Penyunting Teks Kaya: Tiptap” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sveltejs Academy, tingkat taraf kepada CoddyKit PRO. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penyunting Teks Kaya: Tiptap”?
Sepadukan penyunting Tiptap ProseMirror ke dalam borang SvelteKit dengan pembalut Svelte. Anda berlatih Sveltejs Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Sveltejs Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Sveltejs Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Penyunting Teks Kaya: Tiptap” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menggunakan Tailwind CSS dengan SvelteKit
- Carta D3.js dalam Svelte
- Peta Leaflet dengan Tindakan Svelte
- Penyunting Teks Kaya: Tiptap