react 使用富文本编辑器

1、先安装依赖

npm install wangeditor

2、在文件入口引入，并定义一个变量

import E from 'wangeditor'   // 引用
let aEditor

3、创建方法

// wangeditor编辑器
		const elemMenu = this.refs.editorElemMenu;
		const elemBody = this.refs.editorElemBody;
		const editor = new E(elemMenu,elemBody)
        // 变量赋值
		aEditor= editor
		// 使用 onchange 函数监听内容的变化，并实时更新到 state 中
		// editor.customConfig.onchange = html => {
		// 	// // console.log(editor.txt.html())
		// 	this.setState({
		// 		// editorContent: editor.txt.text()
		// 		editorContent: editor.txt.html()
		// 	})
		// }
		editor.customConfig.menus = [
			'head',  // 标题
			'bold',  // 粗体
			'fontSize',  // 字号
			'fontName',  // 字体
			'italic',  // 斜体
			'underline',  // 下划线
			'strikeThrough',  // 删除线
			'foreColor',  // 文字颜色
			'backColor',  // 背景颜色
			'link',  // 插入链接
			'list',  // 列表
			'justify',  // 对齐方式
			'quote',  // 引用
			'emoticon',  // 表情
			'table',  // 表格
			'image',  // 插入图片
			'video',  // 插入视频
			'code',  // 插入代码
			'undo',  // 撤销
			'redo'  // 重复
		]
		// editor.customConfig.uploadImgShowBase64 = true
		// editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
		editor.customConfig.uploadImgServer = '上传图片链接';  // 上传图片到服务器
		
		// 3M，限制图片大小
		editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
		// 限制一次最多上传 5 张图片
		editor.customConfig.uploadImgMaxLength = 5;
		// 自定义文件名
		editor.customConfig.uploadFileName = 'file';
		
		// 将 timeout 时间改为 3s
		editor.customConfig.uploadImgTimeout = 5000;
		editor.customConfig.uploadImgHooks = {
			before: function (xhr, editor, files) {
				// 图片上传之前触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
		
				// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
				// return {
				//     prevent: true,
				//     msg: '放弃上传'
				// }
				// alert("前奏");
			},
			success: function (xhr, editor, result) {
				// console.log('成功',result)
				// 图片上传并返回结果，图片插入成功之后触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
				// var url = result.url;
			},
			fail: function (xhr, editor, result) {
				// 图片上传并返回结果，但图片插入错误时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
				// alert("失败");
			},
			error: function (xhr, editor) {
				// 图片上传出错时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
				// alert("错误");
			},
			// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
			// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
			customInsert: function (insertImg, result, editor) {
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				var url = result.url;
				insertImg(url);
				// result 必须是一个 JSON 格式字符串！！！否则报错
			}
		};
		editor.create()

5、界面样式

<div className="text-area" >
	<div ref="editorElemMenu"
	    style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
		className="editorElem-menu">
         </div>
	<div style={{ padding:"0 10px", height: 350 }}
	      ref="editorElemBody" className="editorElem-body">
	</div>
</div>

6、获取富文本编辑器内容

let html = aEditor.txt.html()

7、清空富文本编辑器

aEditor.txt.clear();