Rich¶ ↑

Rich is an opinionated implementation of CKEditor for Rails 3.1. It includes a stripped down toolbar, simplified dialogs and a custom file manager.

Presently, Rich integrates with Formtastic (1.x) and regular Rails forms. Rich does not support Formtastic 2 yet, but we’re working on it.

Goals¶ ↑

1. Keep the CKEditor source our of your project.

2. Sensible defaults. We don’t want our users to insert tables, smilies or other frivolities that will do nothing but ruin a lovingly crafted design.

3. Make it easy to customize these defaults.

4. Implement a usable (and easily configurable) file manager that serves up images that fit your specific design.

5. A good upload experience, but no flash.

It should be noted that while a major point of this project was to remove many things from CKEditor, all that stuff is still in there and can be easily re-enabled through the initializer.

Quick install¶ ↑

Rich is available as a Ruby Gem, which makes installation very easy.

# In your Gemfile (Rails >= 3.1)
gem 'rich', :git => 'https://github.com/bastiaanterhorst/rich.git'

After updating your bundle, run the installer.

$> rails generate rich:install

The installer sets up a route, creates an initializer for configuration and adds a javascript and CSS file. It also creates a migration, so we need to migrate the database.

$> rake db:migrate

As a last step, secure the file manager by setting your authentication method in /config/initializers/rich.rb. If you’re using Devise with an AdminUser model (incidentally, the Active Admin defaults):

config.authentication_method = :authenticate_admin_user!

You’re good to go.

Usage¶ ↑

To use Rich, it’s javascript file must be loaded. By default, this is already setup for you because Rails loads all Javascript files through the require_tree . command in application.js. If you’ve removed that line, manually load rich by requiring it.

//= require rich

In a Rails form¶ ↑

Use the rich_text_area command to insert Rich.

<%= form_for(@post) do |f| %>
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.rich_text_area :body %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Formtastic¶ ↑

Use :as => :rich to insert Rich. At this time, Rich only works with Formtastic 1. Version 2 is not supported. Using it is very simple, like so:

<%= semantic_form_for @post do |f| %>
   <%= f.inputs do %>
     <%= f.input :name %>
     <%= f.input :title %>
     <%= f.input :body, :as => :rich %>
   <% end %>
   <%= f.buttons do %>
     <%= f.commit_button %>
   <% end %>
 <% end %>

Active Admin¶ ↑

Since Active Admin actually uses Formtastic, you can use it with Rich out of the box. In your model configuration file, set up your form like this.

form do |f|
  f.inputs "Basic info" do
    f.input :title
    f.input :body, :as => :rich
  end
  f.buttons
end

If you’re annoyed by the fact that the Rich editor overlaps the field label (I was!), add the following to your /app/assets/stylesheets/active_admin.css.scss.

.cke_skin_kama {
	margin-left: 20%;
}

Screenshots¶ ↑

This is the editor with default settings. <img src=“https://github.com/bastiaanterhorst/rich/raw/master/screenshots/rich-editor-default.png” />

This is the file manager. <img src=“https://github.com/bastiaanterhorst/rich/raw/master/screenshots/rich-filemanager.png” />

Rich in production mode¶ ↑

Rich works fine in production mode, as long as you make sure to precompile your assets. Rich extends the assets:precompile task to make sure the full CKEditor source tree is copied to your assets folder. So make sure you precompile your assets before starting production mode (something you most likely are doing anyway).

rake assets:precompile

Rich will also clean up these CKEditor files when you clean your assets. So the following works as expected.

rake assets:clean

Although generally not necessary, the underlying Rich tasks can be invoked directly.

rake rich:assetize_ckeditor
rake rich:clean_ckeditor

Configuration and overrides¶ ↑

CKEditor configuration¶ ↑

Editor styles¶ ↑

Image configuration¶ ↑

Per-editor overrides¶ ↑

Roadmap¶ ↑

• Formtastic 2 support (waiting for Active Admin to make the switch)

Inspiration¶ ↑

Much of this project is heavily inspired by Igor Galeta’s ckeditor gem. Also, inspiration comes from Francesc Esplugas’ Ckeditor gem and Active Admin.

Tools used¶ ↑

• Valum’s FileUploader - github.com/valums/file-uploader

• Rack Raw Upload - github.com/newbamboo/rack-raw-upload

Copyright¶ ↑

Rich was created by Bastiaan Terhorst and is sponsored by Perceptor (perceptor.nl).

This project is licenced under the MIT License. See MIT-LICENSE for details.