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富文本编辑器内容请搜索靠谱客的其他文章。