仓库地址:https://github.com/hinesboy/mavonEditor
安装
npm install mavon-editor --save
引用
main.js
:
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
index.html
<div id="main">
<mavon-editor
v-model="markdown"
:boxShadow="false"
:subfield="true"
placeholder="开始写文章吧"
:toolbars="toolbars"
@change="mdChange"
style="
z-index: 999;
border: 1px solid #d9d9d9;
height: 600px;
margin-bottom: 20px;
"
/>
</div>
配置
<script>
export default {
data() {
return {
markdown: "# 正文",
mdHtml: "",
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: false, // 保存(触发events中的save事件)
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
},
};
},
methods: {
mdChange(str, html) {
this.mdHtml = html;
},
},
};
</script>
<mavon-editor
v-model="article.md"
:boxShadow="false"
:toolbarsFlag="false"
:subfield="false"
defaultOpen="preview"
style="z-index: 3; margin-bottom: 20px"
/>
name 方法名 | params 参数 | describe 描述 |
---|---|---|
change | String: value , String: render | 编辑区发生变化的回调事件(render: value 经过markdown解析后的结果) |
save | String: value , String: render | ctrl + s 的回调事件(保存按键,同样触发该回调) |
fullScreen | Boolean: status , String: value | 切换全屏编辑的回调事件(boolean: 全屏开启状态) |
readModel | Boolean: status , String: value | 切换沉浸式阅读的回调事件(boolean: 阅读开启状态) |
htmlCode | Boolean: status , String: value | 查看html源码的回调事件(boolean: 源码开启状态) |
subfieldToggle | Boolean: status , String: value | 切换单双栏编辑的回调事件(boolean: 双栏开启状态) |
previewToggle | Boolean: status , String: value | 切换预览编辑的回调事件(boolean: 预览开启状态) |
helpToggle | Boolean: status , String: value | 查看帮助的回调事件(boolean: 帮助开启状态) |
navigationToggle | Boolean: status , String: value | 切换导航目录的回调事件(boolean: 导航开启状态) |
imgAdd | Number: pos, File: imgfile | 图片文件添加回调事件(pos: 图片在列表中的位置, File: File Object) |
imgDel | Array(2):[Number: pos,File:imgfile ] | 图片文件删除回调事件(Array(2): 两个元素的数组,第一位是图片的URL,第二位是File对象) |
默认图片上传的会转成base64字符串,这样会影响加载的性能,建议图片进行上传到服务器上。
<template>
<mavon-editor ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
<script>
export default {
data() {
return {
markdown: "# 正文",
mdHtml: "",
};
},
methods: {
$imgAdd(pos, $file) {
let uploadBase = "http://localhost:8080/";
let formdata = new FormData();
formdata.append("file", $file);
axios({
url: uploadBase + "file/upload",
method: "post",
data: formdata,
headers: { "Content-Type": "multipart/form-data" },
}).then((res) => {
if (res.status === 200) {
let url = uploadBase + res.data.obj;
this.$refs.md.$img2Url(pos, url);
}
});
},
$imgDel(pathArr) {
console.info(pathArr[0]);
},
}
}
</script>
注意
$imgDel
方法中pathArr是一个长度为2的数组,第一位保存的是图片的URL,第二个保存的是File对象。 可以在这个事件中删除已上传服务器上的文件。