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.2.1 (ckeditor.com)

SWFUpload version: 2.2.0.1 Core (swfupload.org)

Rails version: 3.0.0.beta3

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

Install¶ ↑

Rails 3¶ ↑

In your appication “Gemfile”:

gem 'ckeditor', '3.2.3'

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

rails generate ckeditor_core

Generate ckeditor models for file upload support: For paperclip:

rails generate ckeditor_models

For attachment_fu:

rails generate ckeditor_models --backend=attachment_fu

Don’t forget about migration:

rake db:migarte

Rails 2.3.x¶ ↑

Install plugin:

./script/plugin install git://github.com/galetahub/rails-ckeditor.git

Generate ckeditor core files:

rake ckeditor:install

This rake generated file config/ckeditor.yml:

rake ckeditor:config

For attachment_fu option “swf_file_post_name” must be “uploaded_data”.

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

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 %>
<% 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¶ ↑

1. Add support for choose filemanager storage

2. More integration upload system