Umi4配置百度富文本

在使用 Umi4 配置百度富文本之前，需要先安装 Umi4 和百度富文本编辑器。

1. 安装 Umi4

npm install -g umi

2. 安装百度富文本编辑器

npm install braft-editor --save

3. 在 Umi4 项目的配置文件 config/config.js 中添加以下代码：

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: false,
      title: 'your app title',
      dll: false,
      routes: {
        exclude: [
          /models\//,
          /services\//,
          /components\//,
        ],
      },
    }],
  ],
  externals: {
    'BraftEditor': 'window.BraftEditor',
  },
};

4. 在需要使用百度富文本编辑器的页面中，使用 import 引入富文本组件，并在 componentDidMount 中引入百度富文本编辑器：

import React, { Component } from 'react';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

class MyEditor extends Component {
  componentDidMount () {
    const { editorId } = this.props;
    if (editorId) {
      window.BraftEditor = BraftEditor;
      require(`braft-editor/dist/${editorId}.min.css`);
      require(`braft-editor/dist/${editorId}.min.js`);
    }
  }

  render () {
    const { editorId } = this.props;
    
    return (
      <div>
        {editorId && <div id="editor"></div>}
      </div>
    );
  }
}

export default MyEditor;

5. 在需要使用富文本编辑器的页面中，使用 MyEditor 组件并传入 editorId 属性：

import React, { Component } from 'react';
import MyEditor from './MyEditor';

class MyPage extends Component {
  render () {
    return (
      <div>
        <MyEditor editorId="braft-editor" />
      </div>
    );
  }
}

export default MyPage;

这样，就可以在 Umi4 项目中使用百度富文本编辑器了。需要注意的是，使用不同的富文本编辑器可能需要进行不同的配置和调整。