braft-editor富文本编辑器（React-hooks）

基本写法---富文本组件

import React, { ReactElement, useEffect, useState } from 'react'
import { PictureOutlined } from '@ant-design/icons/lib'
import { ContentUtils } from 'braft-utils'
import BraftEditor from 'braft-editor'
import { Button, Upload } from 'antd'
import 'braft-editor/dist/index.css'

import { simpleUpload } from '../../utils/MultipartUploadService'
import { UPLOAD } from '../../constants/api'

export default function TextEdit (): ReactElement {

    // 设置编辑器初始内容
    const [editorState, setEditorState] = useState(BraftEditor.createEditorState(''))

    // 编辑内容触发
    const handleChange = (editorState: any): void => {
        setEditorState(editorState)
    }

    // 上传图片获取URL，此图片是上传（阿里云）之后拿地址放到编辑器内容里的
    const uploadHandler = (param: any): any => {

        if (!param.file) {
            return false
        }
        simpleUpload(
            UPLOAD,
            param.file,
            (result: any) => {
                const { code, data } = result
                if(code === 0) {
                    setEditorState(ContentUtils.insertMedias(editorState, [{
                        type: 'IMAGE',
                        url: data.url
                    }]))
                }
            }
        )
    }
    const extendControls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link',
        {
            key: 'antd-uploader',
            type: 'component',
            component: (
                <Upload
                    accept='image/*'
                    showUploadList={false}
                    customRequest={uploadHandler}
                >
                    <Button className='control-item button upload-button' data-title='插入图片'>
                    <PictureOutlined />
                    </Button>
                </Upload>
            )
        }]
    return <BraftEditor
        contentStyle={{ height:305 }}
        value={editorState}
        excludeControls={['media', 'emoji']}
        extendControls={extendControls}
        onChange={handleChange}
    />
}

注：1、提交时可以用 .toHTML()，把值换成字符串

2、编辑回显时用BraftEditor.createEditorState(值)，将字符串转换成EditorState类型

3、字符串类型的HTML，在页面渲染时可以用React的一个标签属性---dangerouslySetInnerHTML，如：<div dangerouslySetInnerHTML={{ __html: 值 }} />