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(
				contentBlock.contentBlocks
			)
			const editorState = EditorState.createWithContent(contentState)
			console.log(editorState)
			this.setState({
				editorState,
			})
		}
	}

	getRichText = (editorState) => {
		// 将富文本的字装换为html,用于发送给服务器保存
		const htmlStr = draftToHtml(
			convertToRaw(this.state.editorState.getCurrentContent())
		)

		console.log(htmlStr)
        return htmlStr
	}

	render() {
		const { editorState } = this.state
		return (
			<DepartmentPage>
				<Editor
					editorState={editorState}
					wrapperClassName="demo-wrapper"
					editorClassName="demo-editor"
					onEditorStateChange={this.onEditorStateChange}
				/>
				<textarea
					disabled
					value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
				/>
			</DepartmentPage>
		)
	}
}

export default YaEditor

style.js

import styled from 'styled-components'

export const DepartmentPage = styled.div`
	.demo-editor {
		height: 380px !important;
		border: 1px solid #f1f1f1 !important;
		padding: 5px !important;
		border-radius: 2px !important;
	}
`