Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Rails plugin for integration ckeditor 3.x

branch: rails3

This branch is 0 commits ahead and 0 commits behind rails3

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.rdoc

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: any (ckeditor.com/download/releases)

SWFUpload version: 2.2.0.1 Core (swfupload.org)

Rails version: 3.x

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

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

Install

Rails 3

In your appication “Gemfile”:

gem 'ckeditor'

or

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

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

rails generate ckeditor:base

You can pass version of ckeditor to download (ckeditor.com/download/releases):

rails generate ckeditor:base --version=3.5.4

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

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 => {} # all configurable options for ckeditor, check the ckeditor API.
                        # these will override width, height, toolbar, skin, and language if you define them here.

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

<%= form.input :content, :as => :ckeditor %>
<%= form.input :content, :as => :ckeditor, :input_html => { :height => 400, :swf_params => { ... } } %>

SimpleForm integration

<%= form.ckeditor :content, :label => false, :input_html => { :height => 400, :toolbar=>'Full' } %>

Middleware

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

rake middleware

I18n

en:
  ckeditor:
    page_title: "CKEditor Files Manager"
    upload_files: "Upload New Files"
    buttons:
      cancel: "Cancel"
      refresh:
        title: "Refresh"
        hint: "Refresh page"
      upload:
        title: "Upload"
        hint: "Upload New File"

TODOs

  1. HTML5 File uploads

Something went wrong with that request. Please try again.