vue中引入wangEditor富文本编辑器

75 阅读 0 评论 50 点赞

我是靠谱客的博主伶俐柜子，这篇文章主要介绍vue中引入wangEditor富文本编辑器，现在分享给大家，希望可以做个参考。

npm i wangeditor --save

引用：

复制代码

1
import E from "wangeditor";

页面使用：

复制代码

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
<div id="editor"></div>
export default {
data(){
content:""
},
mounted(){
this.content = new E('#editor');
// 自定义菜单配置
this.content.config.menus=[
'head',
// 标题
'bold',
// 粗体
'image',
// 插入图片
'undo',
// 撤销
'redo'
// 重复
]
// 配置 onchange 回调函数，将数据同步到 vue 中
this.content.config.onchange = (newHtml) => {
console.log(newHtml,"newHtml");
this.content = newHtml;
};
// 图片格式base64
this.content.config.uploadImgShowBase64 = true;
// 隐藏网络图片
this.content.config.showLinkImg = false;
this.content.config.uploadImgMaxSize = 5 * 1024 * 1024; // 5M
this.content.create();
this.content.txt.html();
}
}