Add rich text editor in a rails app

Hi,
I just came across a requirement to add a rich text editor in my web application made in rails.
I used TinyMCE for this.

I loved the small js based editor not because of the features but because of the customization options it provides.

Here I show u a simple way to integrate TinyMCE with your rails app.

(Please note that this is applicable for all as its simple JS code)

The steps are:

  1. Download the latest version of TinyMCE from here
  2. Extract the tinymce folder and put it in Rails.root/public/javascripts folder.
  3. The code in application.html.erb is:

<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= 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,fullscreen,iespell,table,xhtmlxtras,save”,
theme_advanced_buttons1 : “bold,    italic,    underline,    strikethrough,    justifyleft,    justifycenter,    justifyright,    justifyfull,    bullist,    numlist,    outdent,    indent,    cut,    copy,    paste,    undo,    redo,    link,    unlink,    image,    cleanup,    help,    code,    hr,    removeformat,    formatselect,    fontselect,    fontsizeselect,    styleselect,    sub,    sup,    forecolor,    backcolor,    forecolorpicker,    backcolorpicker,   charmap,    visualaid,    anchor,    newdocument,    blockquote,    separator “,
theme_advanced_buttons2 : ”    tablecontrols,   table,    row_props,    cell_props,    delete_col,    delete_row,    col_after,    col_before,    row_after,    row_before,    split_cells,    merge_cells”,
theme_advanced_buttons3 : ”    cite,    abbr,    acronym,    ins,    del,   attribs”,
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]”,

content_css : “/custom_content.css”,
theme_advanced_font_sizes: “10px,12px,13px,14px,16px,18px,20px”,
font_size_style_values : “10px,12px,13px,14px,16px,18px,20px”

});
</script>

The code in the script tags basically initializes the tinymce.

Here you can customize your editor.

I have made some customizations like the defaukt font size is now 20pt.

There are lot of plugins and buttons which one can use.

Here is the link for documentation.

Here is the link for available plugins and buttons.

Here is a small screen shot of my editor which I got using the above code.

Note that the code in my views does not change.

Its still

 <%= f.text_area :content ,:cols=>”50″,:rows=>”10″ %>

 

 


 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s