How to use 'Ckeditor' gem and customize it in Rails application

05 Feb 2018
0
Comments
How to use 'Ckeditor' gem and customize it in Rails application

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.

Ckeditor Rails Gem

How to use it & customize in Rails application!

Follow some simple steps :

  1. Add 'ckeditor' gem to “Gemfile.rb” and run $ bundle command:
  2. gem 'ckeditor'
  3. Include following in your app's “config/initializers/assets.rb” file:
  4. Rails.application.config.assets.precompile += %w( ckeditor/*)
  5. Following, Include ckeditor javascripts in your “app/assets/javascripts/application.js” file:
    //= require ckeditor/init
  6. Then change simple text_area field to cktext_area in view file as follows:
    <%= f.cktext_area :template_text, placeholder: "Email Body Text" %>
  7. These will transform text field to Ckeditor. The basic Ckeditor will look like image as given below.
    VKeditor by cryptex technologies
  8. To customize CKEditor create “config.js” file in “app/assets/javascripts/ckeditor/” folder and add following code in it:
  9. 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. The customized CKEditor will look like image as given below:




Leave a comment:

Recent Blogs
Contact-Us Contact-Us
Newsletter Newsletter