Adding a text editor to a rails app

In an app I am building I need to give the user the ability to create well fashioned html in an easy way.

My first attempt was to use the textile markup language, using the acts_as_textiled plugin. This was alright but requires that the users learn a markup language that is not completely intuitive. I also had to install the Redcloth gem, which I wasn't entirely sure would be easy to install on the platform I was deploying to. I decided to look for another option.

After reading this article I decided to opt for the tinyMCE option. This was mainly because on the demo widgEditor didn't seem to remember any picture resizing that went on. Following the instructions here I performed the following steps to get the editor working (mostly shamelessly copied from the instructions in the linked blog).

1. Download TinyMCE

2. Make a new folder in your rails app: ‘public/javascripts/tiny_mce’

3. Copy the contents of the ‘jscripts/tiny_mce’ folder from the download into this new folder in your rails app. (So now you should have a folder in your rails app: ‘public/javascripts/tiny_mce/’ which contains the ‘langs’, ‘plugins’ and ‘themes’ folders, amongst other things.)

4. Make a new file: ‘public/javascripts/mce_editor.js’ and add your TinyMCE initialisation code, e.g.

tinyMCE.init({
   theme:"advanced",
   mode:"textareas",
   plugins : "safari",
   ...
});

(Get more information on the TinyMCE API and configuration options from the TinyMCE wiki)

As I wanted the TinyMCE editor to only apply to to a single text_area (on a page of several) I added the line "editor_selector: mce-editor", to select only text_areas with a css class = "mce-editor".

5. Add a method to the application helper

def use_tinymce
   @content_for_tinymce = ""
   content_for :tinymce do
     javascript_include_tag "tiny_mce/tiny_mce"
   end
   @content_for_tinymce_init = ""
   content_for :tinymce_init do
     javascript_include_tag "mce_editor"
   end
end

6. In the application layout (views/layouts/application.rhtml), yield the appropriate contents. According to this TinyMCE wiki page the order of javascript files is important.

  
  <%= javascript_include_tag "prototype" %>
  <%= yield :tinymce %>
  <%= javascript_include_tag "scriptaculous" %> 
  <%= javascript_include_tag "effects" %> 
  <%= javascript_include_tag "controls" %>
  <%= yield :tinymce_init %> 
  

7. Now, to use tinymce in a view or layout, just make a call to the new helper method e.g.

  <% use_tinymce -%>
  <%= textarea_tag :foo, :bar, ... :class => "mce-editor" %>

8. Although TinyMCE does do some tidying up of the html code, you will also want to add white-listing to your implementation to prevent people submitting anything dodgy. (Note that for some of the more advanced TinyMCE formatting, you will need to allow the “style” attribute in your whitelist).

This was as simple as doing

script/plugin install http://svn.techno-weenie.net/projects/plugins/white_list/

and changing the html-enabled fields from

<%=h @band.description %>

to

<%= white_list @band.description %>

and restarting the webserver (!).