富文本编辑器

富文本编辑器

既然是搭建一个基于富文本编辑器的博客系统，那么就要用到富文本编辑器组件，这里我们选择BraftEditor。

使用npm安装到你的项目

cnpm install braft-editor --save

新建pages文件夹，并且在pages中新建文件夹RichText，在RichText中新建index.jsx，内容如下

import React, {useState} from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
function RichText(props) {
    const [editorState, setEditorState] = useState(BraftEditor.createEditorState("<p>123</p>"))
    const handleEditorChange = (editorState) => {
    }
    const handleEditorSave = (editorState) => {
    }
    return (
        <BraftEditor
            value={editorState}
            onChange={handleEditorChange}
            onSave={handleEditorSave}
        />
    )
}
export default RichText

我们在src下的index.js中引入该组件，并渲染到dom中

import React from 'react';
import ReactDOM from 'react-dom';
import RichText from './pages/RichText';
ReactDOM.render(<RichText />, document.getElementById("root"));

这时你使用yarn start或者npm start启动项目，在端口3000看到的页面应该是这样的

现在我们来看BraftEditor组件接收的三个props，分别是

• value
• onChange
• onSave

我们一个个来看。

首先看value，它是BraftEditor组件要显示的内容，它的值是一个editorState对象，我们可以通过BraftEditor.createEditorState()创建editorState对象，它接收html字符串或者一个raw对象(raw对象是它自定义的对象，一般我们保存富文本的内容就是保存raw对象)，也可以通过editorState实例转化为html字符串或者raw对象，如

// 创建edirorState对象
const editorState = BraftEditor.createEditor("<p>123</p>");
const htmlContent = editorState.toHTML();
const rawContent = editorState.toRAW();

再者来看onChange，它是当BraftEditor发生改变时调用的回调函数，它会传入一个editorState对象，这个editorState对象代表的就是当前的文本内容。

最后看onSave，它是当按下Ctrl + S保存时会调用的方法，也会将代表当前文本内容的editorState传入。

我们来做一个简单的案例，当按下Ctrl + S时，将数据以raw对象的格式保存在localStorage中，当富文本加载时，从localStorage中读取数据

import React, {useState, useEffect} from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
function RichText(props) {
    const [editorState, setEditorState] = useState(BraftEditor.createEditorState(null))
    useEffect(() => {
        const rawContent = localStorage.getItem("rawContent") || null;
        setEditorState(BraftEditor.createEditorState(rawContent))
    }, [])
    const handleEditorChange = (editorState) => {
    }
    const handleEditorSave = (editorState) => {
        const rawContent = editorState.toRAW();
        localStorage.setItem("rawContent", rawContent)
    }
    return (
        <BraftEditor
            value={editorState}
            onChange={handleEditorChange}
            onSave={handleEditorSave}
        />
    )
}
export default RichText

这里就增加了两个地方，第一个是增加了useEffect，作用是当组件挂载后从localStorage中读取数据(既然从localStorage初始化，那么原来的”

123