如何在Strapi 4中使用@ckeditor/strapi-plugin-ckeditor 0.0.10自定义CKEditor 5的调色板

我来帮你搞定这个问题——在Strapi 4搭配@ckeditor/strapi-plugin-ckeditor 0.0.10时，自定义CKEditor 5调色板的关键是精准匹配插件版本对应的CKEditor配置结构，你之前的配置应该是没命中正确的字段。

第一步：配置正确的调色板结构 #

打开你的config/plugins.js，把CKEditor的配置修改成下面的样子，这里直接对字体颜色和背景颜色的调色板分别做自定义，每个颜色可以设置你需要的品牌色值和自定义标签：

module.exports = () => ({
  ckeditor: {
    enabled: true,
    config: {
      // 自定义字体颜色调色板
      fontColor: {
        colorPalette: [
          {
            color: '#2E7D32', // 替换成你的品牌色值
            label: 'Pin Grün Dark'
          },
          {
            color: '#1976D2', // 替换成你的品牌色值
            label: 'PIN Blau Dark'
          },
          // 可选：保留"无颜色"选项
          {
            color: 'transparent',
            label: '无颜色'
          }
          // 继续添加更多你的品牌颜色...
        ]
      },
      // 自定义背景颜色调色板（如果需要的话）
      fontBackgroundColor: {
        colorPalette: [
          {
            color: '#2E7D32',
            label: 'Pin Grün Dark (背景)'
          },
          {
            color: '#1976D2',
            label: 'PIN Blau Dark (背景)'
          },
          {
            color: 'transparent',
            label: '无背景色'
          }
          // 继续添加更多背景色...
        ]
      },
      // 确保颜色按钮在工具栏中（如果你的工具栏是自定义的）
      toolbar: {
        items: [
          // 保留你原本的工具栏按钮，加上这两个颜色按钮
          'fontColor',
          'fontBackgroundColor',
          // ... 其他工具栏项（比如 bold, italic, link 等）
        ]
      }
    }
  }
});

第二步：为什么这个配置能生效？ #

这个版本的Strapi CKEditor插件是直接透传CKEditor 5的原生配置，而CKEditor 5的字体颜色/背景颜色插件（fontColor和fontBackgroundColor）的调色板配置必须嵌套在各自的字段下，不能直接放在根级的config里——这应该是你之前配置无效的核心原因。

第三步：重建并验证 #

按照你之前的步骤重新构建，同时别忘了清理浏览器缓存：

1. 保存config/plugins.js的修改
2. 执行清理和构建命令：

   rm -rf build
   yarn build
   yarn develop
   

3. 打开Strapi后台后，强制刷新浏览器（Windows/Linux用Ctrl+F5，Mac用Cmd+Shift+R），避免浏览器缓存旧的编辑器配置

常见排查点 #

如果还是没生效，可以检查这几点：

• 检查配置里的拼写错误：比如colorPalette的大小写（注意P是大写）、颜色值的格式（必须是有效的十六进制/RGB/RGBA值）
• 确认你的工具栏配置里包含fontColor和fontBackgroundColor按钮，如果工具栏里没加这两个，调色板按钮都不会显示
• 确保没有其他配置文件覆盖了config/plugins.js的CKEditor设置（比如环境特定的配置config/env/development/plugins.js）

这样配置后，你的品牌颜色就会带着自定义标签出现在调色板下拉菜单里了。

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