Как настроить CKEditor в Rails 3.1 (gem + Asset Pipeline)

Question

Я успешно настроил гем ckeditor из https://github.com/galetahub/ckeditor в моем приложении Rails 3.1. Моя проблема сейчас в том, что я не могу понять, как настроить CKEditor. Файлы, используемые в соответствии с файлом Readme, просто не существуют в приложении на Rails 3.1 с включенным конвейером ресурсов.

Answer 1

Ответ был легок, когда я разобрался с сообщением об ошибке.

/ приложение / активы / JavaScript / CKEditor

CKEDITOR.editorConfig = function( config )
{
    config.toolbar_MyToolbar =
    [
        { name: 'document', items : [ 'NewPage','Preview' ] },
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
        { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
                 ,'Iframe' ] },
                '/',
        { name: 'styles', items : [ 'Styles','Format' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'tools', items : [ 'Maximize','-','About' ] }
    ];
}

Это важная часть, поместите require_tree (который включает ckeditor / config.js) после require для ckeditor: / приложение / активы / JavaScript / application.js

//= require jquery
//= require jquery_ujs
//= require ckeditor/ckeditor
//= require_tree .

Answer 2

Итак, вчера я получил эту работу для Rails 4.0 rc1 и Ruby 2.0, пропустив CKEDITOR.editorConfig = function (config) {} part.

Мой окончательный код в app / assets / javascripts / ckedtior / config.js был

  CKEDITOR.config.toolbar= [
    { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
  ]

Answer 3

Это обновленный ответ на Rails 4.1 с ckeditor 4.1.0 для пользовательской настройки панели инструментов ckeditor.

По вашему мнению, используя simple_form, вам нужно настроить ввод, как в следующем примере:

_form.html.erb

<%= simple_form_for(@foo) do |f| %>
  <%= f.input :bar, as: :ckeditor %>
  <%= f.button :submit %>
<% end %>

В ваших активах Javascript вам нужно создать папку с именем "ckeditor" и там создать файл с именем "config.js"

.. / JavaScripts / CKEditor / config.js

CKEDITOR.editorConfig = function(config) {
  //config.language = 'es'; //this could be any language
  config.width = '725';
  config.height = '600';

  // Filebrowser routes
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
  // The location of a script that handles file uploads in the Flash dialog.
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
  // The location of a script that handles file uploads in the Image dialog.
  config.filebrowserImageUploadUrl = "/ckeditor/pictures";
  // The location of a script that handles file uploads.
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";

// You could delete or reorder any of this elements as you wish
  config.toolbar_Menu = [
    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] }, 
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }, 
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] }, 
    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }, '/', 
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, 
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] }, 
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] }, '/', 
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] }, 
    { name: 'colors', items: ['TextColor', 'BGColor'] }, 
    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] }
  ];
  config.toolbar = 'Menu';
  return true;
};

Конфигурация для application.js выглядит следующим образом, обратите внимание, что порядок ckeditor и require_tree составляет важный

application.js

//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require_tree .

Теперь в вашем ckeditor.rb вы должны раскомментировать эту строку "config.asset_path" и добавить путь к файлу config.js, который вы создали до того, как он называется "/ assets / ckeditor /"

.. / CONFIG / Инициализаторы / CKEDITOR.RB

# Use this hook to configure ckeditor
Ckeditor.setup do |config|
  # ==> ORM configuration
  # Load and configure the ORM. Supports :active_record (default), :mongo_mapper and
  # :mongoid (bson_ext recommended) by default. Other ORMs may be
  # available as additional gems.
  require "ckeditor/orm/active_record"

  # Customize ckeditor assets path
  # By default: nil
  config.asset_path = "/assets/ckeditor/"
end

Надеюсь, это поможет: D!

Answer 4

Начиная с версии ckeditor gem 3.7.1, у меня все еще нет успеха с конвейером активов на производстве.Тем не менее, я имел успех с ckeditor_rails драгоценным камнем.Инструкция по настройке находится на странице проекта GitHub, и ее очень легко установить.

Answer 5

Для Ckeditor gem v> 4.0

1. Добавить следующее в application.js

 //= require_tree ./ckeditor

1. Добавить config.jsв приложении / assets / javascript / ckeditor

Пример config.js

if(typeof(CKEDITOR) != 'undefined')
{
  CKEDITOR.editorConfig = function(config) {
    config.uiColor = "#AADC6E";
    config.toolbar = [ [ 'Source', 'Bold' ], ['CreatePlaceholder'] ];
  }
} else{
  console.log("ckeditor not loaded")
}