galetahub / ckeditor

Ckeditor 4.x integration gem for rails
https://ckeditor.com/ckeditor-4/
MIT License
2.23k stars 880 forks source link

custom config.js not executed #415

Closed lulalala closed 10 years ago

lulalala commented 10 years ago

It seems the editorConfig callbacks are never executed.

Description of my case

I use 4.0.10 with Rails 3.2. I use SimpleForm.

First, as this may be relevant, I observe that the build-in config.js (in gem's "app/assets/javascripts/ckeditor/config.js") seems to be always loaded no matter what.

So I want to customize so I followed instruction and created my own assets/javascripts/ckeditor/config.js file. It seems I need to require it in my js manifest file manually.

So both config now are loaded, each contains the editorConfig callback. However it seems that these callbacks are never executed, so the toolbar configuration is never constructed at all. Thus my mini toolbar is not loaded.

What did work

I can make my toolbar if I don't use callbacks:

CKEDITOR.config.toolbar_mini = []

and then include all my javascripts at the top of body.

This way the inline CKEDITOR.replace('product_description', {"toolbar":"mini"}); is executed with my mini bar being available (because it is loaded before the body dom).

However I don't think this is the right way to do it.

lakehouseru commented 10 years ago

+1 no matter I try the default config.js is loaded in a production env

lenart commented 10 years ago

Same problem here. It works in development but fails in production (heroku) using SimpleForm 3.0.1 and ckeditor 4.0.10 (github: 'galetahub/ckeditor').

I can though override the toolbar and other ckeditor config by passing options to directly f.input :body, as: :ckeditor, input_html: { ckeditor: { toolbar: 'mysimpletoolbar', entities: false } }

I'm currently investigating assets precompilation; the problem might lie there somewhere.

lenart commented 10 years ago

My problems seemed to arise from the fact that assets fingerprinting was not working as expected when precompiling assets locally. The reference to fingerprinted config file was wrong.

For example, when I precompiled assets the window.CKEDITOR_ASSETS_MAPPING was referencing to the file config-ebafc46e0c5f051543835c330e389207.js while the generated file had different fingerprint (something like config-fa24e3dc69c94e6711966ddde18430bc.js).

I've used @sanelson2000's fork. The issue is discussed here https://github.com/galetahub/ckeditor/pull/408.

lulalala commented 10 years ago

I have tried 4.0.11, and it works now.

JulianNacci commented 8 years ago

Hi, I wasted many hours trying to configure toolbars, working in dev, not in prod, then on firefox but not chrome, etc.

I finally made it work properly, so here are my 2 cents for whoever was in my situation (config.js not loading at all or randomly working) : ckeditor gem 4.1.6 / rails 4.2.5

I cannot guarantee that all the methods used are relevant because I tried many tricks to make it work, but it works perfectly with this setup both on dev and production, on every browser :

1 - Avoid using config.js, some browser do not really like it, use a custom file like ckeditor_config.js Put it in assets/javascripts/ckeditor folder

2 - To load your custom config file avoid //= require ckeditor/init and use //= require ckeditor/loader instead and create a loader.js.erb file which you will put in assets/javascripts/ckeditor folder. Put in this file the following lines :

//= require ckeditor/init
CKEDITOR.config.customConfig = '<%= javascript_path 'ckeditor/ckeditor_config.js' %>';

3 - If you want to use plugins download them on ckeditor website, clean dev files and copy paste entire folders in assets/javascripts/ckeditor/plugins folder, then declare them in your config file liked following :

...
config.extraPlugins = 'embedbase';
config.extraPlugins = 'embed';
...

4 - Setup your custom toolbars like following in your ckeditor_config.js, no special trick here (only example)

              config.toolbar_body = [
                { name: 'basicstyles', items : [ 'Bold','Italic','Underline' ] },
                { name: 'clipboard', items : [ 'RemoveFormat', 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                { name: 'links', items : [ 'Link','Unlink' ] },
                { name: 'paragraph', items : [ 'BulletedList', 'NumberedList' ] },
                { name: 'styles', items : [ 'Format' ] },
                { name: 'embed', items : ['Embed'] },
              ];

              config.toolbar_blurb = [
                { name: 'basicstyles', items : [ 'RemoveFormat','Bold','Italic','Underline' ] },
                { name: 'links', items : [ 'Link','Unlink' ] },
              ];

and call them properly in your forms, like following (only example) <%= n.input :body, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'body'} } %>

5 - Setup your ckeditor.rb correctly to make your plugins work config.assets_languages = ['fr'] languages you want to have ckeditor in config.assets_plugins = ['embed','embedbase','lineutils','notification','notificationaggregator','widget'] list of your plugins

  assets_root =  Rails.root.join('app','assets','javascripts')
  ckeditor_plugins_root = assets_root.join('ckeditor','plugins')
  %w(openlink sourcedialog).each do |ckeditor_plugin|
    Ckeditor.assets += Dir[ckeditor_plugins_root.join(ckeditor_plugin, '**', '*.js')].map {|x| x.sub(assets_root.to_path, '').sub(/^\/+/, '')}
  end

some lines of code to set up the path where your plugins are stored and force their load

6 - Set up asset precompile to save time on deployment Go in production.rb and append config.assets.precompile += Ckeditor.assets

7 - Load your JS in head and not at the end of body, this solved my last issues because ckeditor was not loading properly and overriding my custom config file from time to time, making my config work randomly on prod.