富文本编辑器在react中的使用----自定义图片上传

开发背景

react + antd + wangeditor

开发流程

安装富文本编辑器

npm i wangeditor --save

页面中初始化编辑器容器

componentDidMount() {
	this.initEditor ()
}

// 初始化编辑器
initEditor = (content) => {
	const editor = new E('#editor')  // jsx中创建id为editor的div容器
	editor.config.height = 160 // 设置高度

	// 通过base64显示图片
	// editor.config.uploadImgShowBase64 = true

	// 自定义上传图片到后端返回url, 插入到编辑器中
	editor.config.customUploadImg = function (resultFiles, insertImgFn) {
	
		const formData = new FormData();
		// 组装接口需要的字段，根据自己后端需要的字段传哦~
		formData.append('name', resultFiles[0]['name'])
		formData.append('type', resultFiles[0]['type'])
		formData.append('lastModifiedDate', resultFiles[0]['lastModifiedDate'])
		formData.append('size', resultFiles[0]['size'])
		formData.append('upfile', resultFiles[0])
		
		// 调用后端上传图片接口，返回url，
		ueditorUploadImage(formData).then(res => {
		//  通过insertImgFn插入富文本编辑器中
			if (res.url) insertImgFn(res.url)
		})
	}

	// 创建并在页面中渲染编辑器
	editor.create()

	// 追加内容，放在create之后
	if (content) editor.txt.append(content)
}

展示效果