Ckeditor integration

Integration with Ckeditor using the galetahub/ckeditor gem:

Follow the instructions for galetahub/ckeditor (gem, mount in routes and rails generate for your file uploads if wanted), then add the following to /config/initializers/active_admin.rb

# To load a javascript file:
config.register_javascript 'ckeditor/init.js'

In your resource you'll need to add to your form:

form do |f|
  f.inputs do
    f.input :foo
    f.input :bar, :as => :ckeditor
  end
  f.buttons
end

And your almost done, you can now use Ckeditor in active_admin, however everyone who manages to access Ckeditor can browse CKeditor uploads and add to them. galetahub/Ckeditor has methods to restrict acces using CanCan, I advise you read through the documentation of CanCan integration both for Ckeditor and Active Admin to make this work.

I've also found it necessary to add to app/assets/stylesheets/active_admin.css.scss to fit it to on the form:

.cke_chrome {
  width: 76% !important;
  overflow: hidden;
}

Integration with native Ckeditor

If you prefer to use the native Ckeditor directly (without a gem) http://ckeditor.com

1. download ckeditor into vendor/assets/javascripts/ckeditor/

2. edit config/initializers/active_admin.rb with

   config.register_javascript "ckeditor/ckeditor"

3. change the js variable CKEDITOR_BASEPATH to /assets/ckeditor/ so it also works in production with Rails 3.2 asset pipeline. See documentation. You can do this in app/assets/javascripts/active_admin.js:

   var CKEDITOR_BASEPATH = '/assets/ckeditor/';

You can then override the ckeditor defaults, by adding the corresponding files to you app/assets, such as app/assets/javascripts/config.js and app/assets/stylesheets/contents.css

One major caveat, the body.active_admin style (as in < body class="active_admin" > ) bashes the cke styles in the toolbar. The only workaround I could find (so far) is to copy all the .css files from the skins (e.g. ckeditor/skins/moono/.css to app/assets/stylesheets/ckeditor/skins/moono/.css.scss , renaming them scss and then editing each file, wrapping the content with

body.active_admin {
...
}

To achieve this with bash you can use following commands

for i in $(ls *css) ; do mv $i $i.scss ; done
sed -i '1s/^/body.active_admin { /' *scss
sed -i -e "\$a}" *scss

Or another quick fix would be to just add this (if you only need a quick fix for the buttons):

body.active_admin {
  .cke_toolbar {
    .cke_button {
      padding: 5px;
    }
  }
}