Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to implement CKEditor in rails application?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 985
    Comment on it

    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


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: