vue2 使用 mavon-editor 实现 MD 展示与编辑
作者:互联网
mavon-editor 文档地址: https://github.com/hinesboy/mavonEditor
一、安装 mavon-editor
npm install mavon-editor --save
二、在main.js 中引入
import Vue from 'vue'
import mavonEditor from 'mavon-editor' // components
import 'mavon-editor/dist/css/index.css' // styles
Vue.use(mavonEditor)
三、组件中使用
<!-- templete -->
<mavon-editor
ref="docDetaileNode"
v-model="docTxt"
:subfield="false"
:editable="false"
:ishljs="true"
:external-link="externalLink"
box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
default-open="preview"
:toolbars-flag="false"
/>
// script
data() {
return {
externalLink: {
markdown_css: function() {
// 这是你的markdown css文件路径
return '/markdown/github-markdown.min.css'
},
hljs_js: function() {
// 这是你的hljs文件路径
return '/highlightjs/highlight.min.js'
},
katex_css: function() {
// 这是你的katex配色方案路径路径
return '/katex/katex.min.css'
},
katex_js: function() {
// 这是你的katex.js路径
return '/katex/katex.min.js'
}
},
docTxt: 'hello world'
}
}
4、预览与编辑
去掉 default-open="preview"
即为编辑模式
<mavon-editor
ref="mdEidt"
v-model="docContent"
:ishljs="true"
:external-link="externalLink"
box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
@imgAdd="imgUploading"
@fullScreen="fullScreenHandle"
/>
5、样式问题
externalLink: {
markdown_css: function() {
// 这是你的markdown css文件路径
return '/markdown/github-markdown.min.css'
},
hljs_js: function() {
// 这是你的hljs文件路径
return '/highlightjs/highlight.min.js'
},
katex_css: function() {
// 这是你的katex配色方案路径路径
return '/katex/katex.min.css'
},
katex_js: function() {
// 这是你的katex.js路径
return '/katex/katex.min.js'
}
}
这个配置信息会指向项目的根目录下,如在本地 http://localhost:8080
, 那么资源地址就为:http://localhost:8080/markdown/github-markdown.min.css
。那么就需要把资源放在本地:
这里有说到: https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/no-cnd.md
资源可以在node_modules里面去拷贝:
标签:MD,mavon,markdown,return,min,js,editor,katex,css 来源: https://blog.csdn.net/ellenging/article/details/120868238