Rails开发环境下CK Editor编辑器不显示问题咨询

前置说明 #

问题特征为生产环境加载正常、仅开发环境无法显示，可排除核心依赖引入错误问题，优先排查开发环境专属的资源、配置、运行时规则差异。

排查步骤 #

• 检查资源管线配置
  打开config/environments/development.rb，确认config.assets.debug配置项，若为true会拆分资源单文件加载，若CKEditor依赖未被纳入资源清单会触发404。可临时修改为config.assets.debug = false后重启服务验证是否恢复。
• 校验资源预编译声明
  打开config/initializers/assets.rb，检查是否添加了CKEditor资源的预编译规则：

  Rails.application.config.assets.precompile += %w( ckeditor/* )
  

  生产环境会执行全量资源预编译，未声明的资源也可能被打包，而开发环境默认不会加载未在预编译清单中声明的非入口资源。
• 查看浏览器控制台报错
  打开开发者工具的控制台和网络面板，排查是否存在CSP（内容安全策略）拦截、资源加载404、脚本执行异常类报错，开发环境常单独配置宽松度更低的CSP规则，可能拦截CKEditor需要的内联脚本、动态资源。
• 校验Rails 7+ 导入规则
  若使用Rails 7+的Import Maps引入CKEditor，执行bin/importmap pins检查CKEditor依赖的路径是否正确，执行rails tmp:clear清除开发环境缓存后重启服务验证。
• 排查Turbo冲突
  若项目开启了Turbo，若CKEditor初始化绑定在DOMContentLoaded事件，Turbo导航时不会重新触发初始化，导致渲染失败。生产环境可能因缓存规则差异避开该问题。

解决方案 #

• 补全资源预编译规则：将上述CKEditor资源预编译声明添加到assets.rb中，重启服务验证。
• 调整初始化时机：修改CKEditor初始化代码，兼容Turbo加载逻辑：

  document.addEventListener("turbo:load", () => {
    if (typeof CKEDITOR !== 'undefined') {
      CKEDITOR.replace('你的编辑器元素ID')
    }
  })
  

• 清除全量缓存：依次执行rails assets:clobber、rails tmp:clear，同时清除浏览器缓存后重新加载页面。

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