import React from 'react';
import E from 'wangeditor'

/**
 * @param {*} props
 * @returns
 */
class Wangedit extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      html: undefined,
    }
    this.editor = undefined;
  }

  render() {
    return (
      <div ref="editorElem" style={{ textAlign: 'left' }}>
      </div>
    );
  }

  componentDidMount() {
    const elem = this.refs.editorElem
    this.editor = new E(elem)
    // 使用 onchange 函数监听内容的变化
    this.editor.customConfig.onchange = html => {
      this.setState({ html })

      if (typeof this.props.onChange === 'function') {
        this.props.onChange(html)
      }
    }
    this.editor.customConfig.zIndex = 100
    this.editor.create()
    this.editor.txt.html(this.props.value)
  }

  componentDidUpdate(props, state) {
    if (this.props.value && !state.html) {
      if (this.editor) {
        this.editor.txt.html(this.props.value)
      }
    }
  }
}

export default Wangedit

