Rails 7中CKEditor自定义工具栏配置失效问题及解决

核心问题 #

gem自带的config.js加载顺序晚于你的自定义配置，导致全局配置被覆盖。以下是三种可行的解决方法：

方案一：实例就绪后动态覆盖配置 #

通过监听CKEditor实例的就绪事件，在实例初始化完成后修改配置，避免被后续加载的默认配置覆盖：

1. 修改app/javascript/ckeditor/reconfig.js内容：

// app/javascript/ckeditor/reconfig.js
document.addEventListener('DOMContentLoaded', function() {
  CKEDITOR.on('instanceReady', function(evt) {
    const editor = evt.editor;
    // 根据指定的toolbar名称应用自定义配置
    if (editor.config.toolbar === 'basic') {
      editor.config.toolbar_basic = [
        ['Bold', 'Italic', '-', 'Link', 'Unlink', '-', 'NumberedList', 'BulletedList']
        // 替换为你的自定义按钮组
      ];
    } else if (editor.config.toolbar === 'mini') {
      editor.config.toolbar_mini = [
        ['Bold', 'Italic']
        // 替换为你的自定义按钮组
      ];
    }
    // 重新渲染工具栏
    editor.destroyToolbar();
    editor.createToolbar();
  });
});

2. 保持app/javascript/admin/active_admin.js的引入顺序不变：

// app/javascript/admin/active_admin.js
import '../ckeditor/reconfig.js';
// 其他ActiveAdmin相关引入代码

方案二：利用Rails资源路径优先级替换默认config.js #

Rails会优先加载项目内的资源文件，覆盖gem自带的同名文件：

1. 创建app/assets/javascripts/ckeditor/config.js文件，写入你的全局配置：

// app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function(config) {
  config.toolbar = [
    ['Source', '-', 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Link', 'Unlink']
  ];
  config.toolbar_basic = [
    ['Bold', 'Italic', '-', 'Link', 'Unlink']
  ];
  config.toolbar_mini = [
    ['Bold', 'Italic']
  ];
};

2. 若使用importmap，在config/importmap.rb中添加：

pin "ckeditor/config.js", preload: true

3. 在active_admin.js中引入该文件：

import "ckeditor/config.js";

方案三：直接在表单调用时指定工具栏配置 #

绕开全局配置冲突，直接在ActiveAdmin的input参数中定义工具栏按钮：

# admin/starts.rb
f.input :expertpro, as: :ckeditor, label: "Predictor", input_html: {
  ckeditor: {
    toolbar: [
      ['Bold', 'Italic', '-', 'Link', 'Unlink', '-', 'NumberedList', 'BulletedList']
      // 直接写需要的按钮组，无需依赖全局配置
    ]
  }
}

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