Add rich text editor in a rails app

Posted on August 13, 2011

0


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″ %>

 

 


 

 

Advertisements
Posted in: Rails app