vue 项目接入 markdown
最近做一个项目,需要在vue项目中接入 markdown 编辑器,其实这个好接,他没有什么特别的样式,男的就是图片的上传。
今天给大家推荐一个插件 :mavonEditor
这个是他的github:https://github.com/hinesboy/mavonEditor/blob/master/README.md
这个插件支持自定义界面,代码高亮,图片上传等,是我见过最好的一个。
他的使用方法在github上写的很详细,可以去里面看。
安装
安装命令
$ npm install mavon-editor --save 或者
$ yarn add mavon-editor
在 main.js 中引入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
使用mavonEditor编辑markdown
在需要引入markdown编辑器的界面
<template>
<div>
<mavon-editor v-model="value"/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
defaultData: "preview"
};
},
};
</script>
使用v-html展示markdown
<article v-html="value" ></article>
<script>
export default {
data() {
return {//value的值是经过markdown解析后的文本,可使用`@change="changeData"`在控制台打印显示
value: `<blockquote>
<p>你好</p>
</blockquote>
<p><code>java</code></p>`,
defaultData: "preview"
};
},
methods: {
}
};
</script>
图片上传
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例,可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
}
}
}
完成!
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【Gitee地址】秦浩铖:https://gitee.com/wjw1014