vue使用markdown编辑器和把md渲染成html
一.使用markdown编辑器1.安装mavon-editor插件npm install mavon-editor --save2.在main.js中引入mavon-editorimport mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'注:引入index.css是为了解决编辑器的功能显示...
·
一.使用markdown编辑器
1.安装mavon-editor插件
npm install mavon-editor --save
2.在main.js中引入mavon-editor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
注:引入index.css是为了解决编辑器的功能显示问题
不引入index.css的异常:
正常引入index.css:
3.在vue中use一下mavon-editor
Vue.use(mavonEditor)
4.在html标签中引入mav-editor标签
<mavon-editor
v-model="value"
:ishljs="true"
ref="md"
/>
5.如果需要在mavon-editor中使用图片
<mavon-editor
v-model="value"
:ishljs="true"
ref="md"
@imgAdd="$imgAdd" // 加入这个属性
/>
然后去methods中编辑$imgAdd方法
$imgAdd (pos, $file) {
// 封装数据
var formData = new FormData()
formData.append('fileName', $file)
// 上传图片给后台
this.axios.post('/article/image', formData)
.then(res => {
if (res.data.success) {
this.$refs.md.$img2Url(pos, res.url)
//用来替换文章中的图片方法。将后台返回的图片地址把编辑器中的图片进行替换
}
})
}
$imgAdd方法中的pos参数是指你在文章中的第几张图片,即为position的缩写。
$file是你上传图片的文件对象
二.将markdown的内容转换成html内容
1.安装showdown插件
npm install showdown
2.全局配置showdown
// 配置showdown
Vue.prototype.converter = new showdown.Converter()
3.将md内容转换成html内容
var htmlContent = this.converter.makeHtml(mdContent)
注:使用this.converter.makeHtml方法,将md类型的内容转换成html内容,这个方方法需要传一个参数,就是你要转换成html内容的md字符串,返回值是html内容
更多推荐
已为社区贡献3条内容
所有评论(0)