如何无报错将CKEditor集成到React应用？初始化报错求助

错误分析 #

你遇到的两类错误本质都是编辑器初始化过程中依赖缺失或版本不兼容导致的：

• Cannot read properties of null (reading 'getAttribute')：Bold/Italic等工具栏按钮的图标渲染依赖核心UI模块，源码构建时未引入该模块，导致IconView无法正常初始化。
• Cannot read properties of null (reading 'model')：编辑器实例初始化失败，多数由CKEditor各模块版本不匹配或核心依赖缺失引发。

具体解决方法 #

方法1：补全源码构建所需的核心依赖 #

从源码构建CKEditor时，必须引入UI和图标模块才能正常渲染工具栏：

1. 修改插件导入代码，新增核心UI与图标模块：

import './ContentCreator.css';

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
// 新增核心UI与图标模块
import { Toolbar } from '@ckeditor/ckeditor5-ui';
import { Icons } from '@ckeditor/ckeditor5-icons';

2. 更新编辑器配置的插件列表：

const editorConfiguration = {
    plugins: [ Essentials, Bold, Italic, Paragraph, Toolbar, Icons ],
    toolbar: [ 'bold', 'italic' ]
};

方法2：统一所有CKEditor模块版本 #

版本不兼容是初始化失败的高频原因，确保所有@ckeditor/ckeditor5-*系列包版本完全一致：

1. 查看package.json中的依赖版本，确保所有CKEditor相关包版本号相同（例如均为^41.0.0）。
2. 执行命令统一版本（以41.0.0为例）：

npm install @ckeditor/ckeditor5-editor-classic@41.0.0 @ckeditor/ckeditor5-essentials@41.0.0 @ckeditor/ckeditor5-basic-styles@41.0.0 @ckeditor/ckeditor5-paragraph@41.0.0 @ckeditor/ckeditor5-ui@41.0.0 @ckeditor/ckeditor5-icons@41.0.0

方法3：切换为官方预构建版本（快速替代） #

若不想处理源码构建的依赖问题，直接使用预构建包更稳定：

1. 卸载当前源码依赖：

npm uninstall @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-ui @ckeditor/ckeditor5-icons

2. 安装预构建的ClassicEditor：

npm install @ckeditor/ckeditor5-build-classic

3. 修改代码导入部分：

import './ContentCreator.css';

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
// 替换为预构建版本
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// 预构建包已包含基础插件，配置可简化
const editorConfiguration = {
    toolbar: [ 'bold', 'italic' ]
};

验证 #

修改后启动React应用，若控制台正常打印Editor is ready to use!及编辑器实例，说明问题已解决。

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