[英]How to configure CKEditor in Rails 3.1 (gem + Asset Pipeline)
I've successfully configured the ckeditor gem from https://github.com/galetahub/ckeditor on my Rails 3.1 app. 我已经在我的Rails 3.1应用程序上成功配置了https://github.com/galetahub/ckeditor的ckeditor gem。 My problem now is that I can't figure out how to configure the CKEditor.
我现在的问题是我无法弄清楚如何配置CKEditor。 The files that are used according to the Readme simply don't exists in a Rails 3.1 application with the asset pipeline enabled.
在启用了资产管道的Rails 3.1应用程序中,根据自述文件使用的文件根本不存在。
The answer was easy once i've figured out the thrown error message. 一旦我弄清楚抛出的错误信息,答案很简单。
/app/assets/javascript/ckeditor /应用/资产/ 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' ] }
];
}
This is the important part, place the require_tree (which includes the ckeditor/config.js) after the require for ckeditor: /app/assets/javascript/application.js 这是重要的部分,在ckeditor的需求之后放置require_tree(包括ckeditor / config.js):/ app / assets / javascript / application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor/ckeditor
//= require_tree .
So I got this working yesterday for Rails 4.0 rc1 and Ruby 2.0 by leaving out the CKEDITOR.editorConfig = function( config ){ } part. 所以我昨天通过省略CKEDITOR.editorConfig = function(config){}部分来使用Rails 4.0 rc1和Ruby 2.0。
My final code in app/assets/javascripts/ckedtior/config.js was 我在app / assets / javascripts / ckedtior / config.js中的最终代码是
CKEDITOR.config.toolbar= [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
This is the updated answer to Rails 4.1 with ckeditor 4.1.0 to custom configure the ckeditor toolbar. 这是使用ckeditor 4.1.0自定义配置ckeditor工具栏的Rails 4.1的更新答案。
In your view, using simple_form, you need to config the input like this example: 在您的视图中,使用simple_form,您需要像这个示例一样配置输入:
<%= simple_form_for(@foo) do |f| %>
<%= f.input :bar, as: :ckeditor %>
<%= f.button :submit %>
<% end %>
In your Javascript assets you need to create a folder called "ckeditor" and in there create a file called "config.js" 在您的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;
};
The config for the application.js is like this, notice that the order of ckeditor and require_tree is important application.js的配置是这样的,请注意ckeditor和require_tree的顺序很重要
//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require_tree .
Now in your ckeditor.rb you should uncomment this line "config.asset_path" and add the path to the config.js file that you created before wich is "/assets/ckeditor/" 现在在你的ckeditor.rb中你应该取消注释这行“config.asset_path”并添加你之前创建的config.js文件的路径“/ assets / ckeditor /”
# 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
I hope it helps :D! 我希望它有所帮助:D!
As of ckeditor
gem version 3.7.1, I still don't have success with assets pipeline on production. 从
ckeditor
gem版本3.7.1开始,我仍然没有成功使用资产管道进行生产。 However, I had success withthe ckeditor_rails
gem. 但是,我在
ckeditor_rails
gem上取得了成功。 The setup instruction is on the GitHub page of the project and it is dead easy to setup. 设置指令位于项目的GitHub页面上,很容易设置。
For Ckeditor gem v > 4.0 对于Ckeditor gem v> 4.0
//= require_tree ./ckeditor
Sample 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") }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.