在 Rails 7 中使用 ckeditor gem 时，若需自定义工具栏（如 toolbar_basic 或新增 toolbar_mini），必须将配置文件置于 app/assets/ckeditor/config.js 路径下，以确保其优先于 gem 内置默认配置被加载。
在 rails 7 中使用 `ckeditor` gem 时，若需自定义工具栏（如 `toolbar_basic` 或新增 `toolbar_mini`），必须将配置文件置于 `app/assets/ckeditor/config.js` 路径下，以确保其优先于 gem 内置默认配置被加载。
在 Rails 7 项目中集成 CKEditor 时，开发者常期望通过 JavaScript 配置灵活控制编辑器行为（例如启用特定工具栏、禁用冗余功能）。然而，由于 ckeditor gem（v4.x）仍深度依赖传统 Asset Pipeline 加载机制，即使项目已迁移到 JS Bundling（如 esbuild/rollup）或 Import Maps，CKEditor 的核心配置仍必须通过 app/assets/ 目录生效——这是该 gem 的硬性约定，而非可选行为。
✅ 正确的配置路径与结构
将自定义配置文件保存为：
app/assets/ckeditor/config.js
⚠️ 注意：路径必须严格为 app/assets/ckeditor/config.js（小写 ckeditor 文件夹 + config.js 文件名）。Gem 会在启动时自动查找并加载此路径，无需在 app/assets/config.rb 中声明，也不可放在 app/javascript/ 下（该路径由 ES 模块系统处理，CKEditor 初始化时无法识别）。
示例 config.js 内容（精简、安全、兼容 Active Admin）：
CKEDITOR.editorConfig = function(config) { // 允许所有内联样式（谨慎使用，生产环境建议细化） config.allowedContent = true; // 启用文件上传支持（与 Rails 路由对齐） config.filebrowserBrowseUrl = '/ckeditor/attachment_files'; config.filebrowserImageBrowseUrl = '/ckeditor/pictures'; config.filebrowserImageUploadUrl = '/ckeditor/pictures?command=QuickUpload&type=Images'; // 定义自定义工具栏：mini（轻量级） config.toolbar_mini = [ { name: 'paragraph', groups: ['list', 'align'], items: ['NumberedList', 'BulletedList', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] }, { name: 'styles', items: ['Format', 'FontSize'] }, { name: 'basicstyles', groups: ['basicstyles'], items: ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat'] } ]; // 定义 basic 工具栏（供 Active Admin 表单调用） config.toolbar_basic = [ { name: 'basicstyles', groups: ['basicstyles'], items: ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat'] }, { name: 'paragraph', groups: ['list'], items: ['NumberedList', 'BulletedList', '-', 'Blockquote'] } ]; // 【关键】设置默认工具栏为 mini（可选） // config.toolbar = 'mini'; // 若需全局默认，取消上行注释；否则在表单中显式指定 };? 在 Active Admin 表单中应用自定义工具栏
在 admin/starts.rb 等表单定义中，直接引用工具栏名称（注意字符串匹配）：
f.input :expertpro, as: :ckeditor, label: "Predictor", input_html: { ckeditor: { toolbar: 'mini' } } # ← 对应 config.toolbar_mini✅ 支持的值包括 ‘full’、’basic’、’mini’（需在 config.js 中明确定义为 config.toolbar_XXX 形式）。
❗ 常见陷阱与规避方案
-
错误做法：将 config.js 放入 app/javascript/ckeditor/reconfig.js 并通过 //= require ckeditor/reconfig 引入
→ 失败原因：CKEditor 初始化早于 active_admin.js 执行，且 gem 会强制覆盖 CKEDITOR.editorConfig 为自身内置逻辑。 -
错误做法：修改 node_modules/ckeditor/config.js
→ 不可持续，yarn install 后丢失；违反依赖管理原则。 -
调试技巧：在浏览器控制台执行 CKEDITOR.config.toolbar_mini，确认对象存在；若为 undefined，说明配置未加载。
✅ 总结
Rails 7 中定制 CKEditor 工具栏的关键在于尊重 gem 的资产加载契约：
? 配置文件必须位于 app/assets/ckeditor/config.js；
? 工具栏变量名须遵循 config.toolbar_XXX 命名规范；
? Active Admin 表单中通过 toolbar: ‘xxx’ 字符串精确匹配；
? 无需 manifest 声明、无需额外 require，开箱即用。
此举既保持了 Rails 7 的现代前端架构，又无缝兼容 CKEditor v4 的成熟生态，是稳定、可维护的推荐实践。