在 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）：
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
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 的成熟生态，是稳定、可维护的推荐实践。
