Skip to content
Integrate CKEditor javascript library with Rails asset pipeline
Ruby JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 16b77cc Oct 29, 2019


Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Merge pull request #87 from davidenglishmusic/ckeditor-4-11-1 Oct 30, 2019
vendor/assets Update to ckeditor 4.11.1 Nov 10, 2018
.gitignore bundle gem ckeditor-rails Dec 5, 2011
CONTRIBUTORS add contributors list; update readme Dec 5, 2012
Gemfile bundle gem ckeditor-rails Dec 5, 2011
LICENSE update gemspec and license Jan 18, 2013 Bump version Nov 10, 2018
Rakefile fix css caused assets precompile error Jan 20, 2013
ckeditor-rails.gemspec update gemspec and license Jan 18, 2013

CKEditor for rails asset pipeline

CKEditor is a library for WYSIWYG editor to be used inside web pages.

The ckeditor_rails gem integrates the CKEditor with the Rails asset pipeline.

And it would work with following environments:

  • ruby 1.9.3+
  • rails 3.0+

Basic Usage

Install ckeditor_rails gem

Include ckeditor_rails in Gemefile

gem 'ckeditor_rails'

Then run bundle install

Include CKEditor javascript assets

Add to your app/assets/javascripts/application.js after //= require jquery_ujs to work with jQuery

//= require ckeditor-jquery

Modify form field for CKEditor

Add ckeditor class to text area tag

<%= f.text_area :content, :class => 'ckeditor' %>

Initialize CKEditor in Javascript file

  // optional config


Since version 4.1.3, non-digested assets of ckeditor-rails will simply be copied after digested assets were compiled.

Eric Anderson, thanks.

Advanced Usage

Include customized configuration javascript for CKEditor

Add your app/assets/javascripts/ckeditor/ like

CKEDITOR.editorConfig = (config) ->
  config.language = "zh"
  config.uiColor = "#AADC6E"

Include customized CKEDITOR_BASEPATH setting

Add your app/assets/javascripts/ckeditor/basepath.js.erb like

  base_path = ''
  if ENV['PROJECT'] =~ /editor/i
    base_path << "/#{Rails.root.basename.to_s}/"
  base_path << Rails.application.config.assets.prefix
  base_path << '/ckeditor/'
var CKEDITOR_BASEPATH = '<%= base_path %>';

Include customized stylesheet for contents of CKEditor

Add your app/assets/stylesheets/ckeditor/contents.css.scss like

body {
  font-size: 14px;
  color: gray;
  background-color: yellow;
ol,ul,dl {
  padding:4 20px;

Configure plugins, languages, and skins of CKEditor assets

Add ckeditor_rails.rb to config/initializers/

Ckeditor::Rails.configure do |config|
  # default is nil for all languages, or set as %w[en zh]
  config.assets_languages = nil

  # default is nil for all plugins,
  # or set as white list: %w[image link liststyle table tabletools]
  # or set as black list: config.default_plugins - %w[about a11yhelp]
  config.assets_plugins = nil

  # default is nil for all skins, or set as %w[moono-lisa]
  config.assets_skins = nil

Gem maintenance

Maintain ckeditor_rails gem with Rake commands.

Update origin CKEditor source files.

rake update_ckeditor VERSION=4.11.1

Publish gem.

rake release


CKEditor only loading after page refresh

This is due to interference with Turbolinks -

The problem stems from the link itself so in order to resolve this issue you must disable turbolinks in the div containing the link pointing to where CKEditor is.

You can visit the Rails Turbolinks Repo for detailed documentation


<div class="example" data-no-turbolink>

Asset Compilation Process Does Not Produce JS and/or CSS Files

If you observe an issue (especially in Heroku environment) where asset compilation process skips JS and or CSS files, try adding the following line to app/environments/production.rb (or config file for the environment where you observe the issue):

config.assets.precompile += ['ckeditor/*']


CKEditor use CKEditor license.

Other parts of gem use MIT license.

You can’t perform that action at this time.