md editor rt

؟ MD-Editor-RT

الإنجليزية | 中文

محرر Markdown لـ react ، تم تطويره في jsx و typescript .

• الوثائق والتوضيح ： اذهب

• محرر السلسلة نفسه لـ Vue3 ： MD-Editor-V3

️ الميزات

• شريط الأدوات ، screenfull أو screenfull في صفحات الويب وما إلى ذلك.
• الموضوعات ، والمضمنة في السداد والظلام.
• مفتاح الاختصار للمحرر.
• قم بتجميل المحتوى الخاص بك بواسطة prettier (فقط لمحتوى تخفيض الطلب ، وليس الكود والنص الآخر).
• متعدد اللغات ، البناء الصيني والإنجليزية (الافتراضي: الصينية).
• قم بتحميل الصورة أو لصق الصورة أو قصها وتحميلها.
• قم بإعداد المقالة مباشرة (لا يوجد محرر ، ولا مستمع أحداث ، فقط معاينة المحتوى).
• موضوع المعاينة ، default ، vuepress ، github ، cyanosis ، mk-cute ، أنماط smart-blue (ليست متطابقة). يمكن تخصيصه أيضًا (ارجع إلى صفحة المثال).
• mermaid (> = 1.3.0) ، صيغة katex الرياضية （> = 1.4.0）.
• تخصيص شريط الأدوات كما تريد.
• استيراد عند الطلب (> = 4.0.0).

؟ معاينة

الموضوع الافتراضي	موضوع مظلم	معاينة فقط

إدخال موجه وعلامة ، امتدادات الرموز التعبيرية

؟ ثَبَّتَ

yarn add md-editor-rt

استخدم الامتداد الحالي للغة والموضوع ، مثل اليابانية

yarn add @vavt/cm-extension

استخدم مكونات شريط الأدوات الحالية ، مثل تصدير المحتوى مثل PDF

yarn add @vavt/v3-extension

لمزيد من الطرق للاستخدام أو المساهمة ، يرجى الرجوع إلى: MD-Editor-Extension

الاستخدام

بدءًا من 4.0.0 ، يمكن استيراد المكونات الداخلية عند الطلب.

✍؟ محرر العرض

 import React , { useState } from 'react' ;
import { MdEditor } from 'md-editor-rt' ;
import 'md-editor-rt/lib/style.css' ;

export default ( ) => {
  const [ text , setText ] = useState ( '# Hello Editor' ) ;
  return < MdEditor modelValue = { text } onChange = { setText } /> ;
} ;

معاينة فقط

 import React , { useState } from 'react' ;
import { MdPreview , MdCatalog } from 'md-editor-rt' ;
import 'md-editor-rt/lib/preview.css' ;

const scrollElement = document . documentElement ;

export default ( ) => {
  const [ text ] = useState ( '# Hello Editor' ) ;
  const [ id ] = useState ( 'preview-only' ) ;

  return (
    < >
      < MdPreview id = { id } modelValue = { text } />
      < MdCatalog editorId = { id } scrollElement = { scrollElement } />
    </ >
  ) ;
} ;

عند استخدام عرض جانب الخادم ، يجب أن يكون scrollElement من نوع السلسلة ، على سبيل المثال: html ، body ، #id ، .class .

---

لمزيد من الاستخدام ، يرجى زيارة الوثيقة.