标签:MD mavon markdown return min js editor katex css
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
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。