How to Integrate Ckeditor into a Rails 5 Application

The Ckeditor editor Gem will give you wysiwyg functionality in a web application, like shown here:

Which is what I just integrated into DailySmarty.

Steps for Installing and Configuring Ckeditor

First, install the gem, and if you want to use it for file uploads. Also, if you're using Slim for templating, you have to freeze the version of Slim at 3.1, so the Gemfile should look like this:

gem 'ckeditor', github: 'galetahub/ckeditor'
gem 'slim-rails', '3.1.1'

Next, run the installer for the file upload gem that you utilize (I'm using Carrierwave):

rails generate ckeditor:install --orm=active_record --backend=carrierwave

This will create a number of files, including a migration file, so make sure to migrate the database.

Next, create a directory in the javascripts asset directory for storing custom configuration settings:

mkdir app/assets/javascripts/ckeditor

Then add a file called config.js to the new directory, I personally put these settings into it:

CKEDITOR.editorConfig = function( config ) {
  config.language = 'en';
  config.uiColor = '#ffffff';
  /* Filebrowser routes */
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
  // The location of a script that handles file uploads in the Flash dialog.
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
  // The location of a script that handles file uploads in the Image dialog.
  config.filebrowserImageUploadUrl = "/ckeditor/pictures?";
  // The location of a script that handles file uploads.
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";
  config.allowedContent = true;
  // Toolbar groups configuration.
  config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }
  ];
  config.toolbar_mini = [
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
    { name: 'styles', items: [ 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }
  ];
};

Then add the following to your application.html.slim layout file:

= javascript_include_tag Ckeditor.cdn_url

This will call the Ckeditor via the CDN. And then update the application.js file with a call to the JS initializer:

//= require ckeditor/init

Next, call the Ckeditor view helper from whatever form you want to add the editor to:

= cktext_area :post, :content, cols: 40

Followed by updating wherever you're displaying the rendered content with a call to html_safe:

= @post.content.html_safe

Next, update the initializer to call the CDN and set a few more settings, such as the file and image whitelists. This file is at config/initializers/ckeditor.rb:

Ckeditor.setup do |config|
require 'ckeditor/orm/active_record'
config.image_file_types = %w(jpg jpeg png gif tiff)
config.attachment_file_types = %w(doc docx xls odt ods pdf rar zip tar tar.gz swf)
config.js_config_url = 'ckeditor/config.js'
config.cdn_url = "//cdn.ckeditor.com/4.7.0/standard/ckeditor.js"
end

Next, mount the engine in the config/routes.rb file:

mount Ckeditor::Engine => '/ckeditor'

Lastly, if you're using Heroku, you need to make a change to the config/application.rb file so that it properly compiles the Ckeditor assets:

module Dailysmarty
class Application < Rails::Application
config.assets.precompile += Ckeditor.assets
config.assets.precompile += %w( ckeditor/* )
config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
end
end

After all of that you should be good to go and your users can use a full set of form editing tools!