محرّرات النصوص المنسّقة: Tiptap
ادمج محرّر Tiptap ProseMirror في نموذج SvelteKit باستخدام غلاف Svelte.
محرّرات النصوص المنسّقة: Tiptap درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
Tiptap
Tiptap محرر شائع مبني على ProseMirror، ويتميز بنظام إضافات سهل الاستخدام.
التثبيت
أضف النواة وحزمة البداية.
npm install @tiptap/core @tiptap/starter-kitالتهيئة
أنشئ Editor داخل onMount لاستهداف عنصر div.
const editor = new Editor({ element: el, extensions: [StarterKit] });الربط مع DOM
استخدم bind:this للحصول على مرجع العنصر.
<div bind:this={el} class="editor" />التنظيف
استدعِ editor.destroy() داخل onDestroy لتحرير الموارد.
الربط ثنائي الاتجاه
اشترك في حدث update الخاص بالمحرر لمزامنة المحتوى مع مخزن Svelte.
editor.on("update", ({ editor }) => content = editor.getHTML());شريط الأدوات
أنشئ شريط أدوات يحتوي على أزرار تستدعي editor.chain().focus().toggleBold().run() وما شابهها.
الحالات النشطة التفاعلية
اشترك في تحديثات المحرر لإبراز الأزرار النشطة.
الإضافات
أضف الصور والإشارات والجداول وكتل التعليمات البرمجية عبر إضافات Tiptap.
تخصيص المخطط
عرّف مخططك الخاص لتوفير تجارب تحرير متخصصة بالمجال.
غلاف SvelteKit
غلّف المحرر داخل مكوّن يحتوي على خاصية content وتحديثات مُرسلة.
الأجهزة المحمولة
اختبر على الأجهزة التي تعمل باللمس؛ إذ يتعامل ProseMirror جيدًا مع التحديد عبر المنصات المختلفة.
تحقق سريع
ماذا تفعل editor.destroy()؟
مراجعة
غلّف Tiptap داخل مكوّن باستخدام bind:this وخطافات دورة الحياة. وأنشئ أشرطة الأدوات عبر أوامر المحرر.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «محرّرات النصوص المنسّقة: Tiptap» مجاني؟
نعم — نص درس «محرّرات النصوص المنسّقة: Tiptap» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «محرّرات النصوص المنسّقة: Tiptap»؟
ادمج محرّر Tiptap ProseMirror في نموذج SvelteKit باستخدام غلاف Svelte. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «محرّرات النصوص المنسّقة: Tiptap»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- استخدام Tailwind CSS مع SvelteKit
- مخططات D3.js في Svelte
- خرائط Leaflet باستخدام إجراءات Svelte
- محرّرات النصوص المنسّقة: Tiptap