markdown it editor
1.1.2
vue.js 2.0降壓文本編輯器@github
npm i markdown - it - editor - S 使用.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 >您也可以在本機JavaScript中使用它。這樣您必須包括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 > | 參數 | 描述 | 類型 | 預設 |
|---|---|---|---|
| V模型 | bind-textarea的值 | 細繩 | 無效的 |
| 選項 | Markdown-it渲染選項 | 目的 | 請參閱詳細信息 |
| 上傳 | 圖像上傳配置 | 目的 | 請參閱詳細信息 |
| z索引 | 全屏編輯器z索引樣式時 | 數字 | 1 |
| 高度 | 編輯身高樣式 | 字符串，數字 | 攪動：50VH |
所有事件如果return false ，則默認函數將不會執行
| 姓名 | 描述 | 參數 |
|---|---|---|
| 定制的UPLOAD | defautl上傳函數使用html5的window.FormData empart.you可以替換其他實施 | 上傳輸入的DOM |
| 上傳成功 | 默認上傳功能成功事件 | 服務器返回值，例如xhr.responseText |
| 上載 | 上傳失敗事件時 | XMLHttpRequest對象 |
| 上傳 | 上傳進度活動 | { 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' ) ]
}讓您將圖像粘貼到編輯器
{
// 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' }
}
