CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor. ckeditor.com
- Ckeditor version 4.4.6 (full)
- Rails 4 integration
- Files browser
- HTML5 files uploader
- Hooks for formtastic and simple_form forms generators
- Integrated with authorization framework CanCan and Pundit
For basic usage just include ckeditor gem:
gem 'ckeditor'
or if you want to use the latest version from github:
gem 'ckeditor', github: 'galetahub/ckeditor'
For usage with ruby 1.8.7 you need to specify gem version:
gem 'ckeditor', '4.0.4'
For files uploading support you need generate models for file storage. Currently supported next backends:
- ActiveRecord (paperclip, carrierwave, dragonfly)
- Mongoid (paperclip, carrierwave, dragonfly)
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
All ckeditor models will be generated into app/models/ckeditor folder. Models are autoloaded in Rails 4. For earlier Rails versions you need to add them to autoload path (in application.rb):
config.autoload_paths = %W(#{config.root}/app/models/ckeditor)
Mount engine in your routes (config/routes.rb):
mount Ckeditor::Engine => '/ckeditor'
Include ckeditor javascripts in your app/assets/javascripts/application.js
:
//= require ckeditor/init
Form helpers:
<%= form_for @page do |form| -%>
...
<%= form.cktext_area :notes, :class => 'someclass', :ckeditor => {:language => 'uk'} %>
...
<%= form.cktext_area :content, :value => 'Default value', :id => 'sometext' %>
...
<%= cktext_area :page, :info, :cols => 40, :ckeditor => {:uiColor => '#AADC6E', :toolbar => 'mini'} %>
...
<% end -%>
All ckeditor options here
In order to configure the ckeditor default options, create files:
app/assets/javascripts/ckeditor/config.js
app/assets/javascripts/ckeditor/contents.css
Adding custom toolbar:
# in app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function (config) {
// ... other configuration ...
config.toolbar_mini = [
["Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript"],
];
config.toolbar = "simple";
// ... rest of the original config.js ...
}
When overriding default config.js
you have to set all configuration yourself since bundled config.js
will not be loaded. To see the default configuration run bundle open ckeditor
and copy app/assets/javascripts/ckeditor/config.js
to your project and customize it to your needs.
For Rails 4, add the following to config/initializers/assets.rb
:
Rails.application.config.assets.precompile = %w( ckeditor/* )
Since version 4.1.0, non-digested assets of ckeditor will simply be copied after digested assets were compiled. For older versions, use gem non-stupid-digest-assets, to copy non digest assets.
To reduce the asset precompilation time, you can limit plugins and/or languages to those you need:
# in config/initializers/ckeditor.rb
Ckeditor.setup do |config|
config.assets_languages = ['en', 'fr']
config.assets_plugins = ['image', 'smiley']
end
Note that you have to list your plugins including all their dependencies.
Add your app/assets/javascripts/ckeditor/basepath.js.erb like
<%
base_path = ''
if ENV['PROJECT'] =~ /editor/i
base_path << "/#{Rails.root.basename.to_s}/"
end
base_path << Rails.application.config.assets.prefix
base_path << '/ckeditor/'
%>
var CKEDITOR_BASEPATH = '<%= base_path %>';
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 => { :ckeditor => { :height => 400 } } %>
<%= form.input :content, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'Full'} } %>
To use cancan with Ckeditor, add this to an initializer.
# in config/initializers/ckeditor.rb
Ckeditor.setup do |config|
config.authorize_with :cancan
end
At this point, all authorization will fail and no one will be able to access the filebrowser pages. To grant access, add this to Ability#initialize
# Always performed
can :access, :ckeditor # needed to access Ckeditor filebrowser
# Performed checks for actions:
can [:read, :create, :destroy], Ckeditor::Picture
can [:read, :create, :destroy], Ckeditor::AttachmentFile
Just like CanCan, you can write this code in your config/initializers/ckeditor.rb file
Ckeditor.setup do |config|
config.authorize_with :pundit
end
And then, generate the policy files for model Picture and AttachmentFile
$ rails g ckeditor:pundit_policy
By this command, you will got two files:
app/policies/ckeditor/picture_policy.rb app/policies/ckeditor/attachment_file_policy.rb
By default, only the user that logged in can access the models(with action index and create), and only the owner of the asset can destroy the resource.
You can simply customize these two policy files as you like.
en:
ckeditor:
page_title: 'CKEditor Files Manager'
confirm_delete: 'Delete file?'
buttons:
cancel: 'Cancel'
upload: 'Upload'
delete: 'Delete'
next: 'Next'
$> 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.