如何在TYPO3 v12+的CKEditor 5中添加字体颜色、背景色等按钮？

我刚帮朋友处理过TYPO3 v11到v12的迁移，确实遇到了和你一样的问题——CKEditor 5的配置逻辑和v4完全不一样，默认的full预设砍掉了字体颜色这类按钮，得手动配置才能加回来。下面是我亲测有效的步骤：

1. 明确CKEditor 5对应的插件 #

字体颜色和背景色分别对应CKEditor 5的FontColor和FontBackgroundColor插件，这俩默认没被包含在TYPO3的full预设里，所以第一步要在自定义配置里声明加载它们。

2. 创建自定义RTE YAML配置 #

在你的站点包（比如EXT:mysite）里新建配置文件：Configuration/RTE/CustomFull.yaml，内容如下：

# 先继承官方的Full预设，保留原有功能
imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Full.yaml" }

editor:
  config:
    # 声明要加载的颜色插件
    plugins:
      - FontColor
      - FontBackgroundColor
    # 在原有工具栏末尾添加颜色按钮
    toolbar:
      items:
        # 这里保留Full预设的所有原有按钮（你可以直接复制Full.yaml里的toolbar.items内容）
        - bold
        - italic
        - strike
        - underline
        - subscript
        - superscript
        - '|'
        - link
        - '|'
        - bulletedList
        - numberedList
        - indent
        - outdent
        - '|'
        - blockQuote
        - insertTable
        - mediaEmbed
        - '|'
        - undo
        - redo
        # 新增颜色按钮
        - '|'
        - fontColor
        - fontBackgroundColor

3. 把配置应用到RTE #

在你的PageTSconfig（比如EXT:mysite/Configuration/TsConfig/Page/RTE.tsconfig）里，将自定义配置绑定到默认RTE：

RTE.default {
  config {
    editor.configFile = EXT:mysite/Configuration/RTE/CustomFull.yaml
  }
}

4. 自定义颜色面板（可选） #

如果不想用默认的颜色集，可以在YAML里添加自定义颜色：

editor:
  config:
    # 自定义字体颜色
    fontColor:
      colors:
        - { color: '#ff0000', label: '红色' }
        - { color: '#009900', label: '绿色' }
        - { color: '#0000ff', label: '蓝色' }
        - { color: '#ffffff', label: '白色', hasBorder: true }
    # 自定义背景色
    fontBackgroundColor:
      colors:
        - { color: '#fff3cd', label: '浅黄' }
        - { color: '#d4edda', label: '浅绿' }
        - { color: '#cce5ff', label: '浅蓝' }

常见坑点排查 #

• 一定要清除TYPO3缓存！配置修改后缓存不清理的话，新的RTE设置不会生效；
• 插件名称别写错：CKEditor 5的插件是驼峰命名（FontColor不是小写的fontcolor）；
• 如果按钮还是不显示，检查YAML里的toolbar.items有没有正确添加fontColor和fontBackgroundColor，别漏了分隔符|。

按照这个流程操作，就能恢复v11里的字体颜色功能了，我迁移项目的时候就是这么解决的～

备注：内容来源于stack exchange，提问作者Ludwig