Мітки: ckeditor

Маємо app з active_admin, в який необхідно інтегрувати ckeditor

1. Gemfile

gem 'ckeditor'

1	gem 'ckeditor'

Виконуємо в консолі

bundle install

1	bundle install

2. Добавити в /config/initializers/active_admin.rb

config.register_javascript 'ckeditor/init.js'

1	config.register_javascript 'ckeditor/init.js'

3. Для потрібного поля у в'юшці добавляємо :as => :ckeditor

%li= u.input :email
%li= u.input :password
= u.fields_for :about_blocks do |a|
  %li= a.input(:description, :as => :ckeditor )

%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

.cke_chrome {
  width: 79.5% !important;
  overflow: hidden;
}

.cke_chrome {

width: 79.5% !important;

overflow: hidden;

}

5. Також потрібно задати custom toolbar, Створюємо /assets/javascripts/ckeditor/config.js

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';
};

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

//= require ckeditor/config

1	//= require ckeditor/config

Джерела:

Веб-Розробка

WebDevelop

Tag Archives: ckeditor

Добавляємо class до картинки, яку вставляємо в CKEditor’і

Як інтегрувати ckeditor в active admin на Ruby on Rails