Добавляємо gem'и в Gemfile та виконуємо bundle install
|
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')); }); }); |
Створюємо каталог та файл в ньому 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 ... } |
Приклад елемента форми (більш детально тут)
|
<%= 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] |
Створюємо контролер app/controllers/elfinder_controller.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
|
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 |
Створюємо в'юху app/views/elfinder/index.html.erb (в якій використовується help'ер devise'а для перевірки доступу)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
|
<% 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('(?:[\?&]|&)' + 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/* ) |
Я скачав jquery-ui версії 1.9.2 та скопіював css та js файли у відповідні папки (більш нова версія не коректно працювала із elFinder'ом 2.0)
Також в app/assets/stylesheets/elfinder копіюємо css-файли а в app/assets/javascripts/elfinder js-файли elFinder'а
про інтеграцію elFilder'а з TinyMCE читаємо тут