在react中使用富文本编辑器 react+wangeditor

前言

近日在使用react写项目的过程中需要使用到富文本编辑器，之前使用的一直是百度富文本框，这次想换一个，于是看到了一个比较轻量级的富文本编辑器：wangeditor ，正好也满足我当前所需要的需求，所以就决定使用这款编辑器了。这篇文章给了我很大的帮助，感谢作者：react中引入富文本编辑器wangeditor，react打包项目直接运行文件，话不多说，进入正题

第一步

先npm导入wangEditor：

npm install wangeditor --save

第二步

引入wangeditor包：

import E from 'wangeditor'

第三步

创建render函数：

render() {
   
        return (
            <div className="shop">
                <div className="text-area" >
                    <div ref="editorElemMenu"
                         style={
   {
   backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
                         className="editorElem-menu">

                    </div>
                    <div
                        style={
   {
   
                            padding:"0 10px",
                            overflowY:"scroll",
                            height:300,
                            border:"1px solid #ccc",
                            borderTop:"none"
                        }}
                        ref="editorElemBody" className="editorElem-body">

                    </div>
                </div>
            </div>
        );
    }

第四步

    constructor(props) {
   
        super(props);
        this.state = {
   
            editorContent:''
         };
    }

第五步

在组件渲染完毕（componentDidMount）之后实例化编辑器：

componentDidMount() {
   
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody