只需2步uniapp集成富文本编辑器wangEditor4

官网文档地址

首先安装 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 = 0
	editor.config.onblur = newHtml => {
			this.formData.content = newHtml // 获取最新的 html 内容
	}
	editor.create()
},

效果

 上传本地图片

			initEditor() {
				editor = new E('#div1')
				editor.config.zIndex = 0
				editor.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.name

						const result = await uniCloud.uploadFile({
							filePath,
							cloudPath
						});
						// 上传图片，返回结果，将图片插入到编辑器中
						insertImgFn(result.fileID)
					})
				}
				editor.create()
			},