vue simplemde

Vue-Simplemde

Komponen Editor Markdown untuk Vue.js. Hanya mendukung vue2.x.

Gunakan Pengaturan

Tidak lagi mendukung vue1.x, Anda dapat memodifikasi untuk digunakan

Memasang

npm install vue-simplemde --save

Menggunakan

• Referensi internal dalam satu komponen

< 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 >

• Referensi Global

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

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

Alat peraga

milik	jenis	bawaan	menggambarkan
nilai	Rangkaian	Tidak ada	Nilai awal, pengikatan model V dapat digunakan
nama	Rangkaian	Tidak ada	Nama kontrol.
Pratinjau-Kelas	Rangkaian	Tidak ada	Kelas Gaya Pratinjau Kustom
Autoinit	Boolean	BENAR	Inisialisasi Otomatis
Forcesync	Boolean	BENAR	Nilai sinkronisasi ke Simplemde setiap kali
menyorot	Boolean	PALSU	Apakah terbuka untuk disorot
membersihkan	Boolean	PALSU	Html yang tidak membuat input setelah pembukaan
konfigurasi	Obyek	{}	Konfigurasi sederhana
Pratinjaurender	Fungsi	-	configs.previewrender

Acara

peristiwa	menggambarkan	argumen
masukan	Dipicu saat nilai input berubah	nilai
mengaburkan	Dipicu saat input kehilangan fokus	nilai
diinisialisasi	Dipicu saat inisialisasi selesai	SimpleMde

Metode

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

• Contoh/index.vue

• SimpleMde.js

Gaya Markdown

misalnya menggunakan gaya penurunan harga gitub

GitHub-Markdown-CSS

memasang

$ npm install --save github-markdown-css

menggunakan

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

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

Menyorot

memasang

 $ npm install --save highlight.js

menggunakan

< 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 >

Tema Editor (SimpleMde-Theme-Base)

misalnya menggunakan tema basis-tema sederhana

memasang

 $ npm install --save simplemde-theme-base

menggunakan

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

misalnya

Tema Gelap

Konfigurasi

Konfigurasi sederhana

• 中文
• Bahasa inggris

Contoh

• Contoh sederhana
• Contoh Nuxt
• Halaman demo
• Sumber demo

Dependensi

• SimpleMde

Lisensi

Vue-Simplemde adalah open source dan dirilis di bawah lisensi MIT.

Hak Cipta (C) 2022 F-Loat