vue中引入wangEditor富文本编辑器

npm i wangeditor --save

 引用：

import E from "wangeditor";

页面使用：

<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();
}
}

最后

以上就是伶俐柜子为你收集整理的vue中引入wangEditor富文本编辑器的全部内容，希望文章能够帮你解决vue中引入wangEditor富文本编辑器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。