如何在Strapi 5中修改CKEditor 5的默认文本颜色？

方法1：修改CKEditor配置文件 #

• 在项目的src/plugins/ckeditor目录下（没有则手动创建）新建config.js文件，添加以下配置：

module.exports = {
  editor: {
    config: {
      // 配置编辑器内容默认文本颜色
      contentsCss: `
        body {
          color: #000000 !important;
        }
      `,
      // 同时设置默认段落样式的文本颜色
      stylesSet: [
        {
          name: '默认段落',
          element: 'p',
          styles: { 'color': '#000000' }
        }
      ]
    }
  }
};

• 保存文件后重启Strapi服务，配置即可生效。

方法2：自定义Admin UI样式强制覆盖 #

• 在项目的src/admin/app.js文件中（没有则创建）引入自定义样式：

import './custom.css';

export default {
  // 保留原有Admin配置内容
};

• 同目录下创建custom.css文件，添加以下样式代码：

/* 强制覆盖CKEditor内所有文本元素的颜色 */
.ck-content p,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6,
.ck-content li,
.ck-content span {
  color: #000000 !important;
}

• 重启Strapi服务，自定义样式会自动应用到后台的CKEditor组件。

额外提示 #

如果是Strapi后台启用深色主题导致的颜色冲突，可直接在Admin UI的设置中切换为浅色主题，部分场景下能快速解决文本显示问题。

内容的提问来源于stack exchange，提问作者Rohan Jayaraj