تنزيل tipex - تنزيل كود مصدر tipex

tipex

شفرة المصدر الأخرى

1.0.0

تنزيل

تيبكس

يعتبر Tipex محررًا متقدمًا للنصوص الغنية مصممًا خصيصًا لـ Svelte، وقد تم تصميمه بدقة باستخدام أطر العمل القوية Tiptap وProsemirror. فهو يمكّن المطورين من إنشاء محررات نصوص غنية دون عناء، وتحريرهم من تعقيدات التقنيات الأساسية وإدارة الأسلوب والتعقيدات ذات الصلة.

تم تفعيل وضع Svelte5 والرونية! ؟

الميزات الرئيسية

Svelte 5 جاهز : مصمم بأحدث ميزات Svelte 5 بما في ذلك الأحرف الرونية والمقتطفات
عناصر تحكم قابلة للتخصيص : نظام تحكم مرن مع كل من الخيارات الافتراضية والمخصصة
بنية البرنامج المساعد : قابلة للتوسيع من خلال ملحقات Tiptap
سريع الاستجابة : يعمل بشكل رائع على كل من أجهزة سطح المكتب والأجهزة المحمولة
القائمة العائمة : شريط أدوات عائم مدرك للسياق لتجربة تحرير محسنة
إدارة الارتباط : معالجة الارتباط المضمنة مع إمكانيات المعاينة والتحرير
دعم السمات : تصميم سهل باستخدام متغيرات CSS وفئات الأدوات المساعدة
الأداء الأمثل : يعزز تفاعل Svelte من أجل التحرير السلس
دعم TypeScript : دعم TypeScript الكامل لتجربة تطوير أفضل

تثبيت

تثبيت الحزمة من NPM:

 تثبيت npm "@friendofsvelte/tipex"

الاستخدام الأساسي

قم باستيراد المكون واستخدامه في المكون الخاص بك:

 <script lang="ts"> استيراد {Tipex} من "@friendofsvelte/tipex";        Let body = `<p>تمت كتابة هذا <a target="_blank" rel="noopener noreferrer" href="">المحتوى</a> بواسطة <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">بيشواس</a> في 2023.</p>`;</script>

<تيبكس
     {body} عناصر التحكم العائمة = "margin-top: 1rem؛ هامش أسفل: 0؛"class = "h-[70vh] حدود حدود محايدة-200"/>

المفاهيم الأساسية

أوضاع التحكم

يقدم Tipex وضعين للتحكم:

عناصر التحكم الافتراضية ( controls={true} ):

شريط أدوات التنسيق المبني مسبقًا
قابلة للتخصيص من خلال دعم utilities
مثالية للتنفيذ السريع

عناصر التحكم المخصصة ( controls={false} ):

السيطرة الكاملة على واجهة المحرر
استخدم controlComponent للتطبيقات المخصصة
مثالية لحالات الاستخدام المتخصصة

نظام التمديد

تستفيد Tipex من نظام تمديد Tiptap لتحسين الوظائف:

 استيراد { Tipex } من "@friendofsvelte/tipex"; ),];// استخدم في المكون<Tipex {extensions} />

القائمة العائمة

توفر القائمة العائمة خيارات تنسيق تراعي السياق:

 <Tipex float /> // تمكين القائمة العائمة

الاستخدام المتقدم

أقسام الرأس والقدم المخصصة

أضف مكونات مخصصة أعلى أو أسفل المحرر باستخدام مقتطفات Svelte 5:

 <script lang="ts"> استيراد {Tipex} من "@friendofsvelte/tipex";        دع الجسم = "";</script>

<تيبكس {الجسم}>
    {#رأس المقتطف (محرر)}
        <CustomHeader {editor} />
    {/snippet}

        {#مقتطف القدم (محرر)}
        <CustomFooter {editor} />
    {/snippet}
</تيبكس>

المرافق المخصصة

أضف عناصر تحكم مخصصة مع الاحتفاظ بشريط الأدوات الافتراضي:

 <script lang="ts"> استيراد {Tipex} من "@friendofsvelte/tipex";        دع الجسم = "";</script>

<Tipex {body} الضوابط>
    {#مقتطفات مساعدة (محرر)}
        <تنسيق مخصص {editor} />
    {/snippet}
</تيبكس>

مكون التحكم المخصص

إنشاء واجهة تحكم مخصصة بالكامل:

 <script lang="ts"> استيراد {Tipex} من "@friendofsvelte/tipex";        دع الجسم = "";</script>

<Tipex {body} الضوابط = {خطأ}>
    {#مكون التحكم في المقتطف (المحرر)}
        <MyCustomControls {editor} />
    {/snippet}
</تيبكس>

التوثيق

للحصول على وثائق شاملة، قم بزيارة Tipex.pages.dev.

حول صديق سفيلتي

Friend Of Svelte هو مشروع يحركه المجتمع لمساعدة مطوري Svelte في العثور على موارد Svelte الرائعة وتطويرها. مهمتنا هي إنشاء أدوات عالية الجودة وقابلة للصيانة ويمكن الوصول إليها لنظام Svelte البيئي.