Маємо app з active_admin, в який необхідно інтегрувати ckeditor
1. Gemfile
1 |
gem 'ckeditor' |
Виконуємо в консолі
1 |
bundle install |
2. Добавити в /config/initializers/active_admin.rb
1 |
config.register_javascript 'ckeditor/init.js' |
3. Для потрібного поля у в'юшці добавляємо :as => :ckeditor
1 2 3 4 5 6 |
%li= u.input :email %li= u.input :password = u.fields_for :about_blocks do |a| %li= a.input(:description, :as => :ckeditor ) |
4. Для коректного відображення редактору, добавляємо стиль у app/assets/stylesheets/active_admin.css.scss
1 2 3 4 |
.cke_chrome { width: 79.5% !important; overflow: hidden; } |
5. Також потрібно задати custom toolbar, Створюємо /assets/javascripts/ckeditor/config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CKEDITOR.editorConfig = function( config ) { config.toolbar_Custom = [ { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','-','Templates' ] }, { name: 'clipboard', items : [ 'PasteFromWord','-','Undo','Redo' ] }, { name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar','PageBreak' ] }, { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }, '/', { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, '/', { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, { name: 'colors', items : [ 'TextColor','BGColor' ] } ]; config.toolbar = 'Custom'; }; |
та підключаємо його у assets/javascripts/active_admin.js
1 |
//= require ckeditor/config |
Джерела: