Integrating CKEditor with Rails asset pipeline.

27 May, 2015.
Under: tech

We are using ckeditor in our rails application (Rails 4.2).

Number of network calls made by the ckeditor and its plugins are quite alot and we were facing difficulty in integrating them with the Rails asset pipeline.

My initial approach is to use a ckeditor rails gem. However getting it to work was complicated. On top of it we had some custom plugins written for ckeditor and making it to work with ckeditor rails gem was almost impossible.

Taking some pointers from this issue finally could get into some working solution.

  1. Move all the CKEditor files into vendor/assets/javascript/ckeditor
  2. In application.js add
    //= require ckeditor/ckeditor
  3. ckeditor.js looks up for other ckeditor relative to CKEDITOR_BASEPATH location. So before loading ckeditor in JS add a line to set that environment variable.
    window.CKEDITOR_BASEPATH = '/assets/ckeditor/';
  4. Add
    config.assets.precompile << ['ckeditor/*']
    to your application.rb file.
  5. Finally add a file called precompile_hook.rake This rake task will help in compiling the ckeditor files and add it to the assets folder. The content of the rake task is here. precompile_hook.rake

Here is the screenshot of the network calls before and after adding ckeditor to asset pipeline.

Before adding to asset pipeline After adding to asset pipeline

Even after adding ckeditor to asset pipeline the it did not effectively reduce all calls into one. Still the ckeditor's plugin calls are been fired separately.

Share Tweet