Rails 4如何配置CKEditor 4.1

Question

我想在我的Rails应用中使用CKEditor。

在我的gemfile文件中，我添加了以下代码：

gem 'ckeditor', :git => 'https://github.com/galetahub/ckeditor.git'

在运行"bundle update"和"rails generate ckeditor:install --orm=active_record --backend=paperclip"之后，我需要在我的application.js文件中加入以下代码：

//= require ckeditor/init

我认为我添加了这一行：

<%= f.cktext_area :img, :ckeditor => {:toolbar => 'img', :customConfig => asset_path('ckeditor/config.js')} %>

我创建了这些文件夹和文件：

/app/assets/javascripts/ckeditor
/app/assets/javascripts/ckeditor/config.js
/app/assets/javascripts/ckeditor/contents.css

我的config.js文件如下所示:

CKEDITOR.editorConfig = function( config )
{
    config.toolbar_img = [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
    ]
}

为什么我的编辑器看起来像这样？

- Evolutio

---

你原本期望它是什么？ - Surya

为什么它有这么多工具栏？我只想要新建页面和预览按钮 :) - Evolutio

你在CKEditor中看到“新页面”和“预览按钮”在哪里？你能发布一个链接到文档配置，从中你已经添加了代码吗？ - Surya

我编辑了上面的问题。现在我有了这个工具栏，我在这个页面上找到了它：http://docs.ckeditor.com/#!/guide/dev_toolbar。结果是一样的。 - Evolutio

Answer 1

请将您的config.js文件更改为以下内容：

CKEDITOR.config.toolbar= [
    { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }
];

请确保在你的 application.js 文件中要求 config.js :

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

同时，CSS文件应该在这里：/app/assets/stylesheets/ckeditor/contents.css而不是在这里/app/assets/javascripts/ckeditor/contents.css。

完成上述更改后，您可以直接这样做：<%= f.cktext_area :img %>。

但是，如果您想直接在text_area中传递配置值，那么可以像这样操作：

<%= f.cktext_area :img, :ckeditor => {:toolbar => 'mini'} %>

或者：

<%= f.cktext_area :img, :ckeditor => {:toolbar => {'name' => 'document', 'items' => ['Source']} } %>

- Surya

---

是的，我已经用你的代码更新了我的代码。又出现了旧编辑器。 - Evolutio

只需尝试使用以下代码：<%= f.cktext_area :img %>，不要提及所有自定义配置，因为您已经将其包含在application.js文件中。在浏览器上打开开发人员控制台并尝试输入：CKEDITOR.config.toolbar，看看它是否返回一个对象。 - Surya

@Evolutio：看起来你传递的自定义配置选项可能不正确，如果你想要的话，你将不得不在那些你想要不同菜单的文本区域中提到“toolbar”选项。 - Surya

请在您的回答中给我一个例子，好吗？ - Evolutio

我不确定，但我认为如果你在参数中传递工具栏到ckeditor_area，则不应该考虑它。 - Surya

Answer 2

在视图中：

      <%= k.cktext_area :template_text, required: true, :class =>"emailBodyTemplate",  :id => "emailBodyText", placeholder: "Email Body Text", :maxlength => 255 %>

在 app/assets/javascripts/ckeditor/config.js 文件中：

  CKEDITOR.editorConfig = function (config) {
  config.toolbar_mini = [
    ["Bold",  "Italic",  "Underline",  "Strike",  "-"],
    ['BulletedList','NumberedList' ],['Outdent','Indent'],
   ];
  config.toolbar = "mini";
  config.toolbarLocation = 'bottom';
  config.height = 280;       
  config.width = 620;     
  config.removePlugins = 'elementspath';config.removePlugins = 'elementspath';
}

输出：

自定义 CKEditor

- user8930748

---

谢谢！但是这已经晚了3年 :D - Evolutio