react 富文本编辑器

最新推荐文章于 2025-12-05 11:49:38 发布

原创

最新推荐文章于 2025-12-05 11:49:38 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #html

本文介绍如何在React项目中集成富文本编辑器，通过引入react-draft-wysiwyg库，配合draft-js和draftjs-to-html进行内容的编辑与转换。同时，还涉及到html-to-draftjs用于HTML到draft-js格式的转换。在样式配置上，文章提到了style.js文件的应用。

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)
			conso