Amazon.com Widgets
...not so private reflections of greg.newman
Categories & Search

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.

Categories:

16 Comments

jason
On Thursday, Jul 6

so u need php also?

the JS is 130kb... not tiny :)

But maybe it is in comparison

Greg
On Thursday, Jul 6

If you want to use the filemanager and imagemanger plugins "as is", yes. I don't have any interest in recoding them in Rails. I needed this for a simple project that we couldn't use textile for.

Tiny_130kb, that's funny. It does run alot faster than FCK from what I have seen though.

mike
On Monday, Aug 21

thanks. this is helpful. was able to slide it in a little app I'm creating in about 5 minutes.

Forgive this newbie question but thought I'd ask it before I tear my hair out looking for answers:

When the input from tinymce renders in my show view, the < and > get swapped in for the tags. I want it to show as html.

Thoughts?

Sebastian
On Saturday, Oct 21

Mike > maybe you are escaping the html characters with the "convert html to tekst"-helper (don't remember what it is called) like this?

That might be a reason...

Seb

Sri
On Monday, Dec 4

I have succesfully implemented TinyMCE. Has anyone tried to change the value of a tinyMCE textarea using rjs? I have repeatedly tried: page['test_text_div'].value = "test" (where my textarea id is test_text_div). When I disable TinyMCE, this works (but of course, I lose the TinyMCE features). Any help would be appreciated.

Thanks!

Niall Doherty
On Sunday, Feb 18

I think TinyMCE may have changed something, because now you need the js tag in the head pointing to this location:

tinymce/jscripts/tiny_mce/tiny_mce

Ivan Storck
On Thursday, Mar 1

How do you set the options for the editor?

Hendrik Mans
On Saturday, Mar 3

How do you set the options for the editor?

greg@busyashell.com
On Sunday, Mar 4

The editor documentation has all of the javascript hooks you would use to set the options. Simply include them in your view and it should work as it normally would.

Björn
On Thursday, Nov 22

Hi!

Maybe i'm stupid but i can't get this to work. When i try to input the code in step 5 i get some errors.

"Invalid char `\200' in expression"

"Request"
"Parameters: {"id"=>"1"}"

I don't know what i do wrong..

greg.newman
On Thursday, Nov 22

Hi BJORN,
I updated this post the other day. Go back up to the top, first sentence, there's a link to a TinyMCE plugin for rails now that will make your life ALOT easier. Works like a charm.

Hope this helps!

Björn
On Friday, Nov 23

Hi Greg!

Well i've tryed to get the plugin to work to.. but i have no sucess yet..
I cant get the Tiny MCE to fire up. I still only get the normal text area field..

greg.newman
On Friday, Nov 23

Did you include the javascript tags in your header?



It will then add the toolbar to any text_area it finds.

Björn
On Friday, Nov 23

Greg, forget my last post! i got it to work! weee

greg.newman
On Friday, Nov 23

Good to hear. Hope it all works out for you!

MT
On Tuesday, Jan 1

I'm trying to use TinyMCE in Rails in a partial. Loading the partial using Ajax on a select jump thingie. Tiny works fine with normal pages. But i guess when you're dynamically loading text_areas it won't detect it. Workaround anyone?

Leave a comment