Zengin Metin Düzenleyicileri: Tiptap
Tiptap ProseMirror düzenleyicisini Svelte sarmalayıcısıyla bir SvelteKit formuna entegre edin.
Zengin Metin Düzenleyicileri: Tiptap, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Tiptap
Tiptap, kullanıcı dostu bir uzantı sistemine sahip, ProseMirror tabanlı popüler bir editor'dür.
Yükleme
Çekirdek paketi ve StarterKit'i ekleyin.
npm install @tiptap/core @tiptap/starter-kitBaşlatma
onMount içinde bir div'i hedefleyen bir editor oluşturun.
const editor = new Editor({ element: el, extensions: [StarterKit] });DOM'a Bağlama
Öğe başvurusunu almak için bind:this kullanın.
<div bind:this={el} class="editor" />Temizleme
Kaynakları serbest bırakmak için onDestroy içinde editor.destroy() çağrısını yapın.
İki Yönlü Bağlama
İçeriği bir Svelte deposuyla eşitlemek için editor'ün update olayına subscribe olun.
editor.on("update", ({ editor }) => content = editor.getHTML());Araç Çubuğu
Diğerlerinin yanı sıra editor.chain().focus().toggleBold().run() çağrısı yapan düğmelerle bir araç çubuğu oluşturun.
Tepkisel Etkin Durumlar
Etkin düğmeleri vurgulamak için editor güncellemelerine subscribe olun.
Uzantılar
Tiptap uzantıları aracılığıyla görseller, bahsetmeler, tablolar ve kod blokları ekleyin.
Şema Özelleştirme
Alana özgü düzenleme deneyimleri için kendi şemanızı tanımlayın.
SvelteKit Sarmalayıcısı
Editor'ü content özelliğine ve yayımlanan güncellemelere sahip bir bileşen içinde sarın.
Mobil
Dokunmatik cihazlarda sınayın; ProseMirror, platformlar arasında seçimi iyi yönetir.
Hızlı Kontrol
editor.destroy() ne yapar?
Özet
Tiptap'ı bind:this ve yaşam döngüsü kancalarına sahip bir bileşen içinde sarın. Araç çubuklarını editor komutlarıyla oluşturun.
Sıkça Sorulan Sorular
“Zengin Metin Düzenleyicileri: Tiptap” dersi ücretsiz mi?
Evet — “Zengin Metin Düzenleyicileri: Tiptap” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Zengin Metin Düzenleyicileri: Tiptap” dersinde ne öğreneceğim?
Tiptap ProseMirror düzenleyicisini Svelte sarmalayıcısıyla bir SvelteKit formuna entegre edin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Zengin Metin Düzenleyicileri: Tiptap” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- SvelteKit ile Tailwind CSS Kullanımı
- Svelte'te D3.js Grafikleri
- Svelte Eylemleriyle Leaflet Haritaları
- Zengin Metin Düzenleyicileri: Tiptap