react 富文本编辑器

最新推荐文章于 2025-03-28 09:15:50 发布

在座的各位都是菜杯

最新推荐文章于 2025-03-28 09:15:50 发布

阅读量2.3k

点赞数

文章标签： react.js javascript html

本文链接：https://blog.youkuaiyun.com/coderYYA/article/details/123077968

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章