一、下载安装
npm install mavon-editor
二、全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
三、使用
<template>
<div>
<mavon-editor
style="width: 100%; height: 100%"
aria-placeholder="开始编辑..."
v-model="context"
:toolbars="toolbars"
@change="changeFn"
@save="saveFn"
@imgAdd="imgAddFn"
language="zh"
navigation
ishljs
/>
</div>
</template>
<script>
export default {
name: "demoMarkDown",
data() {
return {
context: '',
html: '',
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,
table: true,
fullscreen: true,
readmodel: true,
htmlcode: true,
help: true,
undo: true,
redo: true,
trash: true,
save: true,
navigation: true,
alignleft: true,
aligncenter: true,
alignright: true,
subfield: true,
preview: true,
}
}
},
methods: {
changeFn(value, render) {
this.html = render
},
saveFn(e) {
console.log(e)
},
imgAddFn(filename, imgfile) {
console.log(filename, imgfile)
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
$vm.$img2Url(pos, url);
})
}
}
}
</script>
效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/a4498f858a1143918a1d0f6290cdeb5e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5paw5pe25Luj5Yac5rCR5belVG9w,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
API
props
name 名称 | type 类型 | default 默认值 | describe 描述 |
---|
value | String | | 初始值 |
language | String | zh-CN | 语言选择,暂支持 zh-CN: 简体中文, zh-TW: 正体中文 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语 |
fontSize | String | 14px | 编辑区域文字大小 |
scrollStyle | Boolean | true | 开启滚动条样式(暂时仅支持chrome) |
boxShadow | Boolean | true | 开启边框阴影 |
boxShadowStyle | String | 0 2px 12px 0 rgba(0, 0, 0, 0.1) | 边框阴影样式 |
transition | Boolean | true | 是否开启过渡动画 |
toolbarsBackground | String | #ffffff | 工具栏背景颜色 |
previewBackground | String | #fbfbfb | 预览框背景颜色 |
subfield | Boolean | true | true: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏) |
defaultOpen | String | | edit: 默认展示编辑区域 , preview: 默认展示预览区域 , 其他 = edit |
placeholder | String | 开始编辑… | 输入框为空时默认提示文本 |
editable | Boolean | true | 是否允许编辑 |
codeStyle | String | code-github | markdown样式: 默认github, 可选配色方案 |
toolbarsFlag | Boolean | true | 工具栏是否显示 |
navigation | Boolean | false、 默认展示目录 | |
shortCut | Boolean | true | 是否启用快捷键 |
autofocus | Boolean | true | 自动聚焦到文本框 |
ishljs | Boolean | true | 代码高亮 |
imageFilter | function | null | 图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法 |
imageClick | function | null | 图片点击事件,默认为预览,可覆盖 |
tabSize | Number | \t | tab转化为几个空格,默认为\t |
xssOptions | Object | null | xss规则配置,参考 https://github.com/leizongmin/js-xss |
toolbars | Object | 如下例 | 工具栏 |
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,
table: true,
fullscreen: true,
readmodel: true,
htmlcode: true,
help: true,
undo: true,
redo: true,
trash: true,
save: true,
navigation: true,
alignleft: true,
aligncenter: true,
alignright: true,
subfield: true,
preview: true,
}
events 事件绑定
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 | String: filename, File: imgfile | 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object) |
imgDel | String: filename | 图片文件删除回调事件(filename: 写在md中的文件名) |
官方文档: https://www.npmjs.com/package/mavon-editor