Adding a Rich Text Editor to your Rails Application

Posted April 23, 2006

Adding a rich text editor to your application enables users to markup their input text without having to know a markup syntax such as markdown or html. This page describes how to easily add this functionality to your rails application.

There are several free javascript rich text editors that can be incorporated into your application. These work by providing a javascript WYSIWYG interface that allows the user to generate the required html for each element that is enabled in the interface. So for example, if the user selects “XYZ” and presses the bold button, this generates the text <b>XYZ</b> which is saved to the database.

Since using these editors allows users to create html that will be input into the database, make sure that you sanitize the html when you are rendering it back from the database. You can use rails’ sanitize method or since you probably want to allow several tags you could use this Ruby sanitize function with the okTags parameter set to whatever set of tags you want to allow. Alternatively check out the whitelist recipe in the rails recipes book.

widgEditor

widgEditor is a small simple lightweight editor. It provided basic rich functions such as bold, italics, links, lists, images and headings. Its very easy to get setup with your rails application.

  1. Download widgEditor
  2. Extract the files
  3. Copy the widgEditor.js file into your applications public/javascripts folder (you can configure it by changing this file)
  4. Copy the widgEditor.css file into your applications public/stylesheets folder.
  5. Copy all the images from the widgEditor distribution to your public/images folder.
  6. Include the javascript and css files in your layout file.
  7. Give any text field you want to be an editor field a class of “widgEditor”.

Here is an example of what you might have in your view file:


<%= stylesheet_link_tag 'widgEditor' %>
<%= javascript_include_tag "widgEditor" %>
<%= text_area 'node', 'content', :cols => "50", :rows=>"3", :class=>"widgEditor" %>

TinyMCE

TinyMCE is a much more full featured rich text exitor. Check out the demo to see all the features that can be enabled for it. It is easy to incorporate TinyMCE into your rails application.

  1. Download TinyMCE and place the tiny_mce directory in your applications public/javascripts directory.
  2. Include tinymce/tinymce and
  3. Call tinyMCE.init with the options that you want enabled. This call controls which of the available TinyMCE elements are enabled. See the TinyMCE documentation or look at the examples in the distribution for a list of all the options.

All your text area fields will now be TinyMCE editor instances. Below is an example of what you might have in your layout file. It only enables a small subset of the available TinyMCE widgets.


<%= javascript_include_tag 'tiny_mce/tiny_mce' %>
<script language="javascript" type="text/javascript">
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced",
            convert_urls : false,
            plugins : "emotions,preview",
            theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,
                bullist,numlist,link",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|
                border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],
                hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
        });
</script>

In your view create a text area.


<p><label for="blog_content">Content</label><br/>
<%= text_area 'blog', 'content', :cols => "50"  %></p>

TinyMCE includes quite a lot of javascript files. It is a good idea to include these files only on pages that actually use the rich text editor. This will save on bandwidth and make for quicker page loads for the pages that aren’t using the rich text editor. You could do this by having a separate layout for the part of the application that uses the TinyMCE or by adding a condition in your layout file that checks the controller name before deciding to load it.

Also worth investigating

Another option worth investigating is FCKEditor. I haven’t tried this but it looks a bit more complicated that those discussed above.

Update (05/06/06)

You can now integrate TinyMCE using the TinyMCE plugin created by Blake Watters. See John Wulff’s tutorial for more details.

Thank you for providing this excellent review and usage of WYSIWYG editors and showing how easy it is to add them to you rails app.

Submitted by Skiz on Sat, 2006-05-13 23:53.
»

Excellent article! I'll definitely be coming back to this when I start the admin section of my blog.

Submitted by carlos on Tue, 2006-06-06 06:26.
»

For "widgEditor", I do think it's a very good rich text editor, while I want know how to setup a db column to handle the rich text field. Appreciate your advise. Thank you

Submitted by Terry on Tue, 2006-06-06 09:58.
»

Terry,

Anything that accepts text input would work. CHAR, VARCHAR, TEXT. Having said that, if used for anything large, you'll want this to be of type TEXT since I believe that VARCHAR tops out at 8000 characters.

Submitted by Carlos on Tue, 2006-06-20 06:24.
»

There seems to be two potential pitfalls using widgEditor.

The latest version on date of writing requires that you need to have an "id" attribute also on each textbox you use it on (unlike your example).

Also, if you have an "onload" attribute on your "body" element, the editor seems to refuse to start.

But otherwise, great article! Thank you! :)

Submitted by Charl van Niekerk on Fri, 2006-12-08 16:37.
»

Implemeting FCKEditor in RoR applications is realy simple.

Put
<%= javascript_include_tag "fckeditor" %>
in header of .rhtml file where is textarea.

then put this:

window.onload = function(){
var oFCKeditor = new FCKeditor( 'fck' ) ;
oFCKeditor.ReplaceTextarea() ;
}

and finnaly texarea:
<%= text_area 'article', 'text', :id => 'fck' %>

Submitted by sloser on Sat, 2006-12-09 14:08.
»

In the case of widgEditor you have to add a method in helper that is:-


def widgEditor_text_field(object, method, options = {})
    text_area(object, method, options ) +
    javascript_tag( "var widgeditor = new widgEditor('" + object + "_" + method + "');widgeditor.replacedTextareaID()" )
end
Submitted by Nishant Sinha on Fri, 2006-12-15 11:12.
»