Upgrade from Rails 4.2 to Rails 5.2. File uploads don't show in the links plugin, and code in CKEDITOR.editorConfig = function( config ) { } never gets executed.

[davelens]

Hi! I'm currently upgrading CKeditor following an upgrade from Rails 4.2 to Rails 5.2. I've always used Carrierwave to handle file uploads. I have two specific issues. I'm fairly sure I'm overlooking something essential, but can't figure out what. Hope anyone here can point it out.

My problem(s)

1. CKeditor loads, but I can't figure out how to make the file uploads to show up in the links plugin.
2. In my app/assets/javascripts/ckeditor/config.js, the console.log('test'); does not execute. Anything outside CKEDITOR.editorConfig gives output, anything inside its function block does not. Can't figure out why.

What I did during the upgrade

1. In my Gemfile I replaced gem 'ckeditor', '~> 4.1.3' with gem 'ckeditor', github: 'galetahub/ckeditor' to get the latest version.
2. Ran the generator to override the existing models to see if anything changed. Apart from frozen_string_literal: true notations, no changes.

   $ rails generate ckeditor:install --orm=active_record --backend=carrierwave

3. Added config.cdn_url = '//cdn.ckeditor.com/4.6.1/full/ckeditor.js'
4. Made a file in app/assets/javascripts/ckeditor/config.js. Note the console.log('test') in the beginning of the config block:

   
   /*
   Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   For licensing, see LICENSE.html or http://ckeditor.com/license
   */

CKEDITOR.editorConfig = function( config ) { console.log('test');

// Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E';

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

config.allowedContent = true;

// Toolbar groups configuration. config.toolbar = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] } ];

config.toolbar_mini = [ { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, { name: 'styles', items: [ 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] } ]; };

5. Replaced `//= require ckeditor/init` with `//= require ckeditor/config` in my `app/assets/javascripts/application.js`. 
6. Added `config/initializers/ckeditor.rb`. The listed models do exist:
```ruby
# 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'

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

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

  # Asset model classes
  config.picture_model { Ckeditor::Picture }
  config.attachment_file_model { Ckeditor::AttachmentFile }
  config.asset_path = '/public/uploads/ckeditor/'

  # Paginate assets
  # By default: 24
  config.default_per_page = 24

  # Setup authorization to be run as a before filter
  # config.authorize_with :cancan
  config.cdn_url = '//cdn.ckeditor.com/4.6.1/full/ckeditor.js'
end

7. Finally, I load the CDN in my application.html.erb file before the closing body element:

   <%= javascript_include_tag Ckeditor.cdn_url %>
   <%= javascript_include_tag 'application' %>
   </body>
   </html>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cleicar]

@davelens long shot here, but did you manage to find what was the issue? I have the same situation

[davelens]

@cleicar I'll get back to you tomorrow on this if that's OK. I think I found a solution but I can't recall what it was. I'd have to check the repo's history and I'm stuck on mobile right now.

I'm somewhat ashamed I didn't update my question with the solution. It's one of my own pet peeves to come across these dead issues. 🥴

[davelens]

@cleicar Probably not so good news here, it turns out the project I was trying to make this work for was upgraded to Rails 6 shortly after my issue post here. I switched galetahub/ckeditor to version 5.1 and had it working with the default config immediately. Sorry 😕

[cleicar]

@davelens no problem! Thanks for checking it ☺️