• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Configuring TinyMCE SpellChecker with rails application

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:

[ruby]
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}
},
:o nly => [:new])

[/ruby]

**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:

[ruby]
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}
},
:o nly => [:new])
[/ruby]

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’):
[ruby]
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
[/ruby]

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 so far.

  1. Akhil Bansal says:

    This code is now included in the latest version of tiny_mce plugin.

    http://github.com/kete/tiny_mce/tree

  2. Phil Ayres says:

    Thanks for this. It worked really well for me when I added it to my current tinyMCE configuration.

  3. kevin says:

    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!

  4. kevin says:

    you’ll want to make sure the lang attribute is sanitized as well, obviously

  5. qwerty says:

    qwerty.qwerty.qwerty


Asset Pipeline has been extracted a...

The asset pipeline which was introduced in Rails 3.1, has ...

ClientSideValidations: Add/Map mode...

https://twitter.com/bansalakhil/status/256699237230845952

Action and Page caching has been ex...

With the commit c82cf81f00f Action and Page caching has been extracted ...

turbo-sprockets-rails3: Speeds up ...

http://twitter.com/bansalakhil/status/253420357841723393

EdgeRails: ActiveRecord::SessionSto...

With the commit 3324e28804 ActiveRecord::SessionStore is extracted out of Rails into ...

Asset Pipeline has been extracted a...

The asset pipeline which was introduced in Rails 3.1, has ...

ClientSideValidations: Add/Map mode...

https://twitter.com/bansalakhil/status/256699237230845952

Action and Page caching has been ex...

With the commit c82cf81f00f Action and Page caching has been extracted ...

turbo-sprockets-rails3: Speeds up ...

http://twitter.com/bansalakhil/status/253420357841723393

EdgeRails: ActiveRecord::SessionSto...

With the commit 3324e28804 ActiveRecord::SessionStore is extracted out of Rails into ...