Scott Rutherford

We (Cominded) have been looking at various rich text editors to play with and I went through a few before eventually deciding that FCKEditor was worth a more detailed look (Others included TinyMCE which is available as a Rails plugin, but isn’t really upto FCK’s standards. It did have the advantage of being under the Creative Commons license, but as we are creating services this ended up not being the deciding factor).

The original idea for this came from: ‘Integrate FCKEditor with your Ruby on Rails application’ By Joshua M Charles (which along with the other link below pretty much cover all of this, I just wanted it all together)

Bascially I wanted to extend the functionality of the helper to be useable in all situations (html / ajax) and to as far as possible make it so that a single line include created all the required code. With the helper as defined below you declare the usage style using the :ajax switch. With this set to true the helper produces a hidden field as well as the textarea. This field is named as the required parameter and the contents of the editor are copied into it on submit. For this reason you need to include the before callback as shown in the ‘Using with AJAX’ section.

The ‘CustomConfigurationPath’ line is to due with the resource manager implmentation and can be omited if you are not using that are of functionality.

A first step for all that follows is to ensure that FCKEditor is installed at ‘public/javascripts/fckeditor’.

module ApplicationHelper
  def fckeditor_textarea(object, field, options = {})
    value = eval("@#{object}.#{field}")
    value = value.nil? ? "" : value
    name = fckeditor_element_id(object, field)
    form_field = "#{object}[#{field}]" 

    if options[:ajax]
      inputs = "<input type='hidden' id='#{form_field}' name='#{form_field}'>\n"+    
               "<textarea id='#{name}' name='#{name}'>#{value}</textarea>\n" 
    else 
      name = "#{object}[#{field}]" 
      inputs = "<textarea id='#{name}' name='#{name}'>#{value}</textarea>\n" 
    end

    inputs + 
    javascript_tag( "FCKeditorAPI = null;\n" +
                    "__FCKeditorNS = null;\n" +
                    "var oFCKeditor = new FCKeditor('#{name}');\n"+
                    "oFCKeditor.Width = '100%'\n"+
                    "oFCKeditor.Height = '100%'\n"+
                    "oFCKeditor.Config['CustomConfigurationsPath'] = '/javascripts/fckeditor/fckcustom.js';\n"+
                    "oFCKeditor.ReplaceTextarea();\n")   
  end

  def fckeditor_element_id(object, field)
    id = eval("@#{object}.id")
    "#{object}-#{id}-#{field}-editor"    
  end

  def fckeditor_div_id(object, field)
    'div-'+fckeditor_element_id(object, field)
  end

  def fckeditor_before_js(object, field)
    textarea_id = fckeditor_element_id(object, field)
    form_field = "#{object}[#{field}]" 
    "var oEditor = FCKeditorAPI.GetInstance('"+textarea_id+"'); $('"+form_field+"').value = oEditor.GetXHTML();" 
  end
end

Using with AJAX

<%= form_remote_tag :url => { :action => 'view', :id => @comment }, 
                    :before => fckeditor_before_js('comment', 'comment') %>

    <div id="<%= fckeditor_div_id('comment', 'comment') %>">
        <%= fckeditor_textarea( "comment", "comment", :ajax => true ) %> 
    </div>
<% end_form_tag %>

Using with HTML

<%= form_tag :action => 'new' %>

    <div id="<%= fckeditor_div_id('comment', 'comment') %>">
        <%= fckeditor_textarea( "comment", "comment" ) %> 
    </div>
<% end_form_tag %>

Using the Resource Manager

How to do this is outlined here:

1. ‘Implementation details for FCKEditor integration with Ruby on Rails’
2. FCKEditor On Rails. This provides much of the functionality detailed above, except for the use with AJAX. I haven’t actually tested that it doesn’t work with AJAX but looking at the code I strongly suspect that that willl be the case. However, all in all it may be a nice starting point to then include the missing elements of the helper above.