如何在 CKEditor5 中将默认字号选项更改为 Word 形式-CSDN博客

本文链接：https://blog.csdn.net/qq_54631992/article/details/140444387

大家好，我是一个刚刚吃完 柠檬水🧋 的前端开发者 村头一只鹅鹅 😉

感谢阅读我写的文章，你的支持是我更新的动力

1、实现效果

目前我使用的 ckeditor5@42 ，下面是实现的最终效果

大家如果使用过 ckeditor5 富文本编辑 会知道，其实他只有 2 种字号模式，也就是 big 或者数字。

并且在官方文档中也没有提到如何去修改自定义字号的文本和值

那么有没有好的方式来解决这个问题呢？

2、解决方案

2.1 修改源码

首先我们来拆解需求，本质其实是下面的三步。

一般富文本编辑都会输出 HTML + 样式 的标签，那么就一定有一个类似 [{ name: "一号", value: "20px" }, ...]（大胆猜测） 的配置来实现样式到配置的渲染

如果我们直接修改 HTML 标签设置样式，会让整个事情变得非常复杂。那么我就优先考虑能否修改其中其中按钮样式，再来考虑修改内部 value 呢？那么好我们遵循下述思路来操作。

首先我们来看按钮样式如何修改？其实在文档中有单独列出来 FontSizeUI 这么说，有戏？

参考链接：Class FontSizeUI (font/fontsize/fontsizeui~FontSizeUI) | CKEditor 5 API docs

我们找到如下源码位置 node_modules/package.json 下面的 main 字段，再根据 main 字段找到 @ckeditor/ckeditor5-font/dist/index.js

我们进入到 FontSizeUI 的源码中，看不懂没关系，我们可以猜。很明显这里使用了 editor.ui.componentFactory.add 方法，它显然就是添加 UI 配置的，它依赖于 options 和 command，我们试着打印一下 options 是啥样子的

添加如下配置

欸，很奇怪，为什么看不到打印的内容？肯定找对地方了吧

其实是因为 vite 为了优化，添加了缓存机制，你需要手动删除才行，这里可以参考本篇文章 -> 修改源码没反应 的内容

删除 .vite 文件夹再启动项目就可以看到内容了

打印出来的结果如下，可以看到如下配置。很显然 model 是要设置的大小， title 是显示再按钮上的文字， view 是显示样式。也就是说我们修改上述源码的 options 即可实现功能。

但是我们来思考一下，是否真的需要修改源码吗？如果你修改源码会导致后续人接手存在问题，存在无法排查的隐蔽 bug 等等

既然我们知道了内部的运行逻辑，如何在不修改源码的基础上做迭代呢？

2.2 修改暴露的方法（推荐）

上面我们讲到修改源码中的 options 即可实现功能，我们现在要思考，如何不修改源码也能跑呢？

它本质是调用 getLocalizedOptions 方法来实现的 options 的组装，如果我们能修改这个方法是不是就可以了

其实是可以的，所以有了下述代码。它通过导出的方式，修改类上的原型方法来实现功能，这样既不修改源码，后续修改配置也非常简单

word 和 px 映射表：word 字号与 px pt 对应关系_字体大小 pt 与字号的换算-CSDN 博客

// Font.ts
import { FontSizeUI, FontSize } from "ckeditor5";

// word 和 字号映射文件
export const fontSizeWordMap = [
  { title: "初号", value: 56 },
  { title: "小初", value: 48 },
  { title: "一号", value: 34.7 },
  { title: "小一", value: 32 },
  { title: "二号", value: 29.3 },
  { title: "小二", value: 24 },
  { title: "三号", value: 21.3 },
  { title: "小三", value: 20 },
  { title: "四号", value: 18.7 },
  { title: "小四", value: 16 },
  { title: "五号", value: 14 },
  { title: "小五", value: 12 },
  { title: "六号", value: 10 },
  { title: "小六", value: 8.7 },
  { title: "七号", value: 7.3 },
  { title: "八号", value: 6.7 },
];

// @ts-ignore
FontSizeUI.prototype._getLocalizedOptions = () => {
  return fontSizeWordMap.map((item) => ({
    model: `${item.value}px`,
    title: item.title,
    view: {
      name: "span",
      priority: 7,
      styles: { "font-size": `14px` },
    },
  }));
};

// ckeditor5 字号数据
export const fontSizeOptions = fontSizeWordMap.map((item) => item.value);

export default FontSize;

这样我们直接导出被修改之后的 FontSize 和 配置好的 Options 即可实现修改

2.3 其他方法

除了上述方法，还想过另外 2 个方法

方法一：为 ckeditor5 编写 plugins，手动实现 fontSize 功能，但是太过复杂，你需要了解它内部的 API，除非有特殊需要，不然不考虑，如果有这方面需求也看到这位大佬的博客

参考链接：CKEditor 5 摸爬滚打（一）—— 从零构建定制化工程项目 - Wise.Wrong - 博客园 (cnblogs.com)

方法二：它的本质是渲染为 HTML，如果本质是 HTML，那么在 Vue 加载完毕之后手动修改它的 DOM 也是可以的，该方法可以实现，但是也不是很好

修改源码没反应

其实不是源码位置错了，而是因为 vite 为你添加了缓存，我们需要手动删除缓存才行

参考链接：依赖预构建 {#dependency-pre-bundling} | Vite 中文网 (vitejs.cn)

我们手动删除 .vite 文件夹，再来刷新就可以出现了

1、如果你修改源码，但是没有生效，首先看代码是不是加载了缓存

404 | Vite 官方中文文档 (vitejs.cn)

总结

今天分享如何在 ckeditor5@42 中实现自定义字号功能。默认情况下，ckeditor5 仅提供两种字号模式（big 和数字），官方文档中没有提供自定义字号的解决方案。

首先，我尝试了修改源码，通过在 @ckeditor/ckeditor5-font/dist/index.js 中修改 FontSizeUI 源码，并打印 options 配置，来实现自定义字号。然而，这种方法需要清除 Vite 缓存，操作起来较为复杂。

最终，我推荐通过修改暴露的方法来实现功能。我们可以通过修改 FontSizeUI.prototype._getLocalizedOptions 方法，定义一个映射表 fontSizeWordMap，并导出修改后的 FontSize 和配置好的 Options。这种方法无需修改源码，后续维护也更加方便。

另外，还可以编写 ckeditor5 plugins 或在 Vue 加载完毕后手动修改 DOM 来实现自定义字号，但这些方法复杂度较高，不太推荐。