Ruby on Rails升级ckeditor_rails后CKEditor图标不显示URL拼接错误

问题成因 #

1. 双重路径拼接的触发逻辑
   ckeditor_rails从4.5.3升级到4.17.0后，自带的Ckeditor::Rails::AssetUrlProcessor移除了「跳过已带http/https协议头的绝对URL」的判断逻辑，和Rails 4.2资产管道的默认URL重写规则形成了冲突：

• 第一层处理：Sprockets编译moono-lisa皮肤的CSS文件时，因sass配置开启了相对资源转换，会把CSS里原本的相对路径引用icons.png?t=c08cfedb60错误重写为带当前服务host的地址http://localhost:3000/icons.png?t=c08cfedb60
• 第二层处理：ckeditor_rails的自定义资产处理器没有识别到上述地址已经是绝对路径，直接在路径前拼接皮肤资源前缀/assets/ckeditor/skins/moono-lisa，最终生成/assets/ckeditor/skins/moono-lisahttp://localhost:3000/icons.png?t=c08cfedb60的无效地址。

Rails资产管道中会自动修改CSS内URL的组件 #

Rails的资产管道（Asset Pipeline）默认有三层逻辑会改写CSS文件内的url()引用：

• Sprockets核心处理器：默认遍历所有CSS的资源引用，对非根路径开头、非外部链接的相对路径资源，自动计算编译后的资源路径，替换为带指纹的正式资源地址
• sass-rails提供的URL辅助方法：如果开启relative_assets配置，会强制把所有资源URL转为相对当前CSS文件的路径，配置冲突时会出现host误拼接的问题
• 第三方gem注入的自定义处理器：比如ckeditor_rails自带的资源路径处理器，专门用来改写CKEditor内部静态资源的引用路径

修复步骤 #

1. 关闭sass的相对资源自动转换，在config/application.rb中添加配置：

config.sass.relative_assets = false

2. 修正ckeditor_rails初始化配置，在config/initializers/ckeditor.rb中补充跳过绝对URL处理的逻辑，补上4.17.0版本缺失的判断：

Ckeditor::Rails.configure do |config|
  config.assets_base_path = "/assets/ckeditor"
end

# 给ckeditor处理器补上绝对URL跳过逻辑
module Ckeditor
  module Rails
    class AssetUrlProcessor
      alias_method :original_process, :process
      def process(data, path)
        return data if data =~ /url\(['"]?https?:\/\//
        original_process(data, path)
      end
    end
  end
end

3. 在config/initializers/assets.rb中明确将CKEditor皮肤资源加入预编译列表，避免Sprockets因找不到资源触发路径错误：

Rails.application.config.assets.precompile += %w(
  ckeditor/skins/moono-lisa/*.png
  ckeditor/skins/moono-lisa/*.css
  ckeditor/*.js
)

4. 清除缓存后重启服务：

rake assets:clobber
rake tmp:clear

所有CKEditor相关的自定义路径配置都要以根路径/开头，不要写相对路径，避免被资产管道误改写。

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