与React集成

创建React应用

使用create-react-app创建React应用，名为：doceditor-react-demo。

npx create-react-app doceditor-react-demo

创建完成后，切换到新创建的目录。

cd doceditor-react-demo

安装@o2oa/doceditor

使用以下命令安装@o2oa/doceditor：

#npm全局安装
npm install @o2oa/doceditor

#或yarn安装
yarn add @o2oa/doceditor

配置React打包插件

由于我们需要将@o2oa/doceditor中的public目录部署到输出目录，所以要为React的webpack配置增加一个copy-webpack-plugin插件。

要修改create-react-app创建的React应用的webpack，可以使用：npm run eject 来将封装在 CRA 中的配置全部反编译到当前项目，就可以修改webpack配置了。但这个方法会对后续的升级带来影响，所以我们可以使用react-app-rewired来修改webpack配置。

首先，安装react-app-rewired：

npm i -D react-app-rewired

然后安装copy-webpack-plugin插件：

npm i -D copy-webpack-plugin

然后在根目录创建一个config-overrides.js文件：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = function override(config, env) {
    if (!config.plugins) {
        config.plugins = [];
    }
    //添加一个webpack插件，将@o2oa/doceditor的public目录部署到输出目录的doceditor/public下
    config.plugins.push(
        new CopyWebpackPlugin({
            patterns:  [
                {
                  from: "node_modules/@o2oa/doceditor/editor/public",
                  to: "doceditor/public"
                }
            ]
        })
    );

    return config;
}

最后，修改package.json文件的script:

...
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}
...

创建组件

接着我们创建一个组件，用于调用DocEditor。我们在src/目录下创建一个文件：MyDocEditor.js

import React from 'react';
import DocEditor from '@o2oa/doceditor';

export default class MyDocEditor extends React.Component {
    constructor(props) {
        super(props);
        this.setDivRef = element => {
            this.editorContent = element;
        };
    }
    async componentDidMount() {
        if (!this.editor) this.editor = DocEditor.createEditor(this.editorContent, {
            //我们在打包配置中将public目录输出到了 doceditor/public，
            //所以此处需要配置为'./doceditor/' 或 'doceditor/'
            base: "./doceditor/"
        }).load();
    }
    render() {
        return (
            <div ref={this.setDivRef} />
        );
    }
}

使用MyDocEditor组件

修改index.js文件，引入MyDocEditor，并在渲染函数中增加<MyDocEditor>标签:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import MyDocEditor from './MyDocEditor';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <MyDocEditor />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

适当修改了App.css中的样式，去掉了.App-header中的min-height: 100vh;

然后我们可以使用 npm run start来运行应用：

npm run start

运行结果如下：

在线运行

您可以在在线编辑器中尝试DocEditor与React的集成：在线运行本样例