How to add a simple rich text editor to an active admin field

README.md

You'll need to put hallo.js into /vendor/assets/javascripts

You will also need jQuery UI and Rangy JS

active_admin.css

@import "jquery.ui.core";
@import "jquery.ui.theme";
@import "font-awesome";

.is-hallo-text {
  margin-left: 20% !important;
  width: 74.3% !important;
  border: 1px dashed #8b8b8b !important;
  padding: 20px !important;
}

active_admin.js

//= require jquery.ui.all
//= require rangy-core
//= require hallo


(function() {

  jQuery(function() {

    var $richText = $('.js-rich-text')
    if ($richText.length > 0){
      $richText.each(function(index, element){
        var $element = $(element)
        var $p = $('<p class="is-hallo-text"></p>').html($element.val())
        $element.after($p)
        $element.hide()
        $p.hallo({
          plugins: {
            'halloformat': {},
            'halloheadings': {},
            'halloreundo': {},
            'hallolists': {},
            'hallojustify': {}
          }
        })
        $p.on('hallomodified', function(event, data){
          $element.val(data.content)
        })

      });
    }
    
  });
}).call(this);

clients.rb

f.input :description, input_html: {class: 'js-rich-text'}

Gemfile

gem 'jquery-ui-rails'
gem 'font-awesome-rails'