Adding CodeSnippet Plugin to CKEditor in Rails App

Question

I am trying to add the CodeSnippet plugin to CKEditor (installed in my Rails app using ckeditor-rails ). To do this, I first added the CodeSnippet plugin folder and all of its dependencies to the directory app > assets > javascripts > ckeditor > plugins (so my plugins folder contains folders for codesnippet, dialog, dialogui, lineutils, and widget).

I then updated my app/assets/javascripts/ckeditor/config.js.coffee to include the following:

CKEDITOR.editorConfig = (config) ->
  config.startupShowBorders = true
  config.resize_enabled = false
  config.scayt_autoStartup = true

  config.language = 'en'
  config.width = '445px'
  config.extraPlugins = 'widget,dialog,dialogui,lineutils,codesnippet'

  config.toolbar_Default = [
    { name: 'basicstyles', items: [ 'Bold','Italic','Underline', '-', 'NumberedList','BulletedList', 'Link','Unlink', 'CodeSnippet','RemoveFormat' ] }
  ]
  config.toolbar = 'Default'
  true

When I try to load a webpage with the CKEditor, I get the following errors in my javascript console:

Uncaught TypeError: undefined is not a function

referring to this line of widgets/plugin.js:

CKEDITOR.style.addCustomHandler( {

and the same error

Uncaught TypeError: undefined is not a function

referring to this line of codesnippets/plugin.js:

editor.addContentsCss( path + 'lib/highlight/styles/' + editor.config.codeSnippet_theme + '.css' );

Anyone able to configure this CKEditor to use the CodeSnippet plugin in a Rails app?

Answer 1

I wasn't able to get this to work at all using any ckeditor gems. As a result, I completely removed the ck_editor rails gem and downloaded a build directly from the ckeditor website with the plugins I wanted added in.

I then placed the whole ckeditors folder into my app > assets > javascripts folder and added the following to application.js

//= require ckeditor/ckeditor.js

I did end up having to do some customization by editing ckeditor/ckeditor.js directly, but I was finally able to get the CodeSnippet plugin to work this way.

Hope this helps someone!