Rails 3.0.x and CKEditor

Hi coders!

Have you used ckeditor before? IMO, it’s a great tool for WYSIWYG editor. It provides you with complete features that are needed to write. Actually, install it in your web application is easy, but for some features you need to create another script. This what I’m going to share you about. How to install ckeditor in your Rails 3 application.

When I tried this for the first time, I use this page as my reference. Now in this post, I may repeat the steps but I also want to include a step which is not mentioned on that page. Well, let’s begin :

  1. Add this code in your Gemfile : gem 'ckeditor', '3.4.2.pre', then run bundle install
  2. Run this command : rails generate ckeditor:base. This will generate all ckeditor files in your rails project.
  3. Next step is preparing for migration. I use paperclip as my attachment plugin, so you should run this command : rails generate ckeditor:migration
  4. Now, let’s do the migration by running this command : rake db:migrate
  5. Add this code in your config/application.rb file :
    config.autoload_paths += %W( #{config.root}/app/models/ckeditor )
  6. Your initial settings is done. and now let’s use it in your view files. CKEditor tag is usually used in a form, so in my case, I always add it in a form helper. This what it looks like in my view :
    <%= javascript_include_tag :ckeditor %> #this will include external files needed for ckeditor
    <%= form_for @page do |form| %>
      <%= form.cktext_area :notes, :toolbar=>'Full', :width=>'400px', :height=>'200px' %>
    <% end %>
  7. If you think it’s completely done, well it’s not. In my experience, I had trouble when I need to attach an image inside the editor. Well, the problem is in its original file hasn’t included some codes. This is what you need to include in this file ~/.rvm/gems/ree-1.8.7-2011.03/gems/ckeditor-3.4.2.pre/lib/ckeditor/engine.rb (I used RVM) :
    config.autoload_paths << File.expand_path(File.join(File.dirname(__FILE__), ".."))

    Put that code just inside the class.

Now, you’re really done with the settings. You can use ckeditor in your rails app.

Enjoy!

About these ads

16 thoughts on “Rails 3.0.x and CKEditor

  1. hello, i have a problem.
    when i code
    config.autoload_paths += %W( #{config.root}/app/models/ckeditor )
    to application.rb, it occurs error.

    Routing Error

    You have a nil object when you didn’t expect it!
    You might have expected an instance of Array.
    The error occurred while evaluating nil.+

    what’s happening?
    can you help me.
    thanks so much!

    • Hi, thank you for stopping by.
      I just tried the same step I wrote and it went well.
      Please check maybe you missed 1 or some steps before writing that code on config/application.rb.
      Does this message show up after you finished all the settings?

  2. #this will include external files needed for ckeditor

    ‘Full’, :width=>’400px’, :height=>’200px’ %>

    from the code above
    I got this error
    “No expansion found for :ckeditor”
    What should I do???

    • I haven’t seen that kind of error before, actually. But I just googled a bit and I found out that “no expansion found for” error is caused by rails version compatibility. What rails version do you use? Is it 3.0.4?

      • I used Rails 3.0.7 but it works now…
        The problem is I don’t see any toolbar on the top of textarea. It display only the textarea with the size width=>’400px’, :height=>’200px’.
        Do I need to customize something or add some codes ?

      • You didn’t forget to put this code
        in right?
        With that tag, rails will include all he javascripts and css tag needed for ckeditor. In your problem, I think your app didn’t recognize the style and javascripts code.

  3. hi
    i used rails 3.0.1
    The problem is I don’t see any toolbar on the top of textarea. It display only the textarea with the size width=>’400px’, :height=>’200px’.
    Do I need to customize something or add some codes ?

  4. hai,
    i am new to rails , middle of application i cannot understand 6th and 7th step means that code to be added in which file of rails structure and remaining steps are runned successful plz give me solution

    • Hi Murthy,
      by the way what version of rails do u use? For step no 6, you can place it in the view file (RAILS_ROOT/app/view//.rb. For step 7, you should know the location of CKeditor gem files location. In my case, I used RVM, so the file that I should open is located in ~/.rvm/gems/ree-1.8.7-2011.03/gems/ckeditor-3.4.2.pre/lib/ckeditor/engine.rb. Open it and place the code just after the class definition. It should work fine.

  5. Thanks a lot, I got ckeditor working in my rails 3.0.3,
    I had previously bundled gem “paperclip”, “~>2.0″ and I didn’t need to use step 7.

    Thanks a lot because I’ve read a lot of tutorials that doesn’t work.

  6. Hi In # 7 you show the code change which needs to be made in the ckeditor gem. Adding this code fixed the problem locally but when i deploy to heroku its still broken as the gem being installed on prod server doesn;t have this fix.

    How else could i make this fix so i can commit it with my code?

  7. i have added the following in my application.rb to do what you said in #7

    config.autoload_paths += %W( #{Gem.loaded_specs['ckeditor'].full_gem_path+”/lib”} )

    seems to do the job

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s