CKEditor 5 自定义图标完全指南

最新推荐文章于 2025-06-07 16:43:38 发布

凌朦慧Richard

最新推荐文章于 2025-06-07 16:43:38 发布

阅读量271

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00235/article/details/148416410

版权

CKEditor 5 自定义图标完全指南

ckeditor5 具有模块化架构、现代集成和协作编辑等功能的强大富文本编辑器框架项目地址: https://gitcode.com/gh_mirrors/ck/ckeditor5

前言

在富文本编辑器的使用过程中，UI 图标是与用户交互最直接的视觉元素。CKEditor 5 提供了一套默认的图标系统，但开发者可能希望根据项目需求进行个性化定制。本文将深入讲解如何在 CKEditor 5 中自定义图标，提供两种主流方法及其详细实现步骤。

方法一：通过包管理器覆盖图标

1. 创建自定义图标包

首先需要创建一个独立的图标包项目：

在项目根目录外（通常与 src 目录同级）创建 my-custom-icons 文件夹
添加 package.json 文件，配置如下：

{
  "name": "my-custom-icons",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "main": "./dist/index.js"
}

从 node_modules/@ckeditor/ckeditor5-icons/dist/index.js 复制内容
在自定义包中创建 dist/index.js 并粘贴复制的内容

2. 修改图标内容

在 dist/index.js 中，你会看到类似如下的 SVG 图标定义：

export const icons = {
  bold: '<svg viewBox="0 0 20 20">...</svg>',
  italic: '<svg viewBox="0 0 20 20">...</svg>',
  // 更多图标...
};

你可以直接修改这些 SVG 字符串来替换图标。注意保持相同的 viewBox 和命名规范。

3. 覆盖默认图标包

根据不同的包管理器，配置方式有所不同：

npm 配置

{
  "dependencies": {
    "@ckeditor/ckeditor5-icons": "file:./my-custom-icons"
  },
  "overrides": {
    "@ckeditor/ckeditor5-icons": "$@ckeditor/ckeditor5-icons"
  }
}

Yarn Classic/Yarn Berry 配置

{
  "resolutions": {
    "@ckeditor/ckeditor5-icons": "link:./my-custom-icons"
  }
}

pnpm 配置

{
  "pnpm": {
    "overrides": {
      "@ckeditor/ckeditor5-icons": "link:./my-custom-icons"
    }
  }
}

配置完成后，运行对应的安装命令（npm install/yarn install/pnpm install）。

方法二：通过构建工具别名替换

这种方法更适合使用现代构建工具的项目，无需创建单独的包。

1. 准备自定义图标文件

复制 node_modules/@ckeditor/ckeditor5-icons/dist/index.js 到项目目录（如 src/icons.js），并删除底部的 sourcemap 注释。

2. 配置构建工具别名

Vite 配置

import { resolve } from 'path';

export default {
  resolve: {
    alias: {
      '@ckeditor/ckeditor5-icons/dist/index.js': resolve(import.meta.dirname, './src/icons.js')
    }
  }
};

Webpack 配置

import { resolve } from 'path';

export default {
  resolve: {
    alias: {
      '@ckeditor/ckeditor5-icons/dist/index.js': resolve(__dirname, './src/icons.js')
    }
  }
};

Rollup 配置（需插件）

import alias from '@rollup/plugin-alias';

export default {
  plugins: [
    alias({
      entries: {
        '@ckeditor/ckeditor5-icons/dist/index.js': 'src/icons.js'
      }
    })
  ]
};