CKEditor is text editor basically used for transforming simple text field to dynamic word featured field that helps user to simplify web content creation. In this blog, we will learn how to use CKEditor gem and how to customize it in our Ruby on Rails Application.

Follow some simple steps :

gem 'ckeditor'

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

CKEDITOR.editorConfig = function (config) {

config.toolbar_mini = [

["Bold",  "Italic",  "Underline",  "Strike",  "-"],

['BulletedList','NumberedList' ],['Outdent','Indent'],

];

config.toolbar = "mini";

config.toolbarLocation = 'bottom';

config.height = 280;

config.width = 620;

config.removePlugins = 'elementspath';config.removePlugins = 'elementspath';

}

1. Add 'ckeditor' gem to “Gemfile.rb” and run $ bundle command:
2. Include following in your app's “config/initializers/assets.rb” file:
3. Following, Include ckeditor javascripts in your “app/assets/javascripts/application.js” file:

   //= require ckeditor/init

4. Then change simple text_area field to cktext_area in view file as follows:

   <%= f.cktext_area :template_text, placeholder: "Email Body Text" %>

5. These will transform text field to Ckeditor. The basic Ckeditor will look like image as given below.
   
6. To customize CKEditor create “config.js” file in “app/assets/javascripts/ckeditor/” folder and add following code in it:

7. The customized CKEditor will look like image as given below: