mavonEditor

Mavoneditor

Vue2
Vue3

المستندات الإنجليزية

العرض التوضيحي لـ JSfiddle

مثال (عرض الصورة)

الكمبيوتر الشخصي

لعرض المزيد من الصور انقر هنا ...

تثبيت Mavon-Editor (تثبيت)

 $ npm install mavon-editor --save

استخدم (كيفية تقديم)

index.js :

    // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue . use ( mavonEditor )
    new Vue ( {
        'el' : '#main' ,
        data ( ) {
            return { value : '' }
        }
    } )

index.html

 < div id =" main " >
    < mavon-editor v-model =" value " />
</ div >

كيفية استخدامه في nuxt.js

أولاً ، قم بإنشاء Vue-Mavon-Editor.js في المكونات الإضافية

 import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

ثم أضف تكوين الإضافات في nuxt.config.js

  plugins : [
  ...
    { src : '@/plugins/vue-mavon-editor' , ssr : false }
  ] ,

الخطوة الأخيرة هي تقديمها في الصفحة أو المكون

< template >
  < div class = " mavonEditor " >
    < no-ssr >
      < mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
    </ no-ssr >
  </ div >
</ template >
< script >
export default {
  data () {
    return {
      markdownOption : {
        bold : true , // 粗体
        ... // 更多配置
      },
      handbook : " #### how to use mavonEditor in nuxt.js "
    };
  }
};
</ script >

< style scoped>
.mavonEditor {
  width : 100 % ;
  height : 100 % ;
}
</ style >

لمزيد من طرق المقدمة ، انقر هنا ...

كيفية الحصول على وضبط كائن التخفيضات ...

وثائق API

الدعائم

اسم الاسم	نوع الكتابة	القيمة الافتراضية الافتراضية	وصف الوصف
قيمة	خيط		القيمة الأولية
لغة	خيط	ZH-CN	اختيار اللغة ، يدعم مؤقتًا ZH-CN: صيني مبسط ، ZH-TW: عن طريق الفم الصيني ، EN: اللغة الإنجليزية ، FR: French ، PT-BR: البرتغالي ، RU: Russian ، DE: German ، JA: اليابانية
الحجم	خيط	14px	تحرير حجم نص المنطقة
Scrollstyle	منطقية	حقيقي	قم بتشغيل نمط شريط التمرير (دعم Chrome فقط في الوقت الحالي)
boxshadow	منطقية	حقيقي	قم بتشغيل ظل الحدود
boxshadowstyle	خيط	0 2px 12px 0 RGBA (0 ، 0 ، 0 ، 0.1)	نمط ظل الحدود
انتقال	منطقية	حقيقي	سواء لتمكين الرسوم المتحركة الانتقالية
شريط أدوات	خيط	#ffffff	لون شريط الأدوات
معاينة	خيط	#FBFBFB	لون خلفية مربع المعاينة
حقل فرعي	منطقية	حقيقي	صحيح: أعمدة مزدوجة (تحرير معاينة نفس الشاشة) ، خطأ: أعمدة واحدة (تحرير شاشة تقسيم المعاينة)
الافتراضي	خيط		يتم عرض منطقة العرض الافتراضية عندما تكون في عمود واحد ( subfield=false ). تحرير: يتم عرض منطقة التحرير افتراضيًا. معاينة: منطقة معاينة العرض الافتراضي آخر = تحرير
عنصر نائب	خيط	ابدأ التحرير ...	نص المطالبة الافتراضية عندما يكون مربع الإدخال فارغًا
قابلة للتحرير	منطقية	حقيقي	سواء كان للسماح بالتحرير
Codestyle	خيط	رمز github	نمط التخفيض: الافتراضي github ، نظام ألوان اختياري
أدوات أدوات	منطقية	حقيقي	ما إذا كان شريط الأدوات معروض
ملاحة	منطقية	خطأ شنيع	دليل العرض الافتراضي
اختصار	منطقية	حقيقي	سواء لتمكين مفاتيح الاختصار
التركيز التلقائي	منطقية	حقيقي	التركيز التلقائي على مربع النص
ishljs	منطقية	حقيقي	رمز تمييز
ImageFilter	وظيفة	باطل	تحتوي وظيفة تصفية الصور على معلمة File Object ، تتطلب إرجاع Boolean . true يعني أن الملف قانوني ، false تعني أن الملف غير قانوني.
ImageClick	وظيفة	باطل	الصورة انقر فوق الحدث ، الافتراضي هو معاينة ، يمكن تجاوزه
TabSize	رقم	ر	الافتراضي هو t
HTML	منطقية	حقيقي	تمكين علامات HTML. لقد تعرضت هذه العلامة دائمًا إلى تقصيرها لأسباب تاريخية ، ولكن يوصى بإغلاقها دون استخدام علامات HTML. يمكن أن يلغي تماما قضايا الأمن.
XSSoptions	هدف	{}	تكوين قاعدة XSS ، ممكّن افتراضيًا ، قم بتعيين FALSE لإيقاف تشغيله. بعد التمكين ، سيتم تصفية علامات HTML ، وسيتم ترشيح جميع سمات علامة HTML افتراضيًا. يوصى بتكوين الطائرات البيضاء عند الطلب لتقليل إمكانية الهجوم. - مرجع القاعدة المخصصة: https://jsxss.com/zh/options.html - مرجعية العرض التوضيحي: ديف ديمو
أشرطة الأدوات	هدف	المثال التالي	شريط الأدوات

أشرطة الأدوات

يتم تمكين جميع أزرار شريط الأدوات الافتراضية ، ويتم تمرير الكائنات المخصصة. يمكنك اختيار تمكين بعض الأزرار.

 /*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold : true , // 粗体
    italic : true , // 斜体
    header : true , // 标题
    underline : true , // 下划线
    strikethrough : true , // 中划线
    mark : true , // 标记
    superscript : true , // 上角标
    subscript : true , // 下角标
    quote : true , // 引用
    ol : true , // 有序列表
    ul : true , // 无序列表
    link : true , // 链接
    imagelink : true , // 图片链接
    code : true , // code
    table : true , // 表格
    fullscreen : true , // 全屏编辑
    readmodel : true , // 沉浸式阅读
    htmlcode : true , // 展示html源码
    help : true , // 帮助
    /* 1.3.5 */
    undo : true , // 上一步
    redo : true , // 下一步
    trash : true , // 清空
    save : true , // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation : true , // 导航目录
    /* 2.1.8 */
    alignleft : true , // 左对齐
    aligncenter : true , // 居中
    alignright : true , // 右对齐
    /* 2.2.1 */
    subfield : true , // 单双栏模式
    preview : true , // 预览
}

إذا كنت بحاجة إلى تخصيص زر إضافة شريط الأدوات ، فيمكنك استخدام الطرق التالية

 < mavon-editor >
  <!-- 左工具栏前加入自定义按钮 -->
  < template slot = "left-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 左工具栏后加入自定义按钮  -->
  < template slot = "left-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏前加入自定义按钮  -->
  < template slot = "right-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏后加入自定义按钮  -->
  < template slot = "right-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
</ mavon-editor >

أحداث الحدث ملزمة

اسم طريقة الاسم	المعلمات params	وصف الوصف
يتغير	السلسلة: القيمة ، السلسلة: عرض	حدث رد الاتصال الذي يتغير في منطقة التحرير (REDINDE: قيمة النتيجة بعد التحليل عن طريق التخفيض)
يحفظ	السلسلة: القيمة ، السلسلة: عرض	حدث رد الاتصال لـ Ctrl + S (احفظ المفتاح وادفع رد الاتصال أيضًا)
ملء الشاشة	منطقية: الحالة ، السلسلة: القيمة	تبديل حدث رد الاتصال للتحرير على الشاشة كاملاً (منطقية: شاشة كاملة على الدولة)
READMODEL	منطقية: الحالة ، السلسلة: القيمة	تبديل حدث رد الاتصال من القراءة الغامرة (Boolean: تم تمكين القراءة)
htmlcode	منطقية: الحالة ، السلسلة: القيمة	تحقق من حدث رد الاتصال لرمز مصدر HTML (Boolean: تم تمكين رمز المصدر)
SubfieldToggle	منطقية: الحالة ، السلسلة: القيمة	قم بتبديل حدث رد الاتصال لتحرير العمود المفرد والمزدوج (Boolean: Double Column Open Status)
المعاينة	منطقية: الحالة ، السلسلة: القيمة	تبديل حدث رد الاتصال المعايم المعاينة (منطقية: معاينة الحالة المفتوحة)
Helptoggle	منطقية: الحالة ، السلسلة: القيمة	عرض حدث رد اتصال المساعدة (Boolean: تم تمكين المساعدة)
NavigationToggle	منطقية: الحالة ، السلسلة: القيمة	قم بتبديل حدث رد الاتصال في دليل التنقل (Boolean: تم تمكين التنقل)
Imgadd	الرقم: POS ، ملف: imgfile	أضف حدث رد الاتصال إلى ملف الصورة (POS: موقع الصورة في القائمة ، الملف: كائن الملف)
Imgdel	صفيف (2): [الرقم: POS ، ملف: imgfile]	حدث رد اتصال ملف الصورة (Array (2): مجموعة من عنصرين ، الموضع الأول هو موضع الصورة في القائمة ، والموقف الثاني هو كائن الملف)

رمز تمييز

إذا كنت لا تحتاج إلى تسليط الضوء على رمز الإبلاغ ، فيجب عليك تعيين ISHLJS على خطأ

قم بتشغيل Props Props Code

<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>

لتحسين وحدة التخزين المكون الإضافي ، ستستخدم الملفات التالية الروابط الخارجية cdnjs افتراضيًا من V2.4.2 :

• highlight.js
• github-markdown-css
• katex ( v2.4.7 )

سيتم تحميل ملفات تحليل اللغة في الكود في highlight.js وأنماط تسليط الضوء على الكود عند الطلب عند استخدامها. لن يتم تحميل github-markdown-css و katex إلا عند mounted

إشعار : يتم تصدير مخطط الألوان الاختياري واللغات المدعومة من Aightly.js/9.12.0

دون استخدام CDN ، التحميل المحلي عند الطلب انقر هنا ...

تحميل الصورة

< template >
    < mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export default {
    methods : {
        // 绑定@imgAdd event
        $imgAdd (pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData ();
           formdata . append ( ' image ' , $file);
           axios ({
               url : ' server url ' ,
               method : ' post ' ,
               data : formdata,
               headers : { ' Content-Type ' : ' multipart/form-data ' },
           }). then (( url ) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm . $img2Url (pos, url);
           })
        }
    }
}
</ script >

للحصول على تفاصيل حول تحميل الصور ، انقر هنا ...

ملحوظة

• نمط الحجم الافتراضي هو MINIEGHT: 300 بكسل ، عرض الوسط: 300 بكسل ، والذي يمكن تكوينه من تلقاء نفسه.
• Z-index الأساسي: 1500
• يمكن ضبط فقط على شكل عرض الدعائم: أدوات شريطية: خطأ ، حقل فرعي: خطأ ، افتراضي: "معاينة"

مفتاح الاختصار

مفتاح	رمز المفاتيح	وظيفة
F8	119	تشغيل التنقل/إيقاف تشغيله
F9	120	معاينة/تحرير تبديل
F10	121	تشغيل/إيقاف تشغيل الشاشة
F11	122	قم بتشغيل/إيقاف وضع القراءة
F12	123	عمود واحد/تبديل العمود المزدوج
فاتورة غير مدفوعة	9	المسافة البادئة
Ctrl + s	17 + 83	الزناد حفظ
Ctrl + د	17 + 68	حذف الصفوف المختارة
Ctrl + z	17 + 90	سابق
Ctrl + y	17 + 89	الخطوة التالية
Ctrl + Breakspace	17 + 8	تحرير واضح
CTRL + ب	17 + 66	**عريض**
Ctrl + i	17 + 73	*مائل*
Ctrl + H.	17 + 72	#عنوان
Ctrl + 1	17 + 97 أو 49	#عنوان
Ctrl + 2	17 + 98 أو 50	## عنوان
Ctrl + 3	17 + 99 أو 51	### عنوان
Ctrl + 4	17 + 100 أو 52	#### عنوان
Ctrl + 5	17 + 101 أو 53	##### عنوان
Ctrl + 6	17 + 102 أو 54	###### عنوان
Ctrl + u	17 + 85	++ untcore ++
Ctrl + م	17 + 77	== العلامة ==
Ctrl + ف	17 + 81	> اقتباسات
Ctrl + o	17 + 79	1. قائمة مرتبة
Ctrl + L.	17 + 76	[عنوان الرابط] (عنوان الرابط)
Ctrl + Alt + S	17 + 18 + 83	^علامة الزاوية العلوية^
ctrl + alt + u	17 + 18 + 85	- قائمة غير مرتبة
Ctrl + Alt + C	17 + 18 + 67	كتلة الكود
Ctrl + Alt + L	17 + 18 + 76	! [عنوان الصورة] (رابط الصورة)
Ctrl + Alt + T	17 + 18 + 84	ملزمة
Ctrl + Shift + S	17 + 16 + 83	علامة الزاوية السفلية
Ctrl + Shift + D	17 + 16 + 68	~~ وضع العلامات الأوسط ~~
CTRL + Shift + C	17 + 16 + 67	مركز
Ctrl + Shift + L	17 + 16 + 76	على اليسار
CTRL + Shift + R	17 + 16 + 82	على اليمين
تحول + علامة التبويب	16 + 9	إلغاء المسافة البادئة

التبعيات

• تخفيض الطلب

• Auto-Textarea

توسيع بناء الجملة

• الرموز التعبيرية
• تراكب
• superscript
• حاوية
• قائمة التعريف
• اختصار
• حاشية
• أدخل
• علامة
• قائمة TODO
• تسليط الضوء
• كيكس
• معاينة الصور
• TOC

يمكن تقديم مكونات بناء جملة أخرى عن طريق الحصول على كائن Marmdown-IT. يمكن تقديم مكونات بناء جملة أخرى عن طريق الحصول على كائن Marmdown-IT.

تحديث (تحديث المحتوى)

• تحديث سجل

المتعاونون

• Chenxchen
• YGJ6
• يوكايج

ترخيص (شهادة)

Mavoneditor مفتوح المصدر وإصداره بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

حقوق الطبع والنشر (C) 2017 Hinesboy