import React from 'react'
import Editor from 'wangeditor'
import './index.less'
export default class wangeditor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      editorHtml: '',
      count: 0
    }
  }
  componentDidMount() {
    let self = this
    const editor = new Editor('#wangeditorDom')
    this.setState({ editor })
    editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb']
    editor.config.pasteText = true
    // 设置编辑区域高度为 500px
    editor.config.height = 200
    editor.config.showFullScreen = false
    editor.config.menus = [
      'bold',
      'foreColor',
      'italic',
      'indent',
      'link',
      'justify'
    ]

    // 注意，先配置 height ，再执行 create()
    // 注意，先配置 height ，再执行 create()
    editor.config.onchange = function (newHtml) {
      var text = editor.txt.text()
      if (text.length == 0) {
        //没有文字
        self.props.setEdittext('')
      }
      if (text.length > self.props.limitLength) {
        let str = text.slice(0, self.props.limitLength)
        self.setState({ editorHtml: str })
        editor.txt.html(str)
        self.props.setEdittext(str)
        return
      }
      self.setState({ count: text.length })
      self.setState({ editorHtml: newHtml })
      self.props.setEdittext(newHtml)
    }

    editor.create()
    //列表悬浮富文本
    editor.txt.html(this.props.text)
  }

  render() {
    return (
      <div className='countBox_par'>
        <div id='wangeditorDom' style={{ width: this.props.width }}></div>
        <p className='countBox'>
          {this.state.count + '/' + this.props.limitLength}
        </p>
      </div>
    )
  }
}