开篇
this.formData.content = this.$Base64.decode(this.formData.content);//解析
- 安装mavon-editor
npm install mavon-editor --save
- 按需引入、配置
在要使用markdown编辑器的组件内操作：
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
components: { mavonEditor },
全局注册
#main.js 加入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css' //解决编辑器的功能显示问题
Vue.use(mavonEditor)
自定义样式
参考 https://www.freesion.com/article/95991104769/
- 使用
<mavonEditor
:subfield="false"
:autofocus="false"
v-model="formData.content"
ref="md"
style="width: 99%;"
/>
详细请看他的依赖包redeme 你会有额外的收获的
问题
那么，在常用的操作里面，例如各级标题、表格、加粗加斜、标记、图文……图？此时，我们发现一个问题：如何添加本地图片呢？
Q
在某些IDE里面使用markdown时，可以自由的插入本地图片，那我们在页面中使用此编译器组件如何添加图片呢？
A
监听。没错，就是监听输入框变化。如果监听到有图片插入，那么我们可以先将图片上传至服务器，然后获取到线上url，拿到该url再插入到该位置。那么具体过程就很明显了：
选择本地图片，插入
监听到有图片插入
将该图上传至服务器
获取到服务器返回的图片url
将该线上url冬天插入到输入框中
代码如下
<template>
<div class="markdown">
<div class="container">
<mavon-editor :codeStyle="codeStyle" :ishljs="true"
v-model="info.content" :subfield="false" :boxShadow="false" defaultOpen="preview"
:toolbarsFlag="false" v-model="content" :toolbars="markdownOption" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
<button @click="submit">提交</button>
</div>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: "",
props: [],
components: {
mavonEditor,
},
data() {
return {
codeStyle: 'tomorrow-night', //设置高亮主题 ，
markdownOption: {
bold: false, // 粗体
italic: false, // 斜体
header: false, // 标题
underline: false, // 下划线
strikethrough: false, // 中划线
mark: false, // 标记
superscript: false, // 上角标
subscript: false, // 下角标
quote: false, // 引用
ol: false, // 有序列表
ul: false, // 无序列表
link: false, // 链接
imagelink: false, // 图片链接
code: false, // code
table: false, // 表格
fullscreen: false, // 全屏编辑
readmodel: false, // 沉浸式阅读
htmlcode: false, // 展示html源码
help: false, // 帮助
/* 1.3.5 */
undo: false, // 上一步
redo: false, // 下一步
trash: false, // 清空
save: false, // 保存（触发events中的save事件）
/* 1.4.2 */
navigation: false, // 导航目录
/* 2.1.8 */
alignleft: false, // 左对齐
aligncenter: false, // 居中
alignright: false, // 右对齐
/* 2.2.1 */
subfield: false, // 单双栏模式
preview: false, // 预览
},
codeStyle: 'tomorrow-night', //设置高亮主题 ，
id: null,
info: null
},
content:'',
html:'',
configs: {}
}
},
methods: {
// 将图片上传到服务器，返回地址替换到md中
$imgAdd(pos, $file){
let formdata = new FormData();
this.$upload.post('/上传接口地址', formdata).then(res => {
console.log(res.data);
this.$refs.md.$img2Url(pos, res.data);
}).catch(err => {
console.log(err)
})
},
// 所有操作都会被解析重新渲染
change(value, render){
// render 为 markdown 解析后的结果[html]
this.html = render;
},
// 提交
submit(){
console.log(this.content);
console.log(this.html);
this.$message.success('提交成功，已打印至控制台！');
}
},
mounted() {
}
}
</script>
3、HTML使用插件展示单栏(预览区域)
<mavon-editor
class="md"
:value="webDataString"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
/>
效果：
4、HTML使用插件展示双栏(编辑预览同屏)
<mavon-editor
class="mavon"
codeStyle="atom-one-dark"
v-model="webDataString"
:ishljs="true"
ref="md"
/>
效果：
5、上传图片
<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);
})
}
}
}
6、更多配置可以看官方文档
mavonEditor基于Vue的markdown编辑器
