最近在做项目时，客户有个发布新闻动态的功能，具体页面内容让客户自己编写，所以要选择富文本编辑器，这样用户体验好一点。网上有很多的富文本编辑器， 因为项目的功能并不是很复杂，所以选择了wangEditor，界面简洁，使用起来也挺方便的；
实现思路
1.安装wangEditor
2.封装成组件
3.父组件中直接调用
官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
一、wangEditor安装
这里使用npm命令安装；
npm install wangeditor
二、组件封装
2.1、创建组件
这里我们创建一个名为editor.vue的文件，并导入文件；
import E from "wangeditor"
2.2、初始化wangeditor
(1)我们创建一个初始化方法
(2)编写初始化代码
(3)在mounted()中调用
<!---html代码--> <div id="e" > </div>
js代码
initE() { this.editor = new E('#e') //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整 this. editor.customConfig.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'code', // 插入代码 'undo', // 撤销 'redo' // 重复 ] this.editor.create() }, mounted(){ this.initE() }
2.3、配置图片上传
this.editor.customConfig.uploadFileName = 'file' this.editor.customConfig.uploadImgServer = `url` // 你的服务器上传地址 this.editor.customConfig.uploadImgHooks = { before: function (xhr, editor, files) { // 图片上传之前触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 // return { // prevent: true, // msg: '放弃上传' // } }, success: function (xhr, editor, result) { // 图片上传并返回结果，图片插入成功之后触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, fail: function (xhr, editor, result) { // 图片上传并返回结果，但图片插入错误时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, error: function (xhr, editor) { // 图片上传出错时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, timeout: function (xhr, editor) { // 图片上传超时时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） customInsert: function (insertImg, result, editor) { // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： console.log(result.url) var url = result.url insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错 } }
