react中引入富文本编辑器wangeditor，react打包项目直接运行文件

1、安装

yarn add wangeditor --save-dev

2、引入并使用

代码：

import E from 'wangeditor'

<div className="text-area" >
                        <div ref="editorElemMenu" className="editorElem-menu"></div>
                        <div ref="editorElemBody" className="editorElem-body"></div>
                    </div>

 componentDidMount() {
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody;
        const editor = new E(elemMenu,elemBody)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            console.log(editor.txt.text())
            this.setState({
                // editorContent: editor.txt.text()
                editorContent: editor.txt.html()
            })
        }
        editor.customConfig.menus = []
        editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    }

下图是代码截图：

react中引入富文本编辑器wangeditor，react打包项目直接运行文件

3、注意事项

由于我的项目使用的是electron打包，项目直接在浏览器中使用的时候，以上代码已经支持输入法中的一些emoji表情显示，但是在electron打包下不能用，原因：

loginWindow.loadURL('http://localhost:3000/index.html?sjs='+ new Date().getTime() +'/#/')

主窗口打开的是服务器上的网页，导致输入法打的表情不能正常显示。

解决方案：

 loginWindow.loadURL(url.format({
        pathname: path.join(__dirname, './build/index.html'),
        protocol: 'file:',
        slashes: true
    }))

对开发调试好的文件，进行文件打包。

若是单纯的打包，是不能运行的，需要将静态文件变为相对路径：

package.json文件中：

新增

"homepage": ".",

react中引入富文本编辑器wangeditor，react打包项目直接运行文件

此时，再执行npm run build,打包好的文件可以直接执行。