In our current app, there was a requirement to have a nice editor which will provide the basic functionalities like bold,italic and also image upload.
We decided to use redactor-rails gem Github-Documentation-Link(Github Doc) .

So i took following steps:

  • In Gemfile i included:
gem 'redactor-rails'
  • Then for image uploading and storing i included two more gems as:
gem 'carrierwave'
gem 'mini_magik'
  • Bundle it.
rails generate redactor:install
rails generate redactor:config
  • In application.js
//= require redactor-rails
  • In active_admin.scss on the top include:
*= require redactor-rails
  • In ActiveAdmin model i wrote:
f.input :name, input_html: {class: 'redactor'}
  • In app/uploaders/redactor_rails_picture_uploader.rb set path for image store in store_dir method.
    Same for redactor_rails_document_uploader.rb

Now i am ready to use redactor editor.
But the editor was not properly fitted on my desktop so i found some css settings which i included in active_admin.css.scss

body.active_admin form.formtastic .redactor_box {
  margin-left: 20%;
  border: 1px solid #C9D0D6;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 76%;
  • While integrating redactor if there is any error while loading application on your browser '$ is undefined' then you add following:

In config/initializers/active_admin.rb include

config.register_javascript 'application.js'