vue simplemde

Vue-Simplemde

مكون محرر Markdown لـ Vue.js. دعم فقط Vue2.x.

استخدم الإعداد

لم يعد يدعم vue1.x ، يمكنك التعديل للاستخدام

ثَبَّتَ

npm install vue-simplemde --save

يستخدم

• المرجع الداخلي في مكون واحد

< template >
  < vue-simplemde v-model = " content " ref = " markdownEditor " />
</ template >

< script >
  import VueSimplemde from ' vue-simplemde '

  export default {
    components : {
      VueSimplemde
    }
  }
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
</ style >

• المرجع العالمي

 import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue . component ( 'vue-simplemde' , VueSimplemde ) 

الدعائم

ملكية	يكتب	تقصير	يصف
قيمة	خيط	لا أحد	القيمة الأولية ، يمكن استخدام ربط الطراز V
اسم	خيط	لا أحد	اسم السيطرة.
معاينة فئة	خيط	لا أحد	فئة نمط المعاينة المخصصة
تلقائي	منطقية	حقيقي	التهيئة التلقائية
القوى	منطقية	حقيقي	قيمة المزامنة مع Simplemde في كل مرة
تسليط الضوء	منطقية	خطأ شنيع	هل هو مفتوح لتسليط الضوء
عقم	منطقية	خطأ شنيع	HTML التي لا تقدم الإدخال بعد الفتح
التكوينات	هدف	{}	تكوين Simplemde
المعاينة	وظيفة	-	configs.previewrender

الأحداث

حدث	يصف	الحجج
مدخل	يتم تشغيلها عندما تتغير قيمة الإدخال	قيمة
طمس	يتم تشغيله عندما يفقد المدخلات التركيز	قيمة
تهيئة	يتم تشغيله عند اكتمال التهيئة	Simplemde

طُرق

 this . $refs . markdownEditor . simplemde . togglePreview ( ) ;

• أمثلة/index.vue

• Simplemde.js

نمط التخفيض

على سبيل المثال ، استخدم نمط تخفيف جيثب

Github-Markdown-CSS

ثَبَّتَ

$ npm install --save github-markdown-css

يستخدم

< template >
  < vue-simplemde preview-class = " markdown-body " />
</ template >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~github-markdown-css ' ;
</ style >

تسليط الضوء

ثَبَّتَ

 $ npm install --save highlight.js

يستخدم

< template >
  < vue-simplemde :highlight = " true " />
</ template >

< script >
  import hljs from ' highlight.js ' ;

  window . hljs = hljs;
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~highlight.js/styles/atom-one-dark.css ' ;
  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</ style >

موضوع المحرر (قاعدة Simplemde-themple)

على سبيل المثال ، استخدم سمة simplemde-theme-base

ثَبَّتَ

 $ npm install --save simplemde-theme-base

يستخدم

< style >
  @import ' ~simplemde-theme-base/dist/simplemde-theme-base.min.css ' ;
  /* no need import simplemde.min.css */
</ style >

على سبيل المثال

موضوع مظلم

إعدادات

تكوين Simplemd

• 中文
• إنجليزي

أمثلة

• مثال بسيط
• مثال nuxt
• الصفحة التجريبية
• المصدر التجريبي

التبعيات

• Simplemde

رخصة

Vue-Simplemde مفتوح المصدر وإطلاقه بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

حقوق الطبع والنشر (C) 2022 F-LOAT