CODEWITHSUNDEEP
javascriptruby-on-railsruby-on-rails-4ckeditorrails-admin
wrydere
wrydere

Reputation: 678

Adding plugins to ckeditor while using rails_admin

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.

Upvotes: 1

Views: 1501

Answers (1)

Lalit Kumar Maurya
Lalit Kumar Maurya

Reputation: 5565

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.

  1. https://ckeditor.com/cke4/addon/widgetselection
  2. https://ckeditor.com/cke4/addon/lineutils
  3. https://ckeditor.com/cke4/addon/dialog
  4. https://ckeditor.com/cke4/addon/widget
  5. https://ckeditor.com/cke4/addon/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

Upvotes: 0

Related Questions