Integrating CKEditor with Rails 3.2

Question

Similar to Integrating CKEditor with Rails 3.1 Asset Pipline

I am trying to integrate ckeditor with my rails 3.2 application.<

Answer 1

I had a similar while trying to combine multiple stylesheets and javascripts into one in a Rails 3.1 application without asset pipeline, using the stylesheet_link_tag and javascript_include_tag with the cache option. In this case the files are not always loaded in the correct order, and the paths to other ckeditor files like the configuration file "config.js" and language files like "lang/en.js" are not well defined. This means you will get other additional "NetworkError: 404 Not Found" errors while retrieving them, and the configuration and language files are not available, which causes futher fatal errors like the one mentioned above, Uncaught TypeError: Cannot read property 'options' of undefined.

Using a Javascript timeout did not help, and setting the CKEDITOR_BASEPATH did not help, either, at least if you define it in the application.js just before the editor is loaded as I did (maybe the order matters here?). To make it work it is possible to extract the ckeditor javascript from the common cached file (or take it out of the asset pipeline) and load it seperately after the rest of the files with

<%= javascript_include_tag 'ckeditor/ckeditor.js' %>

Answer 2

I encountered the same problem and found a solution.Go to the following Link: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path

<script type="text/javascript">
var CKEDITOR_BASEPATH = '/assets/ckeditor/';
</script>
<%= javascript_include_tag "application" %>

you don't need to set config.assets.precompile anything.

Answer 3

Note that many of these answers refer to the ckeditor gem ( https://github.com/galetahub/ckeditor/ ), not just the ckeditor project ( http://ckeditor.com ) especially where you see reference to the ckeditor/init.js file.

There are other gems for ckeditor integration, including ckeditor-rails ( https://github.com/tsechingho/ckeditor-rails ) which is a lighter weight, simpler solution.

See also Integrating CKEditor with Rails 3.1 Asset Pipline

Answer 4

There are many recent posts on this subject, but none of them (including defining the BASEPATH as suggested above) worked for me, so I thought this might be helpful to some people.

I solved the problem by copying the files from directory with the path

~/.rvm/gems/ruby-1.9.3x/gems/ckeditor-3.7.0.rc3 (the 'x' is app-specific, yours would be different)

to the directory /assets/javascript.

Then I was able to edit the configuration for the toolbar in the config.js file to make the editor have the options I wanted. This works perfectly for me since I always want the same options in this app.

UPDATE

I now have it working with the config.js file in the asset pipeline, where it belongs, but with the reset of the ckeditor code residing in my .rvm gemset. I think there was a conflict because I was trying to redefine their toolbar, named "Easy." When I made a new toolbar & set that one to be active, the pipeline seems to work fine.

ruby-on-rails-3.2 ckeditor

Answer 5

STEP 1: Add gem 'paperclip' and gem "ckeditor" in your gemfile.

STEP 2: Bundle Install.

STEP 3: rails generate ckeditor:install --orm=active_record --backend=paperclip

STEP 4: Place config.autoload_paths += %W(#{config.root}/app/models/ckeditor) in application.rb

STEP 5: Place mount Ckeditor::Engine => "/ckeditor" if not present already and run db:migrate

STEP 6: Open application.html.erb and place this <%= javascript_include_tag 'ckeditor/ckeditor.js' %> in header.

STEP 7: Place this in footer(above the body tag) in application.html.erb

<script type="text/javascript">
  $(document).ready(function() {
    if ($('textarea').length > 0) {
        var data = $('textarea');
        $.each(data, function(i) {
            CKEDITOR.replace(data[i].id);
        });
    }
 });
</script>

STEP 8: Restart the WEBrick SERVER. That's it.

Answer 6

The issue of ckeditor with rails 3.2 is javascript library path not loading for production environment so we need to modify path correctly. I did following steps :

In application.html.erb

 <%= javascript_include_tag "application" , '/assets/ckeditor/ckeditor.js', '/assets/ckeditor/init.js'%>

In production.rb file

 config.assets.precompile += %w(ckeditor/init.js)

run assets

rake assets:precompile:all

These steps worked for me with rails version 3.2.8