braft-editor編輯器的使用

一、

import React, { Component } from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default class Main extends Component {

  state = {
    editorState: BraftEditor.createEditorState('<p>初始值</p>'), // 設置編輯器初始內容
    outputHTML: '<p></p>' // 編輯器輸出內容
  }

  componentDidMount () {
    this.setState({
      editorState: BraftEditor.createEditorState('<p>hello，<b>world!</b><p>')
    })
  }

  handleChange = (editorState) => {
    this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML()
    }, () => {
      console.log(editorState)
      console.log(this.state.outputHTML)
    })
  }

  render () {
    const { editorState, outputHTML } = this.state
    
    return (
      <div>
        <div className="editor-wrapper">
          <BraftEditor
            value={editorState}
            onChange={this.handleChange}
            style={{ height: 600,marginLeft: 100,marginRight: 100, overflow: "hidden" ,boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'}}
            contentStyle={{boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'}}
          />
        </div>
      </div>
    )
  }
}