Question

我用gem来安装ckeditor。因此，项目中没有config.js（在我不想修改的实际gem文件夹中）。安装确实在config / initializers文件夹中创建了一个ckeditor.js，它似乎是放置工具栏定义的正确位置。但是我试图让它工作的所有内容都会引发各种语法或方法未找到的错误。有人有这个成功吗？如果是这样，一个快速的例子会非常有用。

我目前的ckeditor.js是：

# Use this hook to configure ckeditor
if Object.const_defined?("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"

  # Allowed image file types for upload.
  # Set to nil or [] (empty array) for all file types
  # config.image_file_types = ["jpg", "jpeg", "png", "gif", "tiff"]

  # Allowed attachment file types for upload.
  # Set to nil or [] (empty array) for all file types
  # config.attachment_file_types = ["doc", "docx", "xls", "odt", "ods", "pdf", "rar", "zip", "tar", "swf"]
  end
end

Answer 1

1.在application.js

中添加以下内容

//= require ckeditor/ckeditor
//= require_tree ./ckeditor

2.在app / assets / javascript / ckeditor中添加config.js 示例config.js

if(typeof(CKEDITOR) != 'undefined')
{
 CKEDITOR.editorConfig = function(config) {
   config.uiColor = "#AADC6E";
   config.toolbar = [
    [ 'Bold', 'Italic', 'Underline', 'Strike' ],
    [ 'NumberedList', 'BulletedList', 'HorizontalRule' ],
    [ 'Blockquote' ],
    [ 'Undo', 'Redo' ],
    [ 'insertResolved' ],
    [ 'Source' ]
 ];
}
} else{
  console.log("ckeditor not loaded")
}

Answer 2

我和你的问题一样。起初，我跟着Config rails with asset pipeline，但它对我不起作用。然后我意识到该链接的作者只创建了一种新的工具栏样式。您还需要在视图中调用它。这意味着您需要添加此行

input_html => {:toolbar => 'MyToolbar'}

使其有效。

为了测试config.js是否正常工作，您可以检查网页的来源，看看是否添加了assets / javascripts / ckeditor / config.js。另一种检查方法是通过取消注释此行来编辑编辑器颜色：config.uiColor = '#AADC6E'。如果编辑器的颜色发生变化，那就可以了。

我犯了一个愚蠢的错误，我将ckeditor js文件包含两次：一次放在application.js中，一次放在layouts / application.html.haml文件中。不知道这是否是问题的根源。你可以试试。

希望这有帮助。

Answer 3

这对我有用： How to configure CKEditor in Rails 3.1 (gem + Asset Pipeline) 只需在config.js文件

中保存答案中给出的片段

Answer 4

可能是我对github的评论会帮助你https://github.com/galetahub/ckeditor/issues/136#issuecomment-8870692

Answer 5

这是 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资源中，您需要创建一个名为＆＃34; ckeditor＆＃34;的文件夹。并在那里创建一个名为＆＃34; config.js＆＃34;

的文件

../的JavaScript / 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中你应该取消注释这一行＆＃34; config.asset_path＆＃34;并添加您之前创建的config.js文件的路径＆＃34; / assets / ckeditor /＆＃34;

../ 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！

Ruby on Rails 3.1，Ckeditor自定义工具栏。在哪里定义

5 个答案:

_FORM.HTML.ERB

../的JavaScript / CKEDITOR / CONFIG.JS

的application.js

../ CONFIG /初始化/ CKEDITOR.RB