# MavonEditor
MavonEditor (opens new window) 组件基于 mavonEditor 封装，是一款 Vue Markdown 编辑器；mavonEditor GitHub、文档 (opens new window)。
# Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | " " | 编辑器的内容. 如果使用 v-model, 不要使用它. |
| height | String | 自适应 | 编辑器的高度. |
| imgUpload | [Function, String] | null | 自定义上传图片，1、如果是 String 请填写上传的url地址；2、如果是 Function 自定义上传 function(pos, $file, $vm)；3、其他(不设置) base64。文档 |
| 其他Props | -- | -- | 见 官方文档 (opens new window) |
# Methods
| 名称 | 说明 | 参数 |
|---|---|---|
| change | 编辑区发生变化的回调事件(render: value 经过markdown解析后的结果) | (String: value , String: render) |
# 上传图片
# Base64
编辑器默认上传图片转为 Base64 ，例如，如下：
1
2
3
2
3
# 自定义上传地址
你可以自定义上传图片的后端地址，但是对后端的数据返回格式有如下要求：
{
code: 200, // 状态码
data: 'http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png', // 图片地址
}
1
2
3
4
2
3
4
前端代码如下：
<mavon-editor ref="mavoneditor" v-model="content" imgUpload="http://ajax.com/upload/img"></mavon-editor>
1
# 自定义上传函数
你也可以自定义上传函数，样列如下：
<template>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>自定义上传图片</span>
</div>
<mavon-editor ref="mavoneditor" v-model="content" :imgUpload="imgUpload"></mavon-editor>
</el-card>
</template>
<script>
import MavonEditor from '@/components/MavonEditor';
export default {
components: {
TuiEditor
},
data() {
return {
content: '# This is Test.'
};
},
methods: {
imgUpload(pos, $file , $vm) {
var formdata = new FormData();
formdata.append('image', $file);
// ajax上传
this.$axios({
url: '/upload/img',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
$vm.$img2Url(pos, data);
}).catch(err => {
console.log(err);
});
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
友情提示
你可以修改此组件，删除 imgUpload 此 props，然后在组件内部直接进行调整，统一整个后台编辑器的上传，方便，避免每次调用组件都设置上次图片。相关代码可以，如下修改样列：
export default {
methods: {
$imgAdd(pos, $file){
const _this = this;
var formdata = new FormData();
formdata.append('image', $file);
this.$axios({
url: '上传的后端地址写死到这里，这样就避免掉了每次调用编辑器都要去设置上传了',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
// data 就是img 的 url 地址
_this.$refs.mavonEditor.$img2Url(pos, data);
}).catch(err => {
console.log(err);
});
/**
* 自定义 删除刚上传的img记录
* 不让在菜单栏-图片菜单下显示，不要有删除按钮
* 因为目前删除 base64 正则报错
*/
_this.$refs.mavonEditor.$refs.toolbar_left.img_file = [[0, null]];
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Example
<template>
<div class="main-conent main-conent-minheight">
<el-card shadow="never" class="border-none">
<div slot="header">
<span>默认</span>
</div>
<mavon-editor ref="mavoneditor" v-model="content" @change="change"></mavon-editor>
</el-card>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>自定义上传图片</span>
</div>
<mavon-editor ref="mavoneditor2" v-model="content" :imgUpload="imgUpload"></mavon-editor>
</el-card>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>详情</span>
</div>
<mavon-editor
v-model="content"
:subfield="false"
:toolbars-flag="false"
:box-shadow="false"
default-open="preview"
previewBackground="#FFFFFF"></mavon-editor>
</el-card>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>详情 - HTML</span>
</div>
<div v-html="contentHtml"></div>
</el-card>
</div>
</template>
<script>
import MavonEditor from '@/components/MavonEditor';
export default {
components: {
MavonEditor
},
data(){
return {
content: '# This is Test.',
contentHtml: ''
};
},
methods: {
change(v, html) {
console.log(v);
this.contentHtml = html;
},
imgUpload(pos, $file , $vm) {
var formdata = new FormData();
formdata.append('image', $file);
console.log(pos, $file, formdata);
/*
// ajax 上传
const _this = this;
request({
url: _this.imgUpload,
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
// data 就是img 的 url 地址
$vm.$img2Url(pos, data);
}).catch(err => {
console.log(err);
}); */
$vm.$img2Url(pos, 'http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png');
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# 卸载
如果你不需要此组件，然后代码打包感觉不需要，可以卸载此组件。
1、CMD 运行
npm uninstall mavon-editor
1
2、删除组件文件目录 MavonEditor (opens new window)
← tui-editor CKEditor →