import React, { Component } from 'react';
import E from 'wangeditor'

class RichTextEditor extends Component {
    render() {
        return (
            <div className='richtexteditor' ref="editorElem"></div>
        );
    }
    componentDidMount() {
        const { content, onContentChange } = this.props;
        const elem = this.refs.editorElem;
        const editor = new E(elem);
        editor.customConfig.onchange = onContentChange; // 使用 onchange 函数监听内容的变化
        editor.customConfig.onfocus = () => {
            let toolbar = elem.getElementsByClassName('w-e-toolbar')[0];
            toolbar.style.display = 'flex';
        }; // 获得焦点时显示工具栏（需要计算位置）
        editor.customConfig.onblur = function (html) {
            let toolbar = elem.getElementsByClassName('w-e-toolbar')[0];
            toolbar.style.display = 'none';
        }
        editor.customConfig.uploadImgShowBase64 = true; // 上传图片（base64）
        editor.create()
        editor.txt.html(content);
    }
}

export default RichTextEditor;