markdown it editor
1.1.2
A Vue.js 2.0 Markdown Rich Text Editor @Github
npm i markdown - it - editor - S Gunakan Template .vue
< template >
< div id =" app " >
< markdown-editor v-model =" content " > </ markdown-editor >
</ div >
</ template >
< script >
import { MarkdownEditor } from 'markdown-it-editor'
import hljs from 'highlightjs' // have to npm install highlight
import 'highlightjs/styles/github.css'
export default {
components : { MarkdownEditor } ,
data ( ) {
return {
content : 'hello world' ,
options : {
highlight ( str , lang ) { // you can add highlightjs plugin to highlight your code
if ( lang && hljs . getLanguage ( lang ) ) {
try {
return hljs . highlight ( lang , str ) . value
} catch ( __ ) { }
}
return ''
}
}
}
}
}
</ script >
< style lang =" css " >
#app{
width: 100vw;
height: 100vh;
}
</ style >Anda juga dapat menggunakannya di JavaScript asli. Dengan cara ini Anda harus memasukkan vuejs @demo
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > </ title >
<!-- markdown editor style -->
< link rel =" stylesheet " href =" ../lib/index.css " >
</ head >
< body >
< div id =" app " >
< markdown-editor v-model =" content " > </ markdown-editor >
</ div >
</ body >
<!-- vuejs -->
< script src =" //cdn.bootcss.com/vue/2.1.4/vue.min.js " > </ script >
<!-- markdown editor component -->
< script src =" ../lib/index.js " > </ script >
< script type =" text/javascript " >
var vue = new Vue ( {
el : '#app' ,
data : { content : '# hello world' }
} )
</ script >
</ html > | param | keterangan | jenis | bawaan |
|---|---|---|---|
| V-model | Nilai Bind-TextArea | Rangkaian | batal |
| opsi | Opsi Render Markdown-IT | Obyek | Lihat detailnya |
| mengunggah | Konfigurasi Upload Gambar | Obyek | Lihat detailnya |
| z-index | Saat layar penuh gaya editor z-index | nomor | 1 |
| tinggi | Gaya Tinggi Editor | string, angka | Stirng: 50vh |
Semua peristiwa jika return false , fungsi default tidak akan dieksekusi
| nama | keterangan | param |
|---|---|---|
| Upload khusus | Fungsi Upload Defautl Gunakan window.FormData html5 | Unggah DOM Input |
| Upload-success | Acara Keberhasilan Fungsi Unggah Default | nilai pengembalian server seperti xhr.responseText |
| unggah-error | Saat unggahan acara gagal | Objek XMLHttpRequest |
| mengunggah | Unggah di acara Progress | { loaded: number, total: number } |
{
// markdown-it options @more-see
// https://github.com/markdown-it/markdown-it#init-with-presets-and-options
html : true , // Enable HTML tags in source
xhtmlOut : false , // Use '/' to close single tags (<br />).
// This is only for full CommonMark compatibility.
breaks : true , // Convert 'n' in paragraphs into <br>
langPrefix : 'language-' , // CSS language prefix for fenced blocks. Can be
// useful for external highlighters.
linkify : false , // Autoconvert URL-like text to links
// Enable some language-neutral replacement + quotes beautification
typographer : false ,
// Double + single quotes replacement pairs, when typographer enabled,
// and smartquotes on. Could be either a String or an Array.
//
// For example, you can use '«»„“' for Russian, '„“‚‘' for German,
// and ['«xA0', 'xA0»', '‹xA0', 'xA0›'] for French (including nbsp).
quotes : '“”‘’' ,
// Highlighter function. Should return escaped HTML,
// or '' if the source string is not changed and should be escaped externaly.
// If result starts with <pre... internal wrapper is skipped.
highlight : function ( /*str, lang*/ ) { return '' ; } ,
// Plugins. Should be an array of the plugin functions imported even if its just one plugin.
plugins : [ require ( 'markdown-it-anchor' ) , require ( 'markdown-it-deflist' ) ]
}Izinkan Anda menempelkan gambar ke editor
{
// defualt form upload name
name : 'file' ,
// default upload accept
// @like <input type = 'file' accept='image/jpg,image/jpeg,image/png'/>
accept : 'image/jpg,image/jpeg,image/png' ,
// your file upload url
//if url == null or other params 'false' the upload button will hidden
url : null , // your upload url
header : { 'Authorization' : 'you code' }
}
