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

SWFUpload version: 2.2.0.1 Core (swfupload.org)

Demo appication (Rails 2.3.8)

Install¶ ↑

Rails 2.3.8¶ ↑

Via gem:

config.gem 'ckeditor', '3.4.3'

Via plugin

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

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

./script/generate ckeditor_install

Generate ckeditor models for file upload support: For paperclip:

./script/generate ckeditor_migration

For attachment_fu:

./script/generate ckeditor_migration --backend=attachment_fu

Don’t forget about migration:

rake db:migrate

In your environment:

config.load_paths += %W( #{RAILS_ROOT}/app/models/ckeditor )

Rails 3.0.0¶ ↑

gem 'ckeditor', '3.4.2.pre'

Or

gem 'ckeditor', :git => 'git://github.com/galetahub/rails-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:migrate

In your application.rb:

config.autoload_paths += %W( #{config.root}/app/models/ckeditor )

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
:ckeditor_options # A hash allowing you to change filebrowserBrowseUrl, etc

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