Devigner blog about development and design

Using TinyMCE in Rails

UPDATE: NOVEMBER 20TH, 2007 – There is now a tinymce plugin for rails. How to get it and install it can be found on the rails wiki.

This is a follow up to the prior post on how to use TinyMCE in your rails app. I have been able to get the imagemanager and filemanager plugins working successfully within my rails app and here’s how I did it. I’m repeating alot of my prior post so you don’t have to jump around.

There’s alot of discussions about how to integrate Fckeditor into your rails app, but what about TinyMCE? I prefer Tiny over FCK because Tiny encloses carriage returns with paragraph tags where FCK uses line breaks. I think it keeps things simple and when there is a person who’s not too knowledgeable about html (most clients), it helps keep them inline.

So, here’s how I integrate TinyMCE into my rails app. It’s much simpler than the FCK route.

1. Download TinyMCE from http://tinymce.moxiecode.com/download.php.
2. Extract the TinyMCE folder into your public/javascripts folder.
3. In your view, place the following script into your head tag.

<%= javascript_include_tag "tiny_mce/tiny_mce" %>

4. Add this javascript to your view.
&lt;script type="text/javascript" ><br /> &#xA0;&#xA0;tinyMCE.init({<br /> &#xA0;&#xA0;&#xA0;&#xA0;mode:"textareas", editor_selector : "tiny_mce"<br /> &#xA0;&#xA0;});<br /> &lt;/script>

5. In your form view, or wherever your form lives. Call the editor with the following snippet. In my case, I’m using it in a scaffold generated form and the text field is named ‘copy’.

&lt;%= text_area 'pages', 'copy' , :cols => "60", :rows => "20",<br /> &#xA0;&#xA0;&#xA0;&#xA0;:class => 'tiny_mce' %>

To get the filemanager and imagemanager plugins working you need to make an edit in one of the javascript files. Open the file “mcfilemanager.js” which resides in the plugins/filemanager/jscripts folder and change line 93 to read:

var url = this.getScriptPath() + "/../../filemanager/frameset.php?a=b";

That’s the only change I needed to make to get it working. Make sure your images directories are writable and have fun.