如何在Rails 6+Webpacker集成ckeditor gem？遇'dir未定义'错误

这个错误我之前在把CKEditor 5集成到Rails 6 Webpacker环境时也踩过坑，大概率是加载顺序不对或者Webpacker配置没正确处理CKEditor的依赖导致的。下面是我亲测有效的解决步骤：

1. 确认依赖安装到位 #

先把Gem和npm依赖都配置好：

• 在Gemfile里添加：

  gem 'ckeditor', '~> 5.0'
  

  接着运行 bundle install。

• 安装CKEditor 5的npm构建包（Webpacker需要处理前端资源，推荐用官方npm包而非gem自带的前端文件）：

  yarn add @ckeditor/ckeditor5-build-classic
  

  如果你需要其他编辑器类型（比如分栏文档版），替换成对应的包名即可，比如@ckeditor/ckeditor5-build-decoupled-document。

2. 调整Webpacker配置 #

CKEditor 5在Webpack环境下需要特殊的资源解析规则，打开 config/webpack/environment.js，添加以下配置：

const { environment } = require('@rails/webpacker')

// 处理CKEditor的SVG图标
environment.loaders.append('ckeditor-svg', {
  test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
  use: ['raw-loader']
})

// 处理CKEditor的样式文件
environment.loaders.append('ckeditor-css', {
  test: /ckeditor5-[^/]+\/theme\/[^/]+\.css$/,
  use: ['style-loader', 'css-loader']
})

module.exports = environment

别忘了安装需要的loader：

yarn add raw-loader style-loader css-loader --dev

3. 正确初始化编辑器 #

别在全局直接引入CKEditor，而是按需在页面加载完成后初始化，比如在 app/javascript/packs/application.js 里写：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// 适配Turbo（原Turbolinks）的场景用turbo:load事件，普通场景用DOMContentLoaded
document.addEventListener('turbo:load', () => {
  // 找到你要替换成编辑器的DOM元素，比如id为"post_content"的textarea
  const editorEl = document.querySelector('#post_content');
  if (editorEl) {
    ClassicEditor
      .create(editorEl)
      .catch(err => {
        console.error(err);
      });
  }
});

4. 避开常见坑 #

• 不要同时引入gem自带的CKEditor前端资源和npm包，二选一即可（优先用npm包配合Webpacker）。
• 检查页面中有没有其他JS代码提前修改了编辑器对应的DOM元素，导致CKEditor初始化时找不到合法的对象。
• 如果用了Turbo，一定要用turbo:load事件触发初始化，而不是DOMContentLoaded，否则页面切换后编辑器可能无法重新加载。

完成以上步骤后，重启Rails服务器和Webpack开发服务（bin/webpack-dev-server），再打开页面应该就能正常加载CKEditor，不会再出现那个错误了。

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