tui.editor

GFM Markdown و Wysiwyg Editor - إنتاجية وقابلة للتمديد

جدول المحتويات

• حزم
• لماذا محرر واجهة المستخدم المحمص؟
• سمات
• أمثلة
• دعم المتصفح
• سحب خطوات الطلب
• المساهمة
• نخب واجهة المستخدم
• تستخدم من قبل
• رخصة

؟ حزم

محرر واجهة المستخدم المحمص

اسم	وصف
@toast-ui/editor	مكون JavaScript عادي

أغلفة محرر واجهة المستخدم المحمص

اسم	وصف
@toast-ui/react-editor	رد فعل غلاف مكون
@toast-ui/vue-editor	مكون غلاف VUE

ملحقات محرر واجهة المستخدم المحمص

اسم	وصف
@toast-ui/editor-plugin-chart	البرنامج المساعد لتقديم الرسم البياني
@toast-ui/editor-plugin-code-syntax-highlight	البرنامج المساعد لتسليط الضوء على بناء جملة الرمز
@toast-ui/editor-plugin-color-syntax	البرنامج المساعد إلى نص تحرير اللون
@toast-ui/editor-plugin-table-merged-cell	البرنامج المساعد لدمج أعمدة الجدول
@toast-ui/editor-plugin-uml	البرنامج المساعد لتقديم UML

؟ لماذا محرر واجهة المستخدم المحمص؟

يوفر محرر UI Toast وضع Markdown ووضع WysiWyg . اعتمادًا على نوع الاستخدام الذي تريده مثل إنتاج Markdown أو ربما لتحرير التخفيض . يمكن أن يكون محرر واجهة مستخدم Toast مفيدًا لكل من الاستخدام. إنه يوفر وضع Markdown و WysiWyg ، والذي يمكن تبديله في أي وقت من الأوقات.

وضع تخفيض الإنتاجية

مواصفات CommonMark + GFM

اليوم العام هو المعيار المتخلف عن العمل. GFM (GitHub Flavored Markdown) هي مواصفات شائعة أخرى تعتمد على المميزات المشتركة - التي يحتفظ بها Github ، والتي هي المخلفات المستخدمة في الغالب. يتبع محرر واجهة مستخدم Toast كل من مواصفات CommonMark و GFM . اكتب المستندات بسهولة باستخدام الأدوات الإنتاجية التي يوفرها محرر Toast UI ويمكنك فتح المستند المنتج بسهولة أينما يتم دعم المواصفات.

• المعاينة المباشرة : تحرير التخفيض مع مراقبة HTML المقدمة. سيتم تطبيق تعديلاتك على الفور.
• SCROLL SYNC : التمرير المتزامن بين التخفيض والمعاينة. لا تحتاج إلى التمرير عبر كل واحد بشكل منفصل.
• تمييز بناء الجملة : يمكنك التحقق من بناء جملة Markdown على الفور.

وضع wysiwyg سهل

• الجدول : من خلال قائمة سياق الجدول ، يمكنك إضافة أو حذف الأعمدة أو الصفوف من الجدول ، ويمكنك أيضًا ترتيب النص في الخلايا.
• محرر كتلة مخصص : يمكن تحرير منطقة الكتلة المخصصة من خلال المحرر الداخلي.
• نسخ ولصق : لصق أي شيء من المتصفح ، لقطة الشاشة ، Excel ، PowerPoint ، إلخ.

واجهة المستخدم

• شريط الأدوات : من خلال شريط الأدوات ، يمكنك تصميم أو إضافة عناصر إلى المستند الذي تقوم بتحريره.

• السمة المظلمة : يمكنك استخدام السمة المظلمة.

استخدام الوظائف الموسعة المختلفة - الإضافات

تعد CommonMark و GFM رائعة ، لكننا نحتاج غالبًا إلى مزيد من التجريد. يأتي محرر UI Toast مع ملحقات قوية في امتثال لبناء Morddown.

يتم توفير خمسة ملحقات أساسية على النحو التالي ، ويمكن تنزيلها واستخدامها مع NPM.

• chart : كتلة رمز تحمل علامة "الرسم البياني" ستجعل مخطط واجهة مستخدم الخبز المحمص.
• code-syntax-highlight : قم بتمييز منطقة كتلة الكود المقابلة للغة التي توفرها Prism.js.
• color-syntax : باستخدام Toast UI Colorpicker ، يمكنك تغيير لون نص التحرير باستخدام واجهة المستخدم الرسومية.
• table-merged-cell : يمكنك دمج أعمدة رأس الجدول ومنطقة الجسم.
• uml : كتلة رمز تحمل علامة "UML" ستقدم مخططات UML.

؟ سمات

• العارض: يدعم وضعًا لعرض بيانات التخفيض فقط دون منطقة تحرير.
• التدويل (I18N): يدعم اللغة الإنجليزية ، الهولندية ، الكورية ، اليابانية ، الصينية ، الإسبانية ، الألمانية ، الروسية ، الفرنسية ، الأوكرانية ، التركية ، الفنلندية ، التشيكية ، العربية ، البولندية ، الجاليبيين ، السويدي ، الإيطالي ، النرويجية ، اللغة الكرواتية + ، يمكنك تمديدها.
• عنصر واجهة المستخدم: تتيح لك هذه الميزة تكوين القواعد التي تحل محل السلسلة المطابقة مع RegExp محددة مع عقدة عنصر واجهة المستخدم.
• كتلة مخصصة: يمكن تعريف العقد غير المدعومة بواسطة Markdown من خلال كتلة مخصصة. يمكنك عرض العقدة ما تريده من خلال كتابة منطق التحليل باستخدام كتلة مخصصة.

؟ أمثلة

• أساسي
• مشاهد
• باستخدام جميع الإضافات
• إنشاء البرنامج المساعد للمستخدم
• تخصيص أزرار Toobar
• التدويل (I18N)

فيما يلي المزيد من الأمثلة واللعب مع محرر توست واجهة المستخدم!

؟ دعم المتصفح

الكروم	Internet Explorer	حافة	سفاري	Firefox
نعم	11+	نعم	نعم	نعم

؟ سحب خطوات الطلب

تكون منتجات Toast UI مفتوحة المصدر ، بحيث يمكنك إنشاء طلب سحب (PR) بعد إصلاح المشكلات. قم بتشغيل البرامج النصية NPM وتطوير نفسك مع العملية التالية.

يثبت

فرع الشوكة main في مستودعك الشخصي. استنساخها إلى الكمبيوتر المحلي. تثبيت وحدات العقدة. قبل بدء التطوير ، يجب عليك التحقق مما إذا كانت هناك أي أخطاء.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

يستخدم Toast UI Editor مساحة عمل NPM ، لذلك تحتاج إلى تعيين البيئة على أساس NPM7. إذا تم استخدام التخريب ، يجب تثبيت التبعيات عن طريق نقل المسارات المباشرة لكل حزمة.

يطور

يمكنك رؤية الكود الخاص بك ينعكس بمجرد حفظ الرمز عن طريق تشغيل خادم. لا تفوت إضافة حالات الاختبار ثم قم بعمل حقوق خضراء.

قم بتشغيل خادم الثلج

يتيح لك Snowpack تشغيل خادم تطوير دون تجميع.

$ npm run serve editor

تشغيل Webpack-dev-server

إذا كان اختبار المتصفحات القديمة مطلوبًا ، فلا يزال من الممكن تشغيل خادم التطوير باستخدام حقيبة الويب.

$ npm run serve:ie editor

إجراء اختبار

$ npm test editor

طلب سحب

قبل تحميل العلاقات العامة الخاصة بك ، قم بإجراء اختبار آخر مرة أخرى للتحقق مما إذا كانت هناك أي أخطاء. إذا لم يكن لديه أخطاء ، ارتكب ثم ادفعه!

لمزيد من المعلومات حول خطوات العلاقات العامة ، يرجى الاطلاع على الروابط في القسم المساهمة.

المساهمة

• مدونة لقواعد السلوك
• المبدأ التوجيهي المساهمة
• اتفاقية الالتزام
• إصدار الإرشادات

؟ نخب واجهة المستخدم

• تقويم واجهة المستخدم المحمص
• مخطط واجهة المستخدم الخبز المحمص
• توست شبكة واجهة المستخدم
• محرر صور واجهة المستخدم الخبز المحمص
• نخب واجهة المستخدم

تستخدم من قبل

• nhn dooray! - خدمة التعاون (المشروع ، الرسول ، البريد ، التقويم ، القيادة ، ويكي ، جهات الاتصال)
• Unotes - تمديد رمز الاستوديو المرئي

رخصة

تم ترخيص هذا البرنامج ضمن MIT © NHN Cloud.