Ckeditor integration

Including and Post 0.6.2

The body tag no longer has an active_admin class added to it, as of this change:

• https://github.com/gregbell/active_admin/pull/1952/files

This means that active_admin no longer conflicts with the ckeditor styles.

There are some problems with ckeditor working with the float: left css property set on the formtastic labels.

To quickly bypass this you can remove the float from the label:

$(document).ready(function(){
  if ( $('#ckeditor').length ) 
    CKEDITOR.replace( 'ckeditor' );
  if ( $('#ckeditor').prev('label').length ) 
    $('#ckeditor').prev('label').css('float','none');
});

or disable label :

  input :body, as: :ckeditor, label: false

You can also add margin-left: 20% to the replacement tag #cke_ckeditor and get close to the default active_admin layout.

These are all hacks, and there are better ways to do this.

Pre 0.6.2

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.actions
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: 79.5% !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 your 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;
    }
  }
}