Integrate FCK Editor into Typo Blog

Well, after much avail, my blog is back up and running. I upgraded to Typo 4.0.3, along with ruby to 1.8.5 and rails to 1.1.6 and loving it. Going from Typo 2.6.0 to 4.0.3 is a pleasant migration, and well worth the effort. The backed is cleaned up, easier to manage, and includes many new features and sidebars.

So, while I was doing all of this I decided to integrate the popular FCK Editor. This is a quick overview of what I did:

1. Copy the fckeditor.js, fckconfig.js, fcktemplates.xml, fckstyles.xml files into your {typo directory}/public/javascripts folder.
2. Change the location of FCKeditor on line 33 of fckeditor.js to ‘javascripts’:

^?View Code COLDFUSION
1
this.BasePath = '/javascripts/' ;

2. Place the editor folder into the public/javascripts folder as well.
3. Configure FCK Editor to suit your needs and your server environment. There is plenty of documentation on this, so I won’t go into any details here.
4. Add the javascript include tag into app/views/layout/administration.rhtml, like so:

^?View Code COLDFUSION
1
<%= javascript_include_tag "fckeditor" %>

5. Define a helper to create the FCK editor text area field in the app/helpers/application_helper.rb file:

^?View Code COLDFUSION

def fckeditor_text_field(object, method, options = {})
text_area(object, method, options ) +
javascript_tag( "var oFCKeditor = new FCKeditor('" + object + "[" + method + "]');oFCKeditor.ReplaceTextarea()" )
end

6. Call the fckeditor_text_field helper within your app/views/admin/content/_form.rhtml file:

^?View Code COLDFUSION

1	<%= fckeditor_text_field( "article", "body") %>

Web Biz