React使用braft-editor富文本编辑器（实现双向绑定，避开无限循环）

今天在React项目中使用了braft-editor富文本编辑器，发现官方文档只有类组件，没有函数组件的写法。今天分享一个封装好的纯函数组件，以及实现双向绑定，避免无限循环。

一、braft-editor富文本的安装

//npm安装
npm install braft-editor --save

//yarn安装
yarn add braft-editor --save

二、braft-editor的封装

• 使用ref,取BraftEditor 实例的变量和方法，双向绑定中用到。
• value和onChange在使用时传入，由这两个实现双向绑定

import React, { useEffect, memo, useRef } from 'react';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import './index.less'

const MyEditor = memo((props) => {
        const ref = useRef(null)
        const {
                value,
                onChange,
                placeholder = '在此处输入内容',
        } = props;

        const handleChange = val => {
                onChange(val);
                console.log('val: ', val);
        };

        useEffect(() => {
                ref.current.onChange(BraftEditor.createEditorState(value ?? null))
        }, [])

        return (
                <BraftEditor
                        {...props}
                        ref={ref}
                        value={value}
                        onChange={handleChange}
                        contentStyle={{ height: 400 }}
                        style={{ border: '1px solid #d9d9d9', marginBottom: '20px' }}
                        placeholder={placeholder}
                />
        );
});

export default MyEditor;

三、braft-editor的使用

excludeControlsConfig、imageControlsConfig、extendControlsConfig这三个是工具栏的配置，这里不展开说明，可以再官方文档看里面的具体含义。
官方文档：https://www.yuque.com/braft-editor/be/gz44tn#1xv9po

import MyEditor from './myEditor/index.js' 

const onChange =(val)=>{
	console.log(val,'val')
}
//不需要的操作工具
const excludeControlsConfig = ['emoji', 'superscript', 'subscript', 'strike-through', 'media', 'blockquote', 'remove-styles', 'code', 'fullscreen'];
const imageControlsConfig = ['align-left', 'align-center', 'align-right', 'size',
    {
        text: <Icon type='delete' />,
        onClick: (block, mediaData) => { this.removeFile(mediaData.name, 'image', block, mediaData.url) }
    }
]

const extendControlsConfig = [
    {
        key: 'custom-modal',
        type: 'button',
        text: '上传文件',
        // onClick: UploadTemplateModal.show
    }
]

<MyEditor
      value={value}
      className={className}
      onChange={(v) => onChange(v.toHTML())}
      excludeControls={excludeControls}
      imageControls={imageControls}
      extendControls={extendControls}
 />

四、braft-editor的避坑

1、 问题：若是BraftEditor.createEditorState(value)去初始化传进来的值，则会进入无限循环。

代码：

错误提示：值会无限改变，直到超出栈

2、解决方案：通过ref去获取富文本实例BraftEditor，再使用加载时调用onChange事件，将初始化的value通过onChange事件加入文本中，这样就解决了无限循环问题，实现绑定。