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:
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<%= 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 %><br/>
<%= submit_tag "Save", :onclick=>"javascript: tinyMCE.triggerSave(); tinyMCE.execCommand('mceRemoveControl', false, 'note_body'); " %>
<% end %>
<script type="text/javascript">
tinyMCE.execCommand('mceAddControl', false, 'note_body');
</scrip> And modify our “index” view:
Listing notes
<table id="notes">
<%= render :partial => "note", :collection => @notes %>
</table>
<br />
<%= link_to_remote "New note", :url => { :action => "new" }, :update => { :success => "new_note" } %>
<div id="new_note">
</div>Add partial for single note: _note.html.erb
<tr>
<td><%=h note.body %></td>
<td><%= link_to 'Show', note %></td>
<td><%= link_to 'Edit', edit_note_path(note) %></td>
<td><%= link_to 'Destroy', note, :confirm => 'Are you sure?', :method => :delete %></td>
</tr> And modify “new” and “create” actions in our controller:
notes_controller.rb
def new
@note = Note.new
if request.xhr?
render :partial => "new"
else
respond_to do |format|
format.html # new.html.erb
format.xml { render :xml => @note }
end
end
end
def create
@note = Note.new(params[:note])
respond_to do |format|
if @note.save
if request.xhr?
render :partial => @note
return
end
flash[:notice] = 'Note was successfully created.'
format.html { redirect_to(@note) }
format.xml { render :xml => @note, :status => :created, :location => @note }
else
format.html { render :action => "new" }
format.xml { render :xml => @note.errors, :status => :unprocessable_entity }
end
end
end
ruby script/plugin install http://secure.near-time.com/svn/plugins/trunk/tiny_mce
returns :
Plugin not found: [“http://secure.near-time.com/svn/plugins/trunk/tiny_mce”]