如何在Rails 3.1（gem + Asset Pipeline）中配置CKEditor

我已经在我的Rails 3.1应用程序上成功配置了https://github.com/galetahub/ckeditor的ckeditor gem。 我现在的问题是我无法弄清楚如何配置CKEditor。 在启用资产管道的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' ] } ]; } 

这是重要的部分，在ckeditor的需求之后放置require_tree（包括ckeditor / config.js）：/ app / assets / javascript / application.js

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

Answer 2

所以我昨天通过省略CKEDITOR.editorConfig = function（config）{}部分来使用Rails 4.0 rc1和Ruby 2.0。

我在app / assets / javascripts / ckedtior / config.js中的最终代码是

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

Answer 3

这是使用ckeditor 4.1.0自定义配置ckeditor工具栏的Rails 4.1的更新答案。

在您的视图中，使用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/INITIALIZERS/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 gem上取得了成功。 设置指令位于项目的GitHub页面上，很容易设置。

Answer 5

对于Ckeditor gem v> 4.0

1. 在application.js中添加以下内容

  //= require_tree ./ckeditor 

1. 在app / assets / javascript / ckeditor中添加config.js.

示例config.js

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