官网文档地址
首先安装 npm i wangeditor --save
使用
<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>import E from 'wangeditor'onReady() {this.initEditor()
},/*** 初始化富文本编辑器*/
initEditor() {editor = new E('#div1')editor.config.zIndex = 0editor.config.onblur = newHtml => {this.formData.content = newHtml // 获取最新的 html 内容}editor.create()
},
效果
上传本地图片
initEditor() {editor = new E('#div1')editor.config.zIndex = 0editor.config.onblur = newHtml => {this.formData.content = newHtml // 获取最新的 html 内容}// 本地上传图片editor.config.customUploadImg = function(resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后,插入到编辑器的方法resultFiles.forEach(async file => {let filePath = URL.createObjectURL(file)let cloudPath = file.nameconst result = await uniCloud.uploadFile({filePath,cloudPath});// 上传图片,返回结果,将图片插入到编辑器中insertImgFn(result.fileID)})}editor.create()},