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替换到文本原位置 ->  /** * $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); }) } } }

完成！