CKEditor with rails

Praaveen Vr

Published in

praaveen

3 min readJun 3, 2018

Gem

galetahub/ckeditor

ckeditor - Ckeditor integration gem for rails

github.com

Gemfile

gem 'ckeditor'

config/initializer/assets.rb

Rails.application.config.assets.precompile += %w( ckeditor/*)

For upload support refer DOCUMENT

app/assets/javascripts/application.js

//= require ckeditor/initbefore //= require_tree .

For CDN options support refer DOCUMENT

View file

<div class="form-group">
  <label class="control-label col-sm-3" for="message">template_body <span class='require'>*</span></label>
  <div class="col-sm-8">
    <%= cktext_area_tag 'template_body', @store.template_body, ckeditor: {toolbar: 'mini'} %>
  </div>
</div>

Custimize CKEditor

All ckeditor options can be found here

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

app/assets/javascripts/ckeditor/config.jsapp/assets/javascripts/ckeditor/contents.css

Custom toolbars example

# in app/assets/javascripts/ckeditor/config.js

CKEDITOR.editorConfig = function (config) {
  // ... other configuration ...

  config.toolbar_mini = [
  { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
  { name: 'styles', items: [ 'Font', 'FontSize' ] },
  { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
  { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }
];

config.toolbar_mailedit = [
  { name: 'paragraph', groups: [ 'list', 'indent', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
  { name: 'styles', items: [ 'Font', 'FontSize' ] },
  { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
];  // ... rest of the original config.js  ...
}

Toolbar options

ckeditor: {toolbar: 'mini'}
ckeditor: {toolbar: 'mailedit'}
ckeditor: {toolbar: 'Full'}

Note: Toolbar option should match the case specified in the config. If the config is not found it defaults to all available toolbar items.

Install additional plugins

Download necessary plugins with all dependencies and extract them in app/assets/javascripts/ckeditor/plugins/. After that you can include your plugins in app/assets/javascripts/ckeditor/config.js

CKEDITOR.editorConfig = function (config) {
  ....  config.extraPlugins = 'emojione,dialog,dialogui';  ......
}

Note: Be careful while extracting the plugin, for example adding the plugin called emojione_1.0.2.zip

while extracting emojione_1.0.2.zip this will give ckeditor-emojione-1.0.2 But while placing inside the plugins folder rename into emojione

Here emoji is the actual plugin need to be added which has dependency of dialog. Again it depend on dialogui.