react富文本编辑框（react-draft-wysiwyg）的引用

(1)下载
yarn add react-draft-wysiwyg draftjs-to-html
(2)创建组件rich-text-editor.jsx:
import React, { Component } from ‘react’
import { EditorState, convertToRaw } from ‘draft-js’
import { Editor } from ‘react-draft-wysiwyg’
import draftToHtml from ‘draftjs-to-html’
import ‘react-draft-wysiwyg/dist/react-draft-wysiwyg.css’

export default class RichTextEditor extends Component {
state = {
editorState: EditorState.createEmpty(),//创建了空的编辑对象
}

onEditorStateChange= (editorState) => {
this.setState({
editorState,
})
}

getDetail= ()=>{
const { editorState } = this.state
return draftToHtml(convertToRaw(editorState.getCurrentContent()))
}

render() {
const { editorState } = this.state
return (

<Editor
editorState={editorState}
wrapperClassName=“demo-wrapper”
editorClassName=“demo-editor”
editorStyle={{border:‘1px solid black’,minHeight:200,paddingLeft:10}}
onEditorStateChange={this.onEditorStateChange}
/>

)
}
}
(3)引入使用
import RichTextEditor from ‘./rich-text-editor’