CODEWITHSUNDEEP
ruby-on-rails-3.1ckeditorruby-on-rails-3.2
Farnaz
Farnaz

Reputation: 143

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:

error on page view and the text area is not shown at all

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

Upvotes: 5

Views: 13119

Answers (12)

Abram
Abram

Reputation: 41844

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

Upvotes: 2

ajknzhol
ajknzhol

Reputation: 6450

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.

Upvotes: 1

Zh Kostev
Zh Kostev

Reputation: 588

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

Upvotes: 0

linojon
linojon

Reputation: 1082

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

Upvotes: 2

kaboo
kaboo

Reputation: 51

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/';

Upvotes: 4

Uchenna
Uchenna

Reputation: 4089

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

Upvotes: 1

Jagdish Barabari
Jagdish Barabari

Reputation: 2703

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

Upvotes: 0

Adrian Marinica
Adrian Marinica

Reputation: 2201

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.

Upvotes: 0

0x4a6f4672
0x4a6f4672

Reputation: 28245

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

Upvotes: 0

Dave Christiansen
Dave Christiansen

Reputation: 21

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

Upvotes: 2

Makean
Makean

Reputation: 69

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.

Upvotes: 0

selbergzeta
selbergzeta

Reputation: 176

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.

Upvotes: 16

Related Questions