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

Маємо 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

Джерела:

Добавляємо gem'и в Gemfile та виконуємо bundle install

gem 'ckeditor'
gem 'el_finder'

1 2	gem 'ckeditor' gem 'el_finder'

CKEditor

Оскільки в рельсах ми використовуємо turbolink, то біндим page:change, щоб наш редактор відображався, добавляємо в app/assets/javascripts/application.js

//= require ckeditor/init

$(document).bind('page:change', function() {
  $('.ckeditor').each(function() {
    CKEDITOR.replace($(this).attr('id'));
  });
});

//= require ckeditor/init

$(document).bind('page:change', function() {

$('.ckeditor').each(function() {

CKEDITOR.replace($(this).attr('id'));

});

Створюємо каталог та файл в ньому app/assets/javascripts/ckeditor/config.js, в якому задаємо конфігурацію WYSIWIGN-редактору, а також вказуємо шлях до файлового менеджера Elfinder'а

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

  config.toolbar_mini = [
    ["Bold",  "Italic",  "Underline",  "Strike",  "-",  "Subscript",  "Superscript"],
  ];
  config.toolbar = "sample";
  config.filebrowserBrowseUrl = '/elfinder_manager';

  // ... rest of the original config.js  ...
}

CKEDITOR.editorConfig = function (config) {

// ... other configuration ...

config.toolbar_mini = [

["Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript"],

];

config.toolbar = "sample";

config.filebrowserBrowseUrl = '/elfinder_manager';

// ... rest of the original config.js ...

}

Приклад елемента форми (більш детально тут)

<%= f.cktext_area :content, label: "Текст", rows: 20, :ckeditor => {:language => 'uk'}, class: "ckeditor" %>

1	<%= f.cktext_area :content, label: "Текст", rows: 20, :ckeditor => {:language => 'uk'}, class: "ckeditor" %>

elFinder

Задаємо роут в config/route.rb для файлового менеджера

get '/elfinder_manager', to: 'elfinder#index'
match 'elfinder' => 'elfinder#elfinder', via: [:get, :post]

1 2	get '/elfinder_manager', to: 'elfinder#index' match 'elfinder' => 'elfinder#elfinder', via: [:get, :post]

Створюємо контролер app/controllers/elfinder_controller.rb

require 'el_finder/action'

class ElfinderController < ApplicationController
  skip_before_filter :verify_authenticity_token, :only => ['elfinder']

  def index
     render :layout => false
  end

  def elfinder
    rootpath = File.join(Rails.public_path, '/uploads/images')
    rooturl = '/uploads/images'

    h, r = ElFinder::Connector.new(
      :root => rootpath,
      :url => rooturl,
      :perms => {
         /^(Welcome|README)$/ => {:read => true, :write => false, :rm => false},
         '.' => {:read => true, :write => true, :rm => true}, # '.' is the proper way to specify the home/root directory.
         #/^test$/ => {:read => true, :write => true, :rm => false},
         #'logo.png' => {:read => true},
         #/\.png$/ => {:read => false} # This will cause 'logo.png' to be unreadable.
                                      # Permissions err on the safe side. Once false, always false.
      },
      :extractors => {
         'application/zip' => ['unzip', '-qq', '-o'], # Each argument will be shellescaped (also true for archivers)
         'application/x-gzip' => ['tar', '-xzf'],
      },
      :archivers => {
         'application/zip' => ['.zip', 'zip', '-qr9'], # Note first argument is archive extension
         'application/x-gzip' => ['.tgz', 'tar', '-czf'],
      },
      :thumbs => true
    ).run(params)

    headers.merge!(h)

    if r.empty?
      (render :nothing => true) and return
    end

    render :json => r, :layout => false
  end
end

require 'el_finder/action'

class ElfinderController < ApplicationController

skip_before_filter :verify_authenticity_token, :only => ['elfinder']

def index

render :layout => false

end

def elfinder

rootpath = File.join(Rails.public_path, '/uploads/images')

rooturl = '/uploads/images'

h, r = ElFinder::Connector.new(

:root => rootpath,

:url => rooturl,

:perms => {

/^(Welcome|README)$/ => {:read => true, :write => false, :rm => false},

'.' => {:read => true, :write => true, :rm => true}, # '.' is the proper way to specify the home/root directory.

#/^test$/ => {:read => true, :write => true, :rm => false},

#'logo.png' => {:read => true},

#/\.png$/ => {:read => false} # This will cause 'logo.png' to be unreadable.

# Permissions err on the safe side. Once false, always false.

:extractors => {

'application/zip' => ['unzip', '-qq', '-o'], # Each argument will be shellescaped (also true for archivers)

'application/x-gzip' => ['tar', '-xzf'],

:archivers => {

'application/zip' => ['.zip', 'zip', '-qr9'], # Note first argument is archive extension

'application/x-gzip' => ['.tgz', 'tar', '-czf'],

:thumbs => true

).run(params)

headers.merge!(h)

if r.empty?

(render :nothing => true) and return

end

render :json => r, :layout => false

end

Створюємо в'юху app/views/elfinder/index.html.erb (в якій використовується help'ер devise'а для перевірки доступу)

<% unless user_signed_in?  %>
Access denied    
<% else %>

<!DOCTYPE html>
<html>
<head>
  <title>File Manager</title>
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui" %>
<%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.1.min"%>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min"%>

  <%= javascript_include_tag "elfinder/elfinder.min"%>
  <%= javascript_include_tag "elfinder/proxy/elFinderSupportVer1"%>
  <%= stylesheet_link_tag "elfinder/elfinder.min" %>
  <%= stylesheet_link_tag "elfinder/theme" %>

</head>
<body>

<div id="elfinder"></div>

<script type="text/javascript" charset="utf-8">
    // Helper function to get parameters from the query string.
    function getUrlParam(paramName) {
        var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
        var match = window.location.search.match(reParam) ;

        return (match && match.length > 1) ? match[1] : '' ;
    }

    $().ready(function() {
        var funcNum = getUrlParam('CKEditorFuncNum');

        var elf = $('#elfinder').elfinder({
            url : '/elfinder',
            transport : new elFinderSupportVer1(),
            getFileCallback : function(file) {
                window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
                window.close();
            },
            resizable: false
        }).elfinder('instance');
    });
</script>
</body>
</html>
<% end %>

<% unless user_signed_in? %>

Access denied

<% else %>

<!DOCTYPE html>

<html>

<head>

<title>File Manager</title>

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui" %>

<%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.1.min"%>

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min"%>

<%= javascript_include_tag "elfinder/elfinder.min"%>

<%= javascript_include_tag "elfinder/proxy/elFinderSupportVer1"%>

<%= stylesheet_link_tag "elfinder/elfinder.min" %>

<%= stylesheet_link_tag "elfinder/theme" %>

</head>

<body>

// Helper function to get parameters from the query string.

function getUrlParam(paramName) {

var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i') ;

var match = window.location.search.match(reParam) ;

return (match && match.length > 1) ? match[1] : '' ;

}

$().ready(function() {

var funcNum = getUrlParam('CKEditorFuncNum');

var elf = $('#elfinder').elfinder({

url : '/elfinder',

transport : new elFinderSupportVer1(),

getFileCallback : function(file) {

window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);

window.close();

resizable: false

}).elfinder('instance');

});

</script>

</body>

</html>

<% end %>

Добавляємо в config/initializers/assets.rb

Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]
Rails.application.config.assets.precompile += %w( ckeditor/* )

Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]

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

Я скачав jquery-ui версії 1.9.2 та скопіював css та js файли у відповідні папки (більш нова версія не коректно працювала із elFinder'ом 2.0)

Також в app/assets/stylesheets/elfinder копіюємо css-файли а в app/assets/javascripts/elfinder js-файли elFinder'а

про інтеграцію elFilder'а з TinyMCE читаємо тут

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

WebDevelop

Tag Archives: wysiwyg

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

CKEditor + elFinder в Rails 4