react 富文本编辑器

yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs

import { Component } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { EditorState, convertToRaw, ContentState } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import { DepartmentPage } from './style'
class YaEditor extends Component {
	state = {
		editorState: EditorState.createEmpty(),
	}
	
	//在富文本编辑中输入的同时改变状态
	onEditorStateChange = (editorState) => {
		this.setState({
			editorState,
		})
	}

	componentDidMount() {
		const html = '<p>Hey this <strong>editor</strong> rocks 😀</p>'
		// 数据回显函数，将html转换为富文本文字
		const contentBlock = htmlToDraft(html)
		if (contentBlock) {
			const contentState = ContentState.createFromBlockArray(
				conte