Hi friends,

Today I am going to talk about how to integrate ckeditor (a text editor) in your rails application.  Ckeditor is the most commonly used text editor now a days, because of that there are so many gems  available. Here I am using ckeditor gem.

Step 1: Add gem to your Gemfile and run bundle:

gem 'ckeditor'

Step 2: If you want to give support for uploading files using the text editor, ckeditor has support for multiple image uploader plugins. Some of them are:

a) Using paperclip:

If you are using paperclip you need to add paperclip in your Gemfile and run the command to install it

gem 'paperclip'

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

b) Using carrierwave:

If you are using carrierwave, minimagick you need to add those and install them using using ckeditor

gem 'carrierwave'
gem 'mini_magick'

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

Like this it also gives support for dragonfly, refile and also to their supported mongoid versions.

Step 3: If you are using rails version prior to 4 you need to add the paths in the application.rb and also to the routes. Rails 4 or higher versions user can skip this step:

## inside config/application.rb

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


## inside config/routes.rb

mount Ckeditor::Engine => '/ckeditor'

Step 4: Now run migrations if you have created any models during installation of file upload plugins:

rake db:migrate

Step 5: Now load ckeditor library from the vendor in your app/assets/javascripts/application.js

//= require ckeditor/init

Step 6: At last you need to use the form_helper to load to the ckeditor wherever you want:

<%= f.cktext_area :description, :class => 'anyclas', :ckeditor => {:language => 'uk', :uiColor => '#AADC6E', :toolbar => 'mini'} %>

Step 7: Thus in the above example you can see there are different customization options given inside ckeditor hash. All the customization available for ckeditor are given here:
http://docs.ckeditor.com/#!/api/CKEDITOR.config

To implement that customization you need to create these files:

app/assets/javascripts/ckeditor/config.js

app/assets/javascripts/ckeditor/contents.css

Step 8: Inside app/assets/javascripts/ckeditor/config.js, you can customize it like this:

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

Step 9: As we have used ckeditor from vendor, for deployment purposes you need to add the ckeditor to the assets initializers like this:

## inside config/initializers/assets.rb

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

Hope you liked reading this.