Rails CKEditor integration plugin with SWFUpload support

CKEditor is a text editor to be used inside web pages. It’s a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.

Because CKEditor is licensed under flexible Open Source and commercial licenses, you’ll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

CKEditor version: 3.5 (ckeditor.com)

SWFUpload version: 2.2.0.1 Core (swfupload.org)

Rails version: 3.0.3

Demo appication (Rails 2.3.8): github.com/galetahub/rails-ckeditor-demo-app

Install

Rails 3

In your appication “Gemfile”:

gem 'dust-ckeditor', '3.5.0'

gem 'dust-ckeditor', :git => 'git://github.com/hificreative/rails-3-ckeditor.git', :branch => 'rails3'

Next step is generate ckeditor js files and configuration file Check “config/initializers/ckeditor.rb” for more configuration options:

rails generate ckeditor:base

Generate ckeditor models for file upload support: For paperclip:

rails generate ckeditor:migration

For attachment_fu:

rails generate ckeditor:migration --backend=attachment_fu

Don’t forget about migration:

rake db:migarte

Usage

Basically include this in the page you wish to use the editor in:

<%= javascript_include_tag :ckeditor %>

Then instead of the normal textarea helper from Rails use this one:

<%= ckeditor_textarea("object", "field", :width => '100%', :height => '200px') %>

FormBuilder helper for more usefully:

<%= form_for @page do |form| -%>
  ...
  <%= form.cktext_area :notes, :toolbar=>'Full', :width=>'400px', :height=>'200px' %>
  ...
  <%= form.cktext_area :content, :swf_params=>{:assetable_type=>'User', :assetable_id=>current_user.id} %>
  ...
<% end -%>

Support options

:cols         # Textarea cols (default: 70)
:rows         # Textarea rows (default: 20)
:width        # Editor width (default: 100%)
:height       # Editor height (default: 100%)
:class        # Textarea css class name
:toolbar      # Toolbar name
:skin         # Editor skin
:language     # Editor language (default: I18n.locale)
:swf_params   # SWFUpload additional params (Hash)
:id           # textarea DOM element id
:index        # element id index

For configure ckeditor default options check:

public/javascripts/ckeditor/config.js

This stylesheet use editor for displaying edit area:

public/javascripts/ckeditor/contents.css

AJAX

To use a remote form you need to call “ckeditor_ajax_script” helper method:

<%= form_for @page, :remote => true do |form| -%>
  <%= form.cktext_area("note", "content") %>
  ...
  <%= form.cktext_area("note", "about") %>
  ...
  <%= ckeditor_ajax_script %>
  ...
  <%= form.submit "Save" %>
<% end %>

Helper “ckeditor_ajax_script” generate next script (jquery):

<script type='text/javascript' charset='UTF-8'>
  $(document).ready(function(){  
    $('form[data-remote]').bind("ajax:before", function(){
      for (instance in CKEDITOR.instances){
        CKEDITOR.instances[instance].updateElement();
      }
    });
  });
</script>

File uploads

We recommend using a paperclip plugin for file storage and processing images. Controller @../rails-ckeditor/app/controllers/ckeditor_controller.rb@ has actions for displaying and uploading files. It uses classes Picture and AttachmentFile, who are descendants of the Asset class. So, your project must have these classes.

http://github.com/thoughtbot/paperclip

For S3 storage look at “../ckeditor/examples/s3”

Formtastic integration

Ckeditor detects if your use Formtastic and appends “Ckeditor::CustomFormBuilder”.

<%= form.input :content, :as => :ckeditor %>

Middleware

Ckeditor appends middleware (“Ckeditor::Middleware”) before session store to support swf upload with AuthenticityToken.

rake middleware

TODOs

Add support for choose filemanager storage
More integration upload system