Umi4配置Ueditor

在使用 Umi4 配置 Ueditor 之前，需要先安装 Umi4 和 Ueditor。

1. 安装 Umi4

npm install -g umi

2. 安装 Ueditor

npm install ueditor --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: {
    'UE': 'window.UE',
  },
};

4. 在需要使用 Ueditor 的页面中，使用 import 引入 Ueditor 组件，并在 componentDidMount 中引入 Ueditor：

import React, { Component } from 'react';
import 'ueditor/ueditor.config.js';
import 'ueditor/ueditor.all.min.js';
import 'ueditor/lang/zh-cn/zh-cn.js';

class MyEditor extends Component {
  componentDidMount () {
    const { editorId } = this.props;
    if (editorId) {
      window.UE = window.UE || {};
      window.UE.delEditor(editorId);
      window.UE.getEditor(editorId, {
        initialFrameWidth: '100%',
        initialFrameHeight: 500,
        autoHeightEnabled: false,
        autoFloatEnabled: true,
      });
    }
  }

  render () {
    const { editorId } = this.props;
    
    return (
      <div>
        {editorId && <div id={editorId}></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="my-ueditor" />
      </div>
    );
  }
}

export default MyPage;

这样，就可以在 Umi4 项目中使用 Ueditor 了。需要注意的是，使用 Ueditor 需要进行一些配置和调整，如设置编辑器的宽度、高度、语言等。同时，由于 Ueditor 依赖一些全局变量和样式，需要在使用之前进行引入。