Configuring TinyMCE SpellChecker with rails application

Published on Author Akhil Bansal5 Comments

Last month I spent much time while configuring tinymce’s spellchecker with my rails application. But finally I got it working and thought I could be a good post. To configure this I took some help form gusto’s blog and google (as usual). So, Lets do it now without spending more time.

First of all create a rails app and install tinyMCE rails plugin:
1) rails tinymce
2) script/plugin install git://github.com/kete/tiny_mce.git
3) rake tiny_mce:scripts:install

We will be using aspell utility to check spellings so install “aspell” first. You can do it by “apt-get install aspell” or “port install aspell”

Once it is done then add following two lines in your layout(application.html.erb):
1) <%= javascript_include_tiny_mce_if_used %>
2) <%= tiny_mce if using_tiny_mce? %>

Now consider that I have a Users controller and User model with a text field ‘about_me’, and I want to use tinymce with spellchecker for that field.

To convert about_me textarea(new user form) to tinyMCE, add following code to users controller:

uses_tiny_mce(:options => {
     :theme => 'advanced',
     :mode => "textareas",
     :height => 100,
     :content_css => "/stylesheets/base.css",
     :remove_script_host => true,
     :theme_advanced_toolbar_location => "top",
     :theme_advanced_toolbar_align => "left",
     :theme_advanced_buttons2 => %w{ spellchecker },
     :editor_selector => 'mceEditor',
     :plugins => %w{ contextmenu paste spellchecker}
      },
     :only => [:new])

**Please cross check that you have added(enabled) ‘spellchecker’ in :plugins and added spellchecker button(I have added it in :theme_advanced_buttons2).

Now if you go to new user form you will see that about_me text area is replaced by tinymce editor with spellchecker button.

Now, add two more lines for spellchecker in above tinymce editor configuration:

1) :spellchecker_languages => “+English=en” (english language)
2) :spellchecker_rpc_url => “/users/spellchecker” (rails url where spellchecking will be done)

So our final configuration will be look like:

uses_tiny_mce(:options => {
     :theme => 'advanced',
     :mode => "textareas",
     :height => 100,
     :content_css => "/stylesheets/base.css",
     :remove_script_host => true,
     :theme_advanced_toolbar_location => "top",
     :theme_advanced_toolbar_align => "left",
     :theme_advanced_buttons2 => %w{ spellchecker },
     :editor_selector => 'mceEditor',
     :spellchecker_rpc_url => "/users/spellchecker",
     :spellchecker_languages => "+English=en",
     :plugins => %w{ contextmenu paste spellchecker}
      },
     :only => [:new])

Now download Spelling.rb, save it as spelling.rb in your rails lib dir and change ASPELL_PATH at line 7 according to your aspell installation.

Once it is done include this module(“include Spelling”) in application.rb or you controlller (here in our case users controller).

Now, create an action in named spellchecker in you controller(‘users’):

  def spellchecker
    headers["Content-Type"] = "text/plain"
    headers["charset"] =  "utf-8"
    suggestions = check_spelling(params[:params][1], params[:method], params[:params][0])
    results = {"id" => nil, "result" => suggestions, 'error' => nil}
    render :text => results.to_json
    return
  end

Now, Type some thing in tinymce editor and click on spellchecker button. It will highlight misspelled words.

2.png

And when you click on highlighted misspelled word it will show suggessions.

3.png

Enjoy

5 Responses to Configuring TinyMCE SpellChecker with rails application

  1. you shouldn’t use spelling.rb, as it will open your site to hacking (very easily).

    make a tempfile instead:
    tf = Tempfile.new(“aspell_buf”) # adds pid
    tf.write(spell_check_text)
    tf.seek 0
    spell_check_response = `cat #{tf.path} | aspell -a -l #{lang}`
    tf.close!

Leave a Reply to qwerty Cancel reply

Your email address will not be published. Required fields are marked *