React v4官方推荐的富文本编辑器braft-editor使用

官方推荐使用两个编辑器其中一个，v5推荐另一个。以v4这个为例。

由于官方文档都是class类组件，使用时不太方便，所以下面是自己写的一个hook函数组件，只实现了基本使用，特殊化的暂未写出。

一、安装

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

二、引入

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

三、写Hook函数组件（子组件传递给父组件的值，利用props传递回调函数）

        封装的子组件

function EditorDemo(props,ref){
    // 创建初始值，若有编辑功能，父组件传递给子组件富文本编辑器，依据值来判断是否需要数据回显
    const [editorState, setEditorState] = useState(() => {
        if (props.value) {
            return BraftEditor.createEditorState(props.value);
        } else {
            return BraftEditor.createEditorState('');
        }
    });
    // 当富文本编辑器有值时触发，若不为空，则设置给editotState,返回给父组件html格式；若为空，则给'' 表单里添加必填字段
    const handleEditorChange = (editorState: any) => {
        if (!editorState.isEmpty()) {
              setEditorState({ editorState });
              const content = editorState.toHTML();
              props.setDetails(content);
        } else {
              props.setDetails('');
        }
  };
    // 返回组件 基本使用 未添加自定义控件和功能，如需，自行加入
    return (
        <div className='editor-wrapper' style={{ border: '1px solid #d1d1d1' }}>
          <BraftEditor
            value={editorState}
            onChange={handleEditorChange}
          />
        </div>

  );
}

export default EditorDemo

        父组件代码

// 引入子组件
import BraftEditor from './BraftEditor/index'

/**
 * 获取子组件富文本编辑器带标签的内容
 * 这里content 已经是子组件返回的值（带html标签的值）
 */
  const setDetails = (content: string) =>{
    // 下面一句代码 只是把当前子组件返回的值设置给表单name=invoicingRules的Item。然后点击提交时，获取内容
    formRef.current?.setFieldsValue({ invoicingRules: content });
  }


/**
 * 获得父组件的内容，子组件取拿
 */
  const getRules = ()=>{
    formRef.current?.getFieldValue('invoicingRules')
  }


// 这边表单只显示主要的代码块
<ProForm.Item label="开票规则" name="invoicingRules"  >
    <BraftEditor setDetails={setDetails} Rules={getRules}  />
</ProForm.Item>