vditor
v3.10.7
محرر تخفيض سهل الاستخدام ، تم تصميمه للتكيف مع سيناريوهات التطبيق المختلفة
الإنجليزية | العرض التوضيحي
Vditor هو محرر تخفيض من جانب المتصفح يدعم WysiWyg ، العرض الفوري (على غرار Typora) وأساليب معاينة الشاشة المقسمة. يتم تنفيذها باستخدام TypeScript ودعم JavaScript الأصلي وكذلك الأطر مثل Vue و React و Angular و Svelte.
مرحبًا بكم في منطقة المناقشة الرسمية VDITITLE لمعرفة المزيد. في الوقت نفسه ، نرحب أيضًا باتباع حساب B3Log Open Source Community الحساب الرسمي B3log开源:
مع شعبية أساليب التنضيد ، بدأ المزيد والمزيد من التطبيقات في دمج محرري التخفيضات. الوضع الحالي لمحرري التولد المتكامل السائد هو كما يلي:
هذه النقاط الثلاث تتوافق تمامًا مع ثلاثة سيناريوهات التطبيق:
لذلك ، فإن محرر تخفيض التنفيذ الذي يمكنه التكيف مع سيناريو التطبيق أمر بالغ الأهمية ، ويجب النظر فيه:
بذل Vditor جهودًا في هذه المجالات ، على أمل تقديم بعض المساهمة في مجال تحرير التولد العالمي الحديث.
يعد وضع WysiWyg أكثر ودية للمستخدمين الذين ليسوا على دراية بالتنسيق ، ويمكن أيضًا استخدامه بسلاسة إذا كنت على دراية بالتخفيض.
لا ينبغي أن يكون وضع التقديم الفوري غير مألوف للمستخدمين الذين يعرفون Typora. من الناحية النظرية ، هذه هي الطريقة الأكثر أناقة لتحرير التخفيض.
وضع معاينة الشاشة التقليدية التقليدية مناسبة للتحرير الترددي تحت شاشات كبيرة.
يمكن تمكين معظم الميزات المذكورة أعلاه عن طريق تبديل التكوين. يمكن للمطورين اختيار المطابقة بناءً على سيناريوهات التطبيق الخاصة بهم.
npm install vditor --save import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor ( id , { options... } ) <!-- ️生产环境请指定版本号，如 https://unpkg.com/[email protected]/dist... -->
< link rel =" stylesheet " href =" https://unpkg.com/vditor/dist/index.css " />
< script src =" https://unpkg.com/vditor/dist/index.min.js " > </ script >ظهور المحرر. كلاسيكية مدمجة ، 2 مجموعات من الموضوعات.
options.themesetThemeظهور إخراج HTML من Markdown. تصميم النمل المدمج ، الضوء ، الظلام ، WeChat 4 مجموعات من الموضوعات. يدعم واجهة امتداد موضوع المحتوى.
class="vditor-reset" إلى عنصر العرضoptions.preview.themeIPreviewOptions.themesetTheme أو setContentTheme ظهور كتلة الكود. جيثب المدمج و 36 مجموعة أخرى من الموضوعات.
options.preview.hljsIPreviewOptions.hljssetTheme أو setCodeTheme يمكنك ملء id العنصر أو HTMLElement الخاص بالعنصر
HTMLElement للعنصر false options.cache.enable تحتاج إلى تعيين options.cache.id
| يوضح | القيمة الافتراضية | |
|---|---|---|
| i18n | متعدد اللغات ، انظر itips | - |
| undodelay | الفاصل الزمني للتاريخ | - |
| بعد | طريقة رد الاتصال بعد تقديم المحرر بشكل غير متزامن | - |
| ارتفاع | إجمالي ارتفاع المحرر | 'آلي' |
| مينهايت | الحد الأدنى لارتفاع مساحة التحرير | - |
| عرض | إجمالي عرض المحرر ، الدعم ٪ | 'آلي' |
| عنصر نائب | موجه عندما تكون منطقة الإدخال فارغة | '' ' |
| لانغ | أنواع اللغة: EN_US ، FR_FR ، PT_BR ، JA_JP ، KO_KR ، RU_RU ، SV_SE ، ZH_CN ، ZH_TW | 'ZH_CN' |
| الإدخال (القيمة: سلسلة) | نشأت بعد المدخلات | - |
| التركيز (القيمة: سلسلة) | الزناد بعد التركيز | - |
| طمس (القيمة: سلسلة) | نشأت بعد التركيز | - |
| Keydown (الحدث: لوحة المفاتيح) | نشأت بعد الضغط | - |
| ESC (القيمة: سلسلة) | نشأت بعد الصحافة ESC | - |
| Ctrlenter (القيمة: سلسلة) | ⌘/Ctrl+Enter يتم تشغيله بعد الضغط | - |
| حدد (القيمة: سلسلة) | نشأ بعد اختيار النص في المحرر | - |
| فاتورة غير مدفوعة | يقوم مفتاح TAB بتشغيل السلاسل ، ويدعم t وأي سلاسل | - |
| الآلة الكاتبة | سواء لتمكين وضع الآلة الكاتبة | خطأ شنيع |
| CDN | تكوين عنوان CDN مصمم ذاتيًا | https://unpkg.com/vditor@${VDITOR_VERSION} |
| وضع | الوضع الاختياري: SV ، IR ، Wysiwyg | "الأشعة تحت الحمراء" |
| تصحيح الأخطاء | ما إذا كنت تريد عرض السجلات | خطأ شنيع |
| قيمة | قيمة تهيئة المحرر | '' ' |
| سمة | الموضوع: كلاسيكي ، مظلم | "الكلاسيكية" |
| رمز | نمط الأيقونة: ANT ، المواد | "النملة" |
| CustomRenders: {language: string ، render: (العنصر: htmlelement ، vditor: ivditor) => void} [] | العارض المخصص | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . انظر SRC/TS/UTIL/OPTIONS.TS للاطلاع على القيمة الافتراضيةemoji ، headings ، bold ، italic ، strike ، | ، line ، quote ، list ، ordered-list ، check ، outdent ، المسافة indent ، code ، inline-code ، insert-after br insert-before ، undo ، redo upload ، link ، table ، record ، edit-mode ، both ، preview ، fullscreen ، outline ، code-theme ، content-theme ، التصدير ، export ، devtools ، info helpname في التعداد ، يمكنك إضافة زر مخصص ، بالتنسيق على النحو التالي: new Vditor ( 'vditor' , {
toolbar : [
{
hotkey : '⇧⌘S' ,
name : 'sponsor' ,
tipPosition : 's' ,
tip : '成为赞助者' ,
className : 'right' ,
icon : '<svg t="1589994565028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2808" width="32" height="32"><path d="M506.6 423.6m-29.8 0a29.8 29.8 0 1 0 59.6 0 29.8 29.8 0 1 0-59.6 0Z" fill="#0F0F0F" p-id="2809"></path><path d="M717.8 114.5c-83.5 0-158.4 65.4-211.2 122-52.7-56.6-127.7-122-211.2-122-159.5 0-273.9 129.3-273.9 288.9C21.5 562.9 429.3 913 506.6 913s485.1-350.1 485.1-509.7c0.1-159.5-114.4-288.8-273.9-288.8z" fill="#FAFCFB" p-id="2810"></path><path d="M506.6 926c-22 0-61-20.1-116-59.6-51.5-37-109.9-86.4-164.6-139-65.4-63-217.5-220.6-217.5-324 0-81.4 28.6-157.1 80.6-213.1 53.2-57.2 126.4-88.8 206.3-88.8 40 0 81.8 14.1 124.2 41.9 28.1 18.4 56.6 42.8 86.9 74.2 30.3-31.5 58.9-55.8 86.9-74.2 42.5-27.8 84.3-41.9 124.2-41.9 79.9 0 153.2 31.5 206.3 88.8 52 56 80.6 131.7 80.6 213.1 0 103.4-152.1 261-217.5 324-54.6 52.6-113.1 102-164.6 139-54.8 39.5-93.8 59.6-115.8 59.6zM295.4 127.5c-72.6 0-139.1 28.6-187.3 80.4-47.5 51.2-73.7 120.6-73.7 195.4 0 64.8 78.3 178.9 209.6 305.3 53.8 51.8 111.2 100.3 161.7 136.6 56.1 40.4 88.9 54.8 100.9 54.8s44.7-14.4 100.9-54.8c50.5-36.3 108-84.9 161.7-136.6 131.2-126.4 209.6-240.5 209.6-305.3 0-74.9-26.2-144.2-73.7-195.4-48.2-51.9-114.7-80.4-187.3-80.4-61.8 0-127.8 38.5-201.7 117.9-2.5 2.6-5.9 4.1-9.5 4.1s-7.1-1.5-9.5-4.1C423.2 166 357.2 127.5 295.4 127.5z" fill="#141414" p-id="2811"></path><path d="M353.9 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2812"></path><path d="M659.3 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2813"></path><path d="M411.6 538.5c0 52.3 42.8 95 95 95 52.3 0 95-42.8 95-95v-31.7h-190v31.7z" fill="#5B5143" p-id="2814"></path><path d="M506.6 646.5c-59.6 0-108-48.5-108-108v-31.7c0-7.2 5.8-13 13-13h190.1c7.2 0 13 5.8 13 13v31.7c0 59.5-48.5 108-108.1 108z m-82-126.7v18.7c0 45.2 36.8 82 82 82s82-36.8 82-82v-18.7h-164z" fill="#141414" p-id="2815"></path><path d="M450.4 578.9a54.7 27.5 0 1 0 109.4 0 54.7 27.5 0 1 0-109.4 0Z" fill="#EA64F9" p-id="2816"></path><path d="M256 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2817"></path><path d="M703.3 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2818"></path></svg>' ,
click ( ) { alert ( '捐赠地址：https://ld246.com/sponsor' ) } ,
} ] ,
} )| يوضح | القيمة الافتراضية | |
|---|---|---|
| اسم | علامة فريدة | - |
| رمز | أيقونة SVG | - |
| نصيحة | تَلمِيح | - |
| tipposition | نصائح: 'n' ، 'ne' ، 'nw' ، 's' ، 'se' ، 'sw' ، 'w' ، 'e' | - |
| مفتاح Hotkey | مفاتيح الاختصار في التنسيق ⇧⌘ / ⌘ / ⌥⌘ | - |
| لاحقة | أدخل اللاحقة في المحرر | - |
| بادئة | أدخل البادئة في المحرر | - |
| انقر (الحدث: الحدث ، vditor: ivditor) | الحدث الذي يتم تشغيله عند النقر على زر مخصص | - |
| اسم الفصل | اسم النمط | '' ' |
| شريط الأدوات؟: Array <Options.Toolbar> | القائمة الفرعية | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يخفي | سواء لإخفاء شريط الأدوات | خطأ شنيع |
| دبوس | ما إذا كان يجب إصلاح شريط الأدوات | خطأ شنيع |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | سواء لتمكين العداد | خطأ شنيع |
| بعد (الطول: الرقم ، العداد: Options.counter): باطلة | الكلمة عدد رد الاتصال | - |
| الأعلى | الحد الأقصى المسموح بالقيمة للدخول | - |
| يكتب | نوع الإحصائيات: "Markdown" ، "نص" | 'تخفيض السعر' |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | سواء كنت تستخدم LocalStorage لذاكرة التخزين المؤقت | حقيقي |
| بطاقة تعريف | مفتاح ذاكرة التخزين المؤقت ، المعلمة الأولى هي عنصر وتتطلب تنشيط ذاكرة التخزين المؤقت | - |
| بعد (HTML: سلسلة): سلسلة | استدعاء ذاكرة التخزين المؤقت | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | ما إذا كان لتمكين وضع التعليق | خطأ شنيع |
| إضافة (معرف: سلسلة ، نص: سلسلة ، تعليقات: icommentsdata []) | أضف رد اتصال التعليق | - |
| إزالة (IDS: String []) | حذف رد الاتصال بالتعليق | - |
| التمرير (أعلى: الرقم) | قم بتمرير رد الاتصال | - |
| addettop (CommentData: icommentsdata []) | عند تعديل المستند ، يتم تكييف ارتفاع التعليقات | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| تأخير | معاينة الفواصل الزمنية ميلي ثانية | 1000 |
| maxwidth | أقصى عرض لمنطقة المعاينة | 800 |
| وضع | وضع العرض: كلاهما ، المحرر | 'كلاهما' |
| عنوان URL | طلب التحليل MD | - |
| تحليل (العنصر: htmlelement) | معاينة رد الاتصال | - |
| تحويل (HTML: سلسلة): سلسلة | رد الاتصال قبل تقديم | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| DefaultLang | استخدم اللغة افتراضيًا إذا لم يتم تحديد لغة | '' ' |
| يُمكَِن | ما إذا كان لتمكين تمييز الكود | حقيقي |
| أسلوب | انظر Chroma للحصول على القيم الاختيارية | github |
| عدد الكتان | سواء لتمكين رقم الخط | خطأ شنيع |
| langs | تخصيص اللغة المحددة | code_languages |
| Rendermenu (الرمز: htmlelement ، نسخة: htmlelement) | تقديم زر القائمة | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| autospace | المساحات التلقائية | خطأ شنيع |
| gfmautolink | رابط تلقائي | حقيقي |
| FixTermTypo | مصطلح التصحيح التلقائي | خطأ شنيع |
| TOC | أدخل الدليل | خطأ شنيع |
| الحواشي | حاشية | حقيقي |
| CodeblockPreview | ما إذا كنت ستقدم كتلة الكود في أوضاع WYSIWYG و IR | حقيقي |
| Mathblockpreview | ما إذا كنت ستجعل الصيغ الرياضية في أوضاع Wysiwyg و IR | حقيقي |
| Paragraphbeginningspace | بدايات فارغة | خطأ شنيع |
| عقم | ما إذا كان لتمكين تصفية XSS | حقيقي |
| ListStyle | إضافة سمة على غرار البيانات إلى القائمة | خطأ شنيع |
| LinkBase | ربط بادئة المسار النسبي | '' ' |
| LinkPrefix | ربط البادئة الإلزامية | '' ' |
| علامة | تمكين مارك مارك | خطأ شنيع |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| حاضِر | الموضوع الحالي | "ضوء" |
| قائمة | قائمة الموضوعات الاختيارية | {"ant-design": "تصميم النمل" ، الظلام: "Dark" ، Light: "Light" ، WeChat: "WeChat"} |
| طريق | عنوان نمط الموضوع | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| inlinedigit | هل يُسمح بالعد بعد بدء الصيغة الرياضية المضمنة؟ | خطأ شنيع |
| وحدات الماكرو | تم تمرير تعريفات الماكرو عند تقديمها مع Mathjax | {} |
| محرك | محرك عرض الصيغة الرياضية: Katex ، Mathjax | 'katex' |
| Mathjaxoptions | المعلمات عندما يكون محرك عرض الصيغة الرياضية هو Mathjax | - |
القيم الافتراضية هي ["سطح المكتب" ، "الجهاز اللوحي" ، "Mobile" ، "MP-WeChat" ، "Zhihu"]. يمكنك التحديد من القيم الافتراضية للتكوين ، أو استخدام الحقول التالية للتطوير المخصص.
| يوضح | القيمة الافتراضية | |
|---|---|---|
| مفتاح | تم تحديد الزر بشكل فريد ولا يمكن أن يكون فارغًا | - |
| نص | نص زر | - |
| Tooltip | تَلمِيح | - |
| اسم الفصل | اسم فئة الزر | - |
| انقر (المفتاح: سلسلة) | زر انقر فوق حدث رد الاتصال | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | سواء لتمكين عرض الوسائط المتعددة | حقيقي |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| Ispreview | ما إذا كان يجب معاينة الصورة | حقيقي |
| معاينة (BOM: عنصر) => باطل | معاينة معاينة الصورة | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| isopen | ما إذا كان يجب فتح عنوان الرابط | حقيقي |
| انقر (BOM: عنصر) => باطل | انقر فوق حدث الارتباط | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| تحليل | ما إذا كان لإجراء تحليل MD | حقيقي |
| تأخير | الفاصل الدعوي الفاصل الزمني | 200 |
| الرموز التعبيرية | يمكن تحديد الرموز التعبيرية الافتراضية ، من Lute/Emoji_map ، أو يمكن تخصيصها | {'+1': '؟' ، '-1': '؟' ، 'Heart': '❤' ، 'Cold_sweat': '؟' } |
| الرموز التعبيرية | نصائح التعبير الشائعة | - |
| الرموز التعبيرية | عنوان صورة التعبير | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| تمديد: ihintextend [] | تمديد الانتهاء التلقائي للكلمات الرئيسية مثل @/Tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format للتحويل. // POST data
xhr . send ( formData ) ; // formData = FormData.append("file[]", File)
// return data
{
"msg" : "" ,
"code" : 0 ,
"data" : {
"errFiles" : [ 'filename' , 'filename2' ] ,
"succMap" : {
"filename3" : "filepath3" ,
"filename3" : "filepath3"
}
}
}linkToImgUrl تمرير عنوان الصورة خارج الموقع في الحافظة إلى الخادم للحفظ ، وهي بنية البيانات الخاصة بها كما يلي: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success ، format ، error في نفس الوقت. موقف المكالمات المحدد هو كما يلي: if ( xhr . status === 200 ) {
if ( vditor . options . upload . success ) {
vditor . options . upload . success ( editorElement , xhr . responseText ) ;
} else {
let responseText = xhr . responseText ;
if ( vditor . options . upload . format ) {
responseText = vditor . options . upload . format ( files as File [ ] , xhr . responseText ) ;
}
genUploadedLabel ( responseText , vditor ) ;
}
} else {
if ( vditor . options . upload . error ) {
vditor . options . upload . error ( xhr . responseText ) ;
} else {
vditor . tip . show ( xhr . responseText ) ;
}
}| يوضح | القيمة الافتراضية | |
|---|---|---|
| عنوان URL | قم بتحميل عنوان URL ، إذا كان فارغًا ، فلن يتم تشغيل الحدث المتعلق بالتحميل. | '' ' |
| الأعلى | تحميل الملف الحد الأقصى للبايت | 10 * 1024 * 1024 |
| LinkToimgurl | عندما تحتوي الحافظة على عنوان الصورة ، استخدم عنوان URL هذا للتحميل مرة أخرى | '' ' |
| LinkToImgCallback (مسؤول: سلسلة) | تحميل رد الاتصال عنوان الصورة | - |
| LinkToImgFormat (مسؤول: سلسلة): سلسلة | تنسيق قيمة الإرجاع التي تم تحميلها بواسطة عنوان الصورة | - |
| النجاح (المحرر: HTMLPreelement ، MSG: String) | تحميل رد الاتصال بنجاح | - |
| خطأ (MSG: سلسلة) | تحميل فاشلة رد الاتصال | - |
| رمز | التحقق من تحميل cors ، الرأس هو x-upload-token | - |
| withcredentials | التحكم في الوصول عبر الموقع | خطأ شنيع |
| الرؤوس | طلب إعدادات الرأس | - |
| اسم الملف (الاسم: سلسلة): سلسلة | معالجة أمان اسم الملف | name => name.replace (/ w/g ، '') |
| يقبل | نوع تحميل الملف ، مثل قبول الإدخال | - |
| التحقق من صحة (الملفات: ملف []) => String | منطقية | تحقق ، إرجاع صحيح إذا نجحت إرجاع رسالة الخطأ على خلاف ذلك | - |
| معالج (ملفات: ملف []) => String | فارغ | وعد | يعد | التحميل المخصص ، رسالة خطأ إرجاع عند حدوث خطأ | - |
| التنسيق (الملفات: ملف [] ، مسؤول: سلسلة): سلسلة | قم بتحويل البيانات التي يتم إرجاعها بواسطة الخادم لتلبية بنية البيانات المدمجة | - |
| ملف (ملفات: ملف []): ملف [] | وعد <file []> | معالجة الملف الذي تم تحميله قبل العودة | - |
| Setheaders (): {[Key: String]: String} | استخدم قيمة الإرجاع لتعيين الرأس قبل التحميل | - |
| extradata: {[Key: String]: String | Blob} | أضف معلمات إضافية إلى FormData | - |
| عديد | هل هناك ملفات متعددة التحميل | حقيقي |
| اسم الميدان | تحميل اسم حقل | 'ملف[]' |
| RenderLinkDest؟ (vditor: ivditor ، node: ilutenode ، enering: boolean): [string ، number] | معالجة عنوان الصورة في الحافظة | '' ' |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | هل هو مدعوم لسحب الحجم؟ | خطأ شنيع |
| موضع | سحب شريط السحب: "أعلى" ، "أسفل" | 'قاع' |
| بعد (الارتفاع: رقم) | انتهى رد الاتصال بالسحب | - |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| معاينة | classname على عنصر المعاينة | '' ' |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| فِهرِس | مستوى ملء الشاشة | 90 |
| يوضح | القيمة الافتراضية | |
|---|---|---|
| يُمكَِن | ما إذا كان التهيئة يعرض الخطوط العريضة | خطأ شنيع |
| موضع | موقع الخطوط العريضة: "يسار" ، "يمين" | 'غادر' |
| يوضح | |
|---|---|
| ExportJson (Markdown: String) | احصل على JSON المقابل وفقًا لـ Markdown |
| getValue () | احصل على محتوى تخفيض |
| Gethtml () | احصل على محتوى HTML |
| insertValue (القيمة: سلسلة ، عرض = صواب) | أدخل المحتوى في التركيز واستخدم عرض التخفيض بشكل افتراضي |
| ركز() | ركز على المحرر |
| Blur () | اجعل المحرر من التركيز |
| عاجز() | تعطيل المحرر |
| يُمكَِن() | لا يمكن أن يكون محرر |
| getSelection (): سلسلة | إرجاع السلسلة المحددة |
| setValue (Markdown: String ، ClearStack = false) | اضبط محتوى المحرر وحدد Clear History Stack |
| Clearstack () | امسح مكدس سجل التراجع وإعادة |
| RenderPreview (القيمة؟: سلسلة) | تعيين محتوى منطقة المعاينة |
| getCursposition (): {TOP: NUMP ، اليسار: الرقم} | احصل على وضع التركيز |
| deletevalue () | حذف المحتوى المحدد |
| UpdateValue (القيمة: سلسلة) | تحديث المحتوى المحدد |
| isuploading () | هل لا يزال التحميل قيد التقدم |
| ClearCache () | ذاكرة التخزين المؤقت الواضحة |
| upipabledCache () | تعطيل ذاكرة التخزين المؤقت |
| enablecache () | تمكين ذاكرة التخزين المؤقت |
| HTML2MD (القيمة: سلسلة) | HTML إلى MD |
| نصيحة (نص: سلسلة ، الوقت: رقم) | موجه الرسالة. الوقت 0 وسيتم عرضه |
| setPreviewMode (الوضع: "كلا" | "محرر") | تعيين وضع المعاينة |
| setTheme (السمة: "Dark" | "Classic" ، ContentTheme؟: String ، CodeTheMe؟: String ، ContentTheMePath؟: String) | تعيين السمة وموضوع المحتوى وأسلوب كتلة الكود |
| getCurrentMode (): سلسلة | احصل على وضع التحرير الحالي للمحرر |
| تدمير () | تدمير المحرر |
| getCommentIds (): {id: string ، top: number} [] | احصل على كل التعليقات |
| hlcommentids (IDS: String []) | تسليط الضوء على التعليقات |
| Unlcommentids (IDS: String []) | إلغاء التعليقات والمعالم البارزة |
| removeCommentids (removeIds: String []) | حذف التعليقات |
| updatetoolbarconfig (config: {Hide؟: Boolean ، PIN؟: Boolean}) | تحديث تكوين شريط الأدوات |
method.min.js وتسميها مباشرة على النحو التالي Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview مباشرة ، والمعلمات هي كما يلي: previewElement: HTMLDivElement , // 使用该元素进行渲染
markdown : string , // 需要渲染的 markdown 原文
options ?: IPreviewOptions {
mode : "dark" | "light" ;
anchor?: number ; // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0
customEmoji?: { [ key : string ] : string } ; // 自定义 emoji，默认为 {}
lang?: ( keyof II18nLang ) ; // 语言，默认为 'zh_CN'
emojiPath?: string ; // 表情图片路径
hljs?: IHljs ; // 参见 options.preview.hljs
speech?: { // 对选中后的内容进行阅读
enable ?: boolean ,
} ;
math?: IMath ; // 数学公式渲染配置
cdn?: string ; // 自建 CDN 地址
transform ? ( html : string ) : string ; // 在渲染前进行的回调方法
after ? ( ) ; // 渲染完成后的回调
lazyLoadImage?: string ; // 设置为 Loading 图片地址后将启用图片的懒加载
markdown?: options . preview . markdown ;
theme?: options . preview . theme ;
render?: options . preview . render ;
renderers?: ILuteRender ; // 自定义渲染 https://ld246.com/article/1588412297062
}method.min.js و index.min.js لا يمكن تقديمها في نفس الوقت| يوضح | |
|---|---|
| PreviewImage (OldImgelement: HtmlimageElement ، Lang: Keyof II18N = "ZH_CN" ، theme = "Classic") | انقر على الصورة للمعاينة |
| Mermaidrender (العنصر: htmlelement ، cdn = Options.cdn ، السمة = الخيارات | مخطط التدفق/مخطط الوقت/مخطط جانت |
| SmilesRender (العنصر: htmlelement ، cdn = Options.cdn ، السمة = الخيارات. | بنية المادة الكيميائية |
| markmaprender (العنصر: htmlelement ، cdn = Options.cdn) | خريطة العقل التخولية |
| FlowChrtrender (العنصر: htmlelement ، cdn = Options.cdn) | مخطط انسيابي |
| Coderender (العنصر: htmlelement ، الخيار؟: ihljs) | إضافة زر نسخ إلى كتلة الرمز في العنصر |
| chartrender (العنصر: (htmlelement | وثيقة) = وثيقة ، cdn = Options.cdn ، السمة = الخيارات. | تقديم الرسم البياني |
| MindMaprender (العنصر: (htmlelement | وثيقة) = وثيقة ، cdn = Options.cdn ، السمة = الخيارات. | عرض صورة الدماغ |
| plantumlrender (العنصر: (htmlelement | وثيقة) = وثيقة ، cdn = Options.cdn) | عرض Plantuml |
| abcrender (العنصر: (htmlelement | وثيقة) = وثيقة ، cdn = options.cdn) | تقديم غرزة |
| md2html (mdtext: سلسلة ، خيارات؟: ipreviewoptions): وعد <string> | يتم تحويل نص التخفيض إلى HTML ، وتتطلب هذه الطريقة البرمجة غير المتزامنة |
| معاينة (معاينة: HTMLDIVELEMENT ، MORKDODER: سلسلة ، خيارات؟: IPREVIEWOPTIONS) | عرض مقال تخفيض الصفحة |
| Highlightrender (hljsoption؟: ihljs ، العنصر؟: htmlelement | وثيقة ، cdn = options.cdn) | تسليط الضوء على عرض كتل التعليمات البرمجية في العنصر |
| MediArender (العنصر: htmlelement) | قم بإعداد الفيديو والصوت والإعدادات المدمجة لروابط محددة |
| Mathrender (العنصر: htmlelement ، خيارات؟: {Cdn؟: String ، Math؟: Imath}) | تقديم الصيغ الرياضية |
| الكلام (العنصر: htmlelement ، lang؟: (keyof ii18nlang)) | قراءة النص المحدد |
| GraphVizRender (العنصر: htmlelement ، cdn؟: string) | تقديم GraphViz |
| Outlinerender (ContentElement: Htmlelement ، الهدف: عنصر) | تقديم الخطوط العريضة |
| lazyloadimagerender (العنصر: (htmlelement | وثيقة) = وثيقة) | تقديم الصور مع تمكين التحميل كسول |
| setCodeTheMe (CodeTheMe: String ، Cdn = Options.cdn) | اضبط موضوع الرمز ، راجع Options.preview.hljs.style for codeTheMe |
| setContentTheme (ContentTheme: String ، Path: String) | اضبط موضوع المحتوى ، راجع Options.preview.theme.list لـ ContentTheme. |
npm install من دليل الجذرnpm run start ابدأ بدء تشغيل الخادم المحلي وفتح http: // localhost: 9000npm run build Package Code to Dist Directoryنظرًا لاستخدام آلية التحميل عند الطلب ، فإن CDN الافتراضي هو https://unpkg.com/vditornumber
إذا تم تعديل الكود أو تحتاج إلى استخدام CDN مصمم ذاتيًا ، فيمكنك اتباع الخطوات التالية:
cdn و emojiPath themes في options و IPreviewOptionshighlightRender ، mathRender ، abcRender ، chartRender ، mermaidRender ، SMILESRender ، markmapRender ، flowchartRender ، mindmapRender ، plantumlRender ، graphvizRender ، setCodeTheme ، setContentTheme تحتاج إلى إضافة معلمات CDNيرجى قراءة جزء الترقية في Changelog بعناية عند ترقية الإصدار
يستخدم Vditor بروتوكول MIT مفتوح المصدر.
في الأيام الأولى لتطوير SYM ، استخدمنا مباشرة محرر النصوص WysiWyg Rich. في ذلك الوقت ، كان المحررين المستندة إلى HTML شائعين للغاية ، وكانوا مناسبًا جدًا للاقتباس في المشاريع ، وكانوا يتماشى مع عادات استخدام المستخدم في ذلك الوقت.
في وقت لاحق ، غيّر صعود التخفيض تدريجياً تخطيط الجميع. بالإضافة إلى ذلك ، فإن العديد من مشاريعنا الأخرى مخصصة للمبرمجين ، لذا فإن الترحيل إلى MD هو أيضًا اتجاه عام. لقد اخترنا Codemirror ، وهو محرر ممتاز يوفر للمطورين واجهات برمجة غنية وأيضًا أكثر توافقًا مع المتصفحات المختلفة.
في وقت لاحق ، مع استقرار احتياجات أعمالنا ، فإن استخدام Codemirror يشعر أحيانًا "مرهقة". على سبيل المثال ، لتحقيق قائمة أسماء المستخدم الكاملة بشكل عام ، إدراج Emoji ، وملفات التحميل ، وما إلى ذلك ، فإنه يتطلب تطويرًا ثانويًا متعمقًا نسبيًا ، وهذه احتياجات العمل هي بالضبط ما لدى العديد من سيناريوهات المشروع وضرورية.
أخيرًا ، قررنا البدء في تنفيذ المحرر بأنفسنا في SYM. مع العديد من التكرارات الإصدارات ، أصبح محرر SYM أكثر نضجًا. في سلسلة المجتمع التي نديرها ، سألنا بعض الأشخاص عما إذا كان بإمكاننا سحب المحرر بشكل منفصل وتقديمه للجميع للاستخدام. في الوقت نفسه ، كانت فئة البرنامج Main Main Main في الواجهة الأمامية قد غمرت قليلاً في الحفاظ على المحررين المنتشرين في مشاريع مختلفة ، وكان لديهم أيضًا انطباع جيد عن TypeScript ، لذلك قررنا استخدام TS لتنفيذ محرر MD الجديد من جانب المتصفح.
لذلك ، ولد Vditor.
