React 18.2.0集成CKEditor5失败，编辑器返回null求助

问题概述 #

在React 18.2.0项目中按官方文档集成CKEditor5后，编辑器无法正常初始化：onReady回调打印的editor为null，工具栏完全不显示，控制台抛出错误。

相关代码 #

CreateProduct.jsx

import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// ...其他业务代码
<div>
    <CKEditor
        editor={ClassicEditor}
        data="<p>Hello World</p>"
        onReady={editor => {
            console.log(editor)
        }}
        onChange={(event, editor) => {
            console.log(editor.getData())
        }}
        onBlur={(event, editor) => {}}
        onFocus={(event, editor) => {}}
    />
</div>
// ...其他业务代码

export default CreateProduct;

if (document.getElementById('createProduct')) {
    const container = document.getElementById('createProduct');
    const root = createRoot(container);
    root.render(
        <React.StrictMode>
            <CreateProduct />
        </React.StrictMode>
    );
}

package.json依赖片段

"devDependencies": {
    "@babel/preset-react": "^7.13.13",
    "@ckeditor/ckeditor5-build-classic": "^34.2.0",
    "@ckeditor/ckeditor5-react": "^5.0.2",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@popperjs/core": "^2.10.2",
    "@table-library/react-table-library": "^4.0.10",
    "@tailwindcss/forms": "^0.5.2",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "check-npm": "^1.0.0",
    "formik": "^2.2.9",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.19",
    "postcss": "^8.4.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "sweetalert2": "^11.4.23",
    "sweetalert2-react-content": "^5.0.1",
    "tailwindcss": "^3.1.6",
    "yup": "^0.32.11"
}

错误与页面表现 #

• 控制台错误：
• 页面表现：仅显示编辑器内容区域，工具栏完全缺失：

解决方案 #

1. 修复版本兼容性 #

当前使用的@ckeditor/ckeditor5-react@5.0.2对React 18支持不完善，升级到最新适配版本：

npm install @ckeditor/ckeditor5-react@latest

同时同步升级CKEditor构建包：

npm install @ckeditor/ckeditor5-build-classic@latest

2. 临时禁用React StrictMode #

React 18的StrictMode会触发组件双重渲染，干扰CKEditor初始化逻辑。可先移除StrictMode测试：

root.render(
    <CreateProduct />
);

若恢复正常，后续可通过自定义CKEditor包装组件处理，或等待官方兼容更新。

3. 调整Laravel Mix打包配置 #

由于项目使用Laravel Mix，需添加配置确保CKEditor资源正确解析。在webpack.mix.js中添加：

const path = require('path');
const { CKEditorPostCSSConfig } = require('@ckeditor/ckeditor5-dev-utils');

mix.webpackConfig({
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')]
    },
    module: {
        rules: [
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
                use: ['raw-loader']
            },
            {
                test: /ckeditor5-[^/]+\/theme\/.+\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: CKEditorPostCSSConfig
                        }
                    }
                ]
            }
        ]
    }
});

安装所需依赖：

npm install raw-loader style-loader postcss-loader @ckeditor/ckeditor5-dev-utils --save-dev

4. 手动引入CKEditor样式 #

若打包后样式未加载，在组件中手动引入：

// 可选：引入中文语言包
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
// 引入编辑器核心样式
import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';

内容的提问来源于stack exchange，提问作者Emmanuel Joshua