先用vue可视化图形界面创建一个vue项目
安装依赖:
npm install mavon-editor --save
在main.js当中输入代码:
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
新建一个Test.vue:
<template>
<div>
<mavon-editor
v-model="context"
@imgAdd="$imgAdd"
@imgDel="$imgDel"
:toolbars="toolbars"
/>
</div>
</template>
<script>
export default {
data() {
return {
context: " ", //输入的数据
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
mark: true, // 标记
superscript: true, // 上角标
quote: true, // 引用
ol: true, // 有序列表
link: true, // 链接
imagelink: true, // 图片链接
help: true, // 帮助
code: true, // code
subfield: true, // 是否需要分栏
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
/* 1.3.5 */
undo: true, // 上一步
trash: true, // 清空
save: true, // 保存(触发events中的save事件)
/* 1.4.2 */
navigation: true, // 导航目录
},
};
},
methods: {
// 绑定@imgAdd event
$imgAdd() {
console.log("添加图片");
},
$imgDel() {
console.log("删除图片");
},
},
};
</script>
在路由文件中routes加入:
{
path: '/test',
name: 'test',
component: Test
}
效果图: