Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Integrating ckeditor in Rails

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.99k
    Comment on it

    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:!/api/CKEDITOR.config

    To implement that customization you need to create these files:


    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.

 1 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: