| 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.
Download widgEditor
Extract the files
Copy the widgEditor.js file into your applications public/javascripts folder (you can configure it by changing this file)
Copy the widgEditor.css file into your applications public/stylesheets folder.
Copy all the images from the widgEditor distribution to your public/images folder.
Include the javascript and css files in your layout file.
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.
Download TinyMCE and place the tiny_mce directory in your applications public/javascripts directory.
Include tinymce/tinymce and
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. |
