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-model
ชื่อ	สาย	ไม่มี	ชื่อของการควบคุม
ดูตัวอย่างคลาส	สาย	ไม่มี	คลาสรูปแบบตัวอย่างที่กำหนดเอง
อัตโนมัติ	บูลีน	จริง	การเริ่มต้นอัตโนมัติ
กองกำลัง	บูลีน	จริง	ซิงค์ค่าเป็น simplemde ในแต่ละครั้ง
เน้น	บูลีน	เท็จ	เปิดให้ไฮไลต์หรือไม่
ฆ่าเชื้อ	บูลีน	เท็จ	HTML ที่ไม่แสดงผลหลังจากเปิด
กำหนดค่า	วัตถุ	-	การกำหนดค่าของ Simplemde
PreviewRender	การทำงาน	-	configs.previewrender

เหตุการณ์

เหตุการณ์	อธิบาย	ข้อโต้แย้ง
ป้อนข้อมูล	ทริกเกอร์เมื่อค่าอินพุตเปลี่ยนไป	ค่า
เบลอ	ทริกเกอร์เมื่ออินพุตสูญเสียโฟกัส	ค่า
ที่เริ่มต้น	ทริกเกอร์เมื่อการเริ่มต้นเสร็จสิ้น	Simplemde

วิธีการ

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

• ตัวอย่าง/index.vue

• simplemde.js

รูปแบบ Markdown

เช่นใช้สไตล์การทำเครื่องหมายของ GitHub

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-theme-base)

เช่นใช้ชุดรูปแบบ 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 เป็นโอเพ่นซอร์สและเปิดตัวภายใต้ใบอนุญาต MIT

ลิขสิทธิ์ (c) 2022 F-loat