Adding plugins to ckeditor while using rails_admin

Question

I've been banging my head against the wall on this for a few hours. Maybe someone can help me.

I've got a rails app. I'm using the rails_admin gem, version 0.6.2.

Following the rails_admin instructions, I enabled ckeditor on a few text fields, and it's working great.

Next I needed to customize some of the toolbar icons, so I created a custom config.js file in app/assets/javascripts/ckeditor/

This works fine, I can change the toolbar buttons (example code from config.js is below)

CKEDITOR.config.toolbar_Custom = [
  { name: 'document',    items : [ 'Source','NewPage','Preview','-','Templates' ] }
  // other toolbars removed for brevity
];
CKEDITOR.config.toolbar = 'Custom';

Now I want to add some ckeditor plugins - specifically, the codesnippet plugin.

I put the plugin files in app/assets/javascripts/ckeditor/plugins and include them like so:

CKEDITOR.config.extraPlugins = 'codesnippet'

Now ckeditor won't load, console is complaining that CKEDITOR.editor and CKEDITOR.style are undefined. These errors are coming from the plugin js files, so I know they're being loaded, but they seem to be referenced before ckeditor has time to initialize?

I've tried wrapping up my config settings in something like

CKEDITOR.on('instanceReady', function(){
    // initialize config stuff here
});

But that does nothing.

I think the problem involves line 159 of this coffeescript file from rails_admin, it's setting up the editors and applying settings. But for the life of me, I'm lost, and the documentation has only confused me. Any help or hints appreciated.

whats the version of ckeditor and have you found a solution already since you posted the question? :D — Jaak Kütt
@jaak-kütt, I ended up including CKEDITOR outside of the asset pipeline and without using the built-in rails_admin helpers. It was the only way I could reliably get it to load with some custom config options. I placed it in a directory public/sharedassets/ckeditor, added that to my precompile config in application.rb like so: config.assets.precompile += %w( public/sharedassets/* ) and then included it in my application layout with a plain old <script> tag. It probably isn't the best for performance, but now at least I have visibility into how and from where it's being loaded. — wrydere

Lalit Kumar Maurya Lalit Kumar Maurya · Accepted Answer · 2018-04-19T13:27:01

Add below content into config.js file which will be at app/assets/javascripts/ckeditor/.

CKEDITOR.editorConfig = function (config) {
  config.extraPlugins = 'widget,dialog,codesnippet,widgetselection,lineutils';
}

Download the plugins (as zip) from below links. Extract them and put at app/assets/javascripts/ckeditor/plugins which is required for codesnippet.

Add below line into assets.rb.

Rails.application.config.assets.precompile += %w( ckeditor/* )

Enable it for rails_admin, try below for any specific model.

config.model 'Problem' do
    # Your code here
    edit do
      field :code_snippet, :ck_editor
      # Rest columns
    end
  end

Adding plugins to ckeditor while using rails_admin

1 Answers