There are TinyMCE editor & CKEditor mostly used in web application. Here we'll discuss about CKEditor integration in our rails application. Editor is basically used by the web users to post formated contents to the sever. This blog will show that how to implement CKEditor in our application.

Step1: Add gem into Gemfile

gem "ckeditor"

Step2: Run a bundler to install the CKEditor gem.

bundle install

Step3: If we are using rails version < 4 then there is need to add the paths in the application.rb and routes.rb

Path: config/application.rb

config.autoload_paths += %W(#{config.root}/app/models/ckeditor)

Path: config/routes.rb

mount Ckeditor::Engine => '/ckeditor'

Step4: Now modify application.js to load CKEditor

Path: app/assets/javascripts/application.js

//= require ckeditor/init

Step5: To display CKEditor in form

<%= f.cktext_area :description, :class => 'anyclas', :ckeditor => {:language => 'GB', :toolbar => 'mini'} %>

Step6:  There is need to initialize assets because we are using CKEditor from vendor

Path: config/initializers/assets.rb

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

Customize CKEditor: We can also customize by modifying "app/assets/javascripts/ckeditor/config.js" file

Path: app/assets/javascripts/ckeditor/config.js (create a file if not exist)

CKEDITOR.editorConfig = function (config) {
      
      config.toolbar_mini = [
        ["Underline", "Bold", "Italic"]
      ];
      
    }

If we want to editor can upload files, we can use image uploader plugins like paperclip. To implement paperclip gem add this gem to Gemfile run bundler and then run command

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