Jasper Kennis

davemorrocodes:

Active Admin is an incredible framework for creating administration interfaces for Rails 3 applications. I’ve been using it on a number of projects recently and have found it to be capable of handling almost any scenario you throw at it. 

I’m going to start documenting a few tricks I’ve picked up along the way in this Hacking ActiveAdmin series of posts.

Getting started

I’m going to use the TinyMCE Javascript WYSIWYG Editor for this example. Theoretically the principles here should work with any of the popular editors, but I haven’t tested them.

If you haven’t already, grab yourself a copy of TinyMCE. 

Adding TinyMCE to ActiveAdmin

First off, copy the folder tinymce/jscripts/tiny_mce into the javascripts folder of your rails project. Once added, register the javascript with the ActiveAdmin layout. In config/initializers/active_admin.rb simply add to the bottom:

config.register_javascript "/javascripts/tiny_mce/tiny_mce.js"

Configuring TinyMCE

With the editor now registered, we need to initialise TinyMCE with your configuration. In public/javascripts/active_admin.js, add the following javascript:

tinyMCE.init({
  mode : "textareas",
  theme : "advanced",
  theme_advanced_buttons1 : "bold, italic, underline, strikethrough, |, bullist, numlist, blockquote, |, undo, redo, |, link, unlink, code",
  theme_advanced_buttons2 : "",
  theme_advanced_buttons3 : "",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "center",
  theme_advanced_resizing : false
});

The configuration above is my basic, customised toolbar. More information on configurations can be found in the TinyMCE documentation.

Finally…

With the code in place, restart your server and browse your admin section. This implementation will include the editor on all textareas, including the admin comments. If you only want specific textareas to include the editor, follow the instructions found on the TinyMCE website.