Integrating CKEditor with Rails 3.2

问题:

Similar to Integrating CKEditor with Rails 3.1 Asset Pipline

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

I have all ckeditor files copied under /app/assets/javascripts/ckeditor/*.

I have the following lines in my application.js and application.js is included in my layout file:

//= require jquery
//= require jquery_ujs
//= require ckeditor/ckeditor
//= require_self

Taken it from the answer to Integrating CKEditor with Rails 3.1 Asset Pipline

I can understand that I need to add something like:

config.assets.precompile += your_files

to my development.rb file so that all the ckeditor files are precompiled when the application is loaded.

Although I tried a couple of paths, non worked and I keep getting the following error:

Can someone please tell me the right regular expresion to include all files for precompile, please?

回答1:

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.

回答2:

rails 3.2 fix:

1. in assets/javascripts/application.js

   ... blablabla ...
   //= require ckeditor_fix        #- add this line
   //= require ckeditor/init
   //= require_tree .

2. in assets/javascripts create new file ckeditor_fix.js

   var CKEDITOR_BASEPATH = '/assets/ckeditor/';

回答3:

I used this guide to add ckeditor to activeadmin in Rails 3.2 with the asset pipeline enabled: https://github.com/gregbell/active_admin/wiki/CKEditor-integration

It worked like a charm.

The only additional thing I did was add this line to my environment:

config.assets.precompile += ['active_admin.css', 'active_admin.js', 'ckeditor/init.js']

回答4:

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

回答5:

Finally an easy working solution.

Download the CKEditor Zip file, extract the files and place them in the sub directory “javascripts/ckeditor”, add the main JS file to the layout..

javascript_include_tag 'ckeditor/ckeditor.js'

..and write a bit JavaScript code which replaces textareas by CKEditor instances:

$(document).ready(function() {
   if ($('textarea').length > 0) {       
     var data = $('textarea');
     $.each(data, function(i) {
       CKEDITOR.replace(data[i].id);
     });     
   }  
});

Credit Source

回答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

回答7:

This is just an addition. I tried all this and it did not work for me so what i did was to change my ckeditor gem to gem 'ckeditor'

And added this to my application.js

//= require ckeditor/init

Then to precompile my assets, i added this to my production.rb file

config.assets.precompile += Ckeditor.assets

and it all worked like magic

回答8:

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.

回答9:

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

回答10:

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' %>

回答11:

I fought with this issue for some hours, but the problem was not with CKEditor, but with my code. I included the ckeditor.js script inside my partial view which was rendered via AJAX and yes, you guessed it, wasn't working. Once I moved the script including inside the master layout (_Layout), the issue was solved. Of course, this happened to me while working in ASP.NET MVC. For other web frameworks, I have no solution.

回答12:

Have similar issue. For me it was fixed by overriding default precompile task (I used Rails 4 and CkEditor 4).

1. Add to application.rb config.assets.precompile += ['ckeditor/*']
2. In application.js //= require ckeditor/init
3. Create file lib/tasks/precompile_hook and paste text from this answer Precompile hook