Ruby on Rails 3.1, Ckeditor custom toolbars. Where to place definitions

Question

I used the stone to install ckeditor. As such, there is no config.js project in the project (there is in the actual gem folder that I do not want to change). The installation created ckeditor.js in the config / initializers folder, which would apparently be the right place to install the toolbar definition. But everything that I tried to get to work, throws a different syntax or method, did not detect errors. Has anyone been successful in this? If such a quick example would be very useful.

My current 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

I have the same problem as you. At first I watched the configuration rails with the resource pipeline , but this does not work for me. Then I realized that the author of this link only creates a new toolbar style. You must also call it in the view. That means you need to add this line

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

for it to work.

To check if config.js is working, you can check the source of your webpage to see if /javascripts/ckeditor/config.js assets have been added. Another way to check is to edit the color of the editor by uncommenting this line: config.uiColor = '#AADC6E' . If the color of the editor changes, then it works.

I also made a stupid mistake that I add cceditor js files twice: once to application.js, once to layouts / application.html.haml. I do not know if this is the source of the problem or not. You may try.

Hope this helps.

Answer 2

1. Add the following to application.js

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

2. Add the config.js file to app / assets / javascript / ckeditor config.js example

 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 3

this worked for me: How to configure CKEditor in Rails 3.1 (gem + Asset Pipeline) just save the fragment indicated in the answer in config.js file

Answer 4

Maybe my comment on github will help you https://github.com/galetahub/ckeditor/issues/136#issuecomment-8870692

Answer 5

This is an updated Rails 4.1 answer from ckeditor 4.1.0 to customize the ckeditor toolbar.

In your view, using simple_form, you need to configure the input, as in this example:

_form.html.erb

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

In your Javascript resources you need to create a folder called "ckeditor" and create a file called "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; }; 

The configuration for application.js looks like this: note that the order of ckeditor and require_tree is important

application.js

 //= 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 "/ 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 

Hope this helps: D!