Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

165 lines (108 sloc) 4.342 kB

Ckeditor

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 integration

  • Files browser

  • HTML5 files uploader

  • Hooks for formtastic and simple_form forms generators

  • Extra plugins: attachment and embed.

  • Assets pagination (under construction)

Install

gem "ckeditor", "~> 3.6.0"

rails generate ckeditor:install

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

rails generate ckeditor:install --version=3.5.4

Now generate models for store uploading files:

rails generate ckeditor:models --orm=active_record

Available orms:

  • active_record

  • mongoid (Thanks Dmitry Lihachev github.com/lda)

  • mongo_mapper (under construction)

Autoload ckeditor models folder (application.rb):

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

Dependencies

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

gem "paperclip"

For gem “carrierwave” shortly I will give an example.

Usage

<%= javascript_include_tag :ckeditor %>

cktext_area_tag("test_area", "Ckeditor is the best")

cktext_area_tag("content", "Ckeditor", :input_html => {:cols => 10, :rows => 20}, :toolbar => 'Easy')

For configure ckeditor default options check:

public/javascripts/ckeditor/config.js

This stylesheet use editor for displaying edit area:

public/javascripts/ckeditor/contents.css

FormBuilder helper for more usefully:

<%= 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:

<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>

Formtastic integration

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

SimpleForm integration

<%= form.ckeditor :content, :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 your wont 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

This project rocks and uses MIT-LICENSE.

Jump to Line
Something went wrong with that request. Please try again.