Ckeditor

This is a fork of the Ckeditor gem. It allows for inline editing with Ckeditor 4 (beta)

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.

Features

• Rails 3.2 integration
• Files browser
• HTML5 files uploader
• Hooks for formtastic and simple_form forms generators
• Extra plugins: attachment and embed.
• Assets pagination (under construction)

Install

Rails 3.2:

gem 'ckeditor', "3.7.3", :git => 'https://github.com/lafeber/ckeditor.git'

Rails <= 3.0:

gem 'ckeditor', "3.6.3", :git => 'https://github.com/lafeber/ckeditor.git'

Now generate models for store uploading files

ActiveRecord + paperclip

For active_record orm is used paperclip gem (it's by default).

gem "paperclip"

rails generate ckeditor:install --orm=active_record --backend=paperclip

ActiveRecord + carrierwave

gem "carrierwave"
gem "mini_magick"

rails generate ckeditor:install --orm=active_record --backend=carrierwave

Mongoid + paperclip

gem 'mongoid-paperclip', :require => 'mongoid_paperclip'

rails generate ckeditor:install --orm=mongoid --backend=paperclip

Mongoid + carrierwave

gem "carrierwave-mongoid", :require => 'carrierwave/mongoid'
gem "mini_magick"

rails generate ckeditor:install --orm=mongoid --backend=carrierwave

Available orms:

• active_record
• mongoid (Thanks Dmitry Lihachev https://github.com/lda)
• mongo_mapper (under construction)

Autoload ckeditor models folder (application.rb):

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

Usage

Mount engine in your routes (config/routes.rb):

mount Ckeditor::Engine => "/ckeditor"

Procompile ckeditor js and css files (config/environments/production.rb):

config.assets.precompile += Ckeditor.assets

Include ckeditor javascripts rails 3.2:

//= require ckeditor/init

or

<%= javascript_include_tag "ckeditor/init" %>

Rails <= 3.0:

<%= javascript_include_tag :ckeditor %>

Form helpers:

Gone. Have a div with contenteditable="true". Click in the div and have the following code somewhere:

<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
  var editor = event.editor,
    element = editor.element;

  if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
    editor.on( 'configLoaded', function() {
      editor.config.toolbarGroups = [
        { name: 'editing',    groups: [ 'basicstyles', 'links' ] },
        { name: 'undo' },
        { name: 'clipboard',  groups: [ 'selection', 'clipboard' ] },
        { name: 'about' }
      ];
    });
  }
});
</script>

NOTE: This can be improved, but for now I'm lazy :)

In order to configure the ckeditor default options, create files:

app/assets/javascripts/ckeditor/config.js

app/assets/javascripts/ckeditor/contents.css

Here's a FormBuilder helper example:

<%= form_for @page do |form| -%>
...
<%= form.cktext_area :notes, :toolbar => 'Full', :width => 800, :height => 400 %>
...
<%= form.cktext_area :content, :input_html => { :value => "Default value" } %>
...
<%= cktext_area :page, :info %>
<% end -%>

AJAX

jQuery sample:

Formtastic integration

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

SimpleForm integration

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

Default scope

For example, you need split assets collection for each user.

class ApplicationController < ActionController::Base

protected

  def ckeditor_filebrowser_scope(options = {})
    super({ :assetable_id => current_user.id, :assetable_type => 'User' }.merge(options))
  end
end

If you want to filter only pictures or attachment_files - redefine methods "ckeditor_pictures_scope" or "ckeditor_attachment_files_scope" respectively. By default, both these methods call "ckeditor_filebrowser_scope" method:

class ApplicationController < ActionController::Base

protected

  def ckeditor_pictures_scope(options = {})
    ckeditor_filebrowser_scope(options)
  end

  def ckeditor_attachment_files_scope(options = {})
    ckeditor_filebrowser_scope(options)
  end
end

Callbacks

class ApplicationController < ActionController::Base

protected

  # Cancan example
  def ckeditor_authenticate
    authorize! action_name, @asset
  end

  # Set current_user as assetable
  def ckeditor_before_create_asset(asset)
    asset.assetable = current_user
    return true
  end
end

I18n

en:
ckeditor:
  page_title: "CKEditor Files Manager"
  confirm_delete: "Delete file?"
  buttons:
    cancel: "Cancel"
    upload: "Upload"
    delete: "Delete"

Tests

rake test
rake test CKEDITOR_ORM=mongoid
rake test CKEDITOR_BACKEND=carrierwave

rake test:controllers
rake test:generators
rake test:integration
rake test:models

This project rocks and uses MIT-LICENSE.