+1

Ckeditor và thêm một vài plugin cho ckeditor trên app ruby on rails

Bước 1: cài đặt ckeditor

Trong file Gemfile add gem

gem "ckeditor"

Vào rails console chạy lệnh

$bundle install

Thêm dòng sau vào file app/assets/javascripts/application.js

//= require ckeditor/init

Chú ý thêm sau các require jquery và trước requiretree . Trong view bạn thêm class ckeditor

<div class="form-group">
    <label><%= t ".form.content" %><span class="red-title"> *</span></label>
    <%= f.text_area :content, minlength: Settings.post.min_title,
      required: true, class: "form-control ckeditor", id: "ckeditor"%>
</div>

Bước 2: Customize ckeditor

Vào rails console chạy lệnh

mkdir /app/assets/javascripts/ckeditor

Trong thư mục ckeditor tạo file config.js với nội dung

CKEDITOR.editorConfig = function (config) {
  config.toolbar = [
    { name: 'basicstyles', items : [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
    { name: 'colors', items : [ 'Subscript', 'Superscript' , 'RemoveFormat', 'TextColor', 'BGColor' ] },
    { name: 'styles', items : [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'paragraph', items : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight',
      'JustifyBlock', '-', 'NumberedList', 'BulletedList', 'Outdent', 'Indent' ] },
    { name: 'editing', items : [ 'Undo', 'Redo', 'Find', 'Replace', 'SpellChecker', 'Scayt' ] },
    { name: 'insert', items : [ 'Image', 'Table', 'Smiley', 'SpecialChar', 'Link'] }
  ];
  config.height = 350;
}

Thêm dòng sau vào file app/assets/javascripts/application.js

CKEDITOR.config.customConfig = '/assets/ckeditor/config.js';

Bước 3: Thêm plugin cho ckeditor

Vào rails console chạy lệnh

mkdir /app/assets/javascripts/ckeditor/plugins

Lên trang chủ ckeditor tải 1 plugin vào bỏ vào thư mục plugins vừa tạo Ở đây mình tải plugin lineutils trở lại file config thêm dòng lệnh sau

config.extraPlugins = 'lineutils';

All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí