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.
-
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)
Rails 3.2:
gem "ckeditor", "3.7.1"
Rails <= 3.0:
gem "ckeditor", "3.6.3"
For active_record orm is used paperclip gem (it’s by default).
gem "paperclip" rails generate ckeditor:install --orm=active_record --backend=paperclip
gem "carrierwave" gem "mini_magick" rails generate ckeditor:install --orm=active_record --backend=carrierwave
gem 'mongoid-paperclip', :require => 'mongoid_paperclip' rails generate ckeditor:install --orm=mongoid --backend=paperclip
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 github.com/lda)
-
mongo_mapper (under construction)
Autoload ckeditor models folder (application.rb):
config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
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:
cktext_area_tag("test_area", "Ckeditor is the best") cktext_area_tag("content", "Ckeditor", :input_html => {:cols => 10, :rows => 20}, :toolbar => 'Easy')
-
input_html - Options for text_area tag, others for ckeditor javascript configuration.
-
language - appends automatically, by default it’s I18n.locale
-
available ckeditor options - docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
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 -%>
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>
<%= form.input :content, :as => :ckeditor %>
<%= form.input :content, :as => :ckeditor, :input_html => { :height => 400 } %>
<%= form.input :content, :as => :ckeditor, :label => false, :input_html => { :toolbar => 'Full' } %>
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
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
en:
ckeditor:
page_title: "CKEditor Files Manager"
confirm_delete: "Delete file?"
buttons:
cancel: "Cancel"
upload: "Upload"
delete: "Delete"
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.