rails 4 how to configure ckeditor 4.1

Question

I wan't to use the CKEditor in my Rails-App.

in my gemfile I added this line

gem 'ckeditor', :git => 'https://github.com/galetahub/ckeditor.git'

after i run "bundle update" and "rails generate ckeditor:install --orm=active_record --backend=paperclip" I add to my application.js this line:

//= require ckeditor/init

in my view I added this line:

<%= f.cktext_area :img, :ckeditor => {:toolbar => 'img', :customConfig => asset_path('ckeditor/config.js')} %>

I created this folders and files:

/app/assets/javascripts/ckeditor
/app/assets/javascripts/ckeditor/config.js
/app/assets/javascripts/ckeditor/contents.css

My config.js looks like this:

CKEDITOR.editorConfig = function( config )
{
    config.toolbar_img = [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
    ]
}

Why my Editor looks like this?

Answer 1

Change your config.js file with this:

CKEDITOR.config.toolbar= [
    { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }
];

Make sure that you require config.js in your application.js file:

//= require ckeditor/init
//= require_tree ./ckeditor

Also, CSS file should be here: /app/assets/stylesheets/ckeditor/contents.css not here /app/assets/javascripts/ckeditor/contents.css

After doing the changes mentioned above you can just do: <%= f.cktext_area :img %>.

However, if you want to pass config values in text_area directly then something like this should do:

<%= f.cktext_area :img, :ckeditor => {:toolbar => 'mini'} %>

or:

<%= f.cktext_area :img, :ckeditor => {:toolbar => {'name' => 'document', 'items' => ['Source']} } %>