CKEditor 5 Classic版工具栏按钮图标缺失问题求助

以下是几种可行的解决方式，按优先级尝试：

1. 手动导入CKEditor样式文件 #

在你的App.js顶部添加CKEditor的样式导入，确保图标字体和样式被正确加载：

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// 新增这行样式导入
import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';

class App extends Component {
    // ... 原有代码不变
}

2. 修复资源路径问题（生产构建场景） #

如果是生产构建后出现该问题，在package.json中添加homepage字段，确保资源路径正确：

{
  "name": "ckeditor",
  "version": "0.1.0",
  "private": true,
  "homepage": ".", // 新增此行
  "dependencies": {
    // ... 原有依赖不变
  }
}

添加后重新执行npm run build部署。

3. 清除缓存并重新安装依赖 #

删除项目中的node_modules文件夹和package-lock.json文件，然后重新安装依赖：

rm -rf node_modules package-lock.json
npm install
npm start

原因说明 #

工具栏图标空白但功能正常，本质是CKEditor的图标字体资源未被正确加载或路径错误，导致浏览器无法渲染图标，仅显示占位方块。以上方法分别从样式导入、路径配置、依赖缓存三个维度解决这类资源加载问题。

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