TinyMCE and AJAX

TinyMCE is a visual XHTML editor that you can put on your web app, to convert textareas into Word-like editors. This way you can make it possible for your clients edit pages more easily, saving you lots of trouble explaining them basics ofHTML or even easier formatting languages. TinyMCE doesn’t play well with AJAX calls, however it’s easy to fix it. I will use TinyMCE with Ruby on Rails, version 2.0.2

Let’s start with creating new application: 

                                                                     
     [hubert@swarog ~]$ rails tiny_mce_ajax                                     
       create                                                                   
       create  app/controllers                                                  
       create  app/helpers                                                      
       ...........................                                              
       create  log/development.log                                              
      create  log/test.log                                                      
     [hubert@swarog ~]$ cd tiny_mce_ajax/                                       
     [hubert@swarog tiny_mce_ajax]$ ls                                          
     README    app     db   lib  public  test  vendor                           
     Rakefile  config  doc  log  script  tmp

Now, let’s install tiny_mce plugin:

                        
     [hubert@swarog tiny_mce_ajax]$ ruby script/plugin install http://secure.near-time.com/svn/plugins/trunk/tiny_mce                                           
     [hubert@swarog tiny_mce_ajax]$ rake tiny_mce:scripts:install

TinyMCE plugin used to work right after you do it, however something has changed either in Rails or the editor plugin that requires us to make a little hack here:

First, open this file with your favorite editor:

                                     
     vendor/plugins/tiny_mce/lib/tiny_mce.rb

and put these two lines at top of the file:

                    
     require 'tiny_mce_helper'             
     include TinyMCEHelper

We’re ready to go. First, let’s create a RESTful controller:

                                                 
     [hubert@swarog tiny_mce_ajax]$  ./script/generate scaffold note body:text
     [hubert@swarog tiny_mce_ajax]$  rake db:migrate

An add TinyMCE and Prototype script links to HEAD section of our layout file:

                                                                  
                                                                                
     <%= tiny_mce %>                                                            
     <%= javascript_include_tag :defaults %>

At this point, we have TinyMCE installed in our application, that will be used on all textareas. However, this will not work if we add another textarea using JavaScript and/or AJAX calls.

To make it work, let’s add partial to our application:

file: app/views/notes/_new.html.erb

                        
     <% form_remote_for :note, @note, :update => { :success => "notes" }, :position => :bottom,     :url => { :controller => "notes", :action => "create" }, :after => "$('new_note').innerHTML = ''; "      do |f| %>                          
             <%= f.text_area 'body', :colls => 100, :rows => 10 %>
         
        <%= submit_tag "Save", :onclick=>"javascript: tinyMCE.triggerSave(); tinyMCE.execCommand('mceRemoveControl', false, 'note_body'); " %>                  
     <% end %>