Tiny MCE living in your Rails Forms

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.

UPDATED: This narrative has been updated.

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.

<script type="text/javascript" ><br />   tinyMCE.init({<br />     mode:"textareas", editor_selector : "tiny_mce"<br />   });<br /> </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'.

<%= text_area 'pages', 'copy' , :cols => "60", :rows => "20",<br />     :class => 'tiny_mce' %>

I hope someone finds this useful. In the future, i'll be trying to integrate the filemanager and imagemanager plugins into my rails app.

14 Comments

gr3g
On Wednesday, May 3

UPDATED: This narrative has been updated.

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.

<script type="text/javascript" >

  tinyMCE.init({

    mode:"textareas", editor_selector : "tiny_mce"

  });

</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'.

<%= text_area 'pages', 'copy' , :cols => "60", :rows => "20",
:class => 'tiny_mce' %>

I hope someone finds this useful. In the future, i'll be trying to integrate the filemanager and imagemanager plugins into my rails app.

Nathan
On Saturday, May 13

Thanks so much for this ... I currently working with a client who knows *nothing* about HTML. I'm very interested to see if you can get the imagemanager working ...

msksatish@gmail.com
On Sunday, Jun 11

Hi,

That's sweet; But the toolbar is aligned bottom of the textarea, how do I ensure that the toolbar is on top of the text area??

Greg
On Sunday, Jun 11

To position it above the text field, use this:

tinyMCE.init({
...
theme_advanced_toolbar_location : "top"
});

Ben Kittrell
On Monday, Oct 2

I thought you might be interested in my "Ruby on Rails GZIP Compressor":http://garbageburrito.com/blog/entry/83. I just finished it and I'm looking for some people to test it out and give me some feedback.

Dave Pook
On Thursday, Feb 1

Thought you might be interested in this function in Tiny MCE, does the work for you, just call it before sending/itterating through the form:

tinyMCE.triggerSave()

found at http://wiki.script.aculo.us/scriptaculous/discuss/Form.serialize

Tom
On Monday, Mar 12

I tried similar with wyzz editor (found at: http://www.wyzz.info/) which is far less 'complicated' and is lighter (fewer options) than tinyMCE. The same as you did, i put the *.js file in the javascripts folder and in the view:

make_wyzz('editable');

//editable is the class of the textfield

Some minor bugs though, like relative naming of anchors(this is mainly because of the rails framework), but nothing that can't be solved with a little knowledge of javascript...

Tom
On Monday, Mar 12

make_wyzz('editable');

//editable is the class of the textfield

Some minor bugs though, like relative naming of anchors(this is mainly because of the rails framework), but nothing that can't be solved with a little knowledge of javascript...

Want work with Ajax
On Thursday, Apr 26

does not work if I pop up the div into html page by ajax. The div with textarea. :(

dalomaltam
On Wednesday, Apr 16

[url=http://www.care2.com/c2c/people/profile.html?pid=553097034]Phentermine[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3453]Buy tramadol online without prescription[/url]
[url=http://support.travispeak.com/forums/showthread.php?t=54]ultram next day[/url]
[url=http://us.cyworld.com/Buy-Phentermine-now]Buy Phentermine[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3459]xanax without prescription[/url]
[url=http://us.cyworld.com/Cialis-online]Cialis[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3490]Prozac without prescription[/url]
[url=http://streetball.ipbhost.com/index.php?showtopic=29637]Valium without prescription[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3488]paxil cash on delivery[/url]
[url=http://us.cyworld.com/Viagra-online]Viagra[/url]
[url=http://www.anyboard.net/suggest/posts/566677.html]Buy Cialis Without Perscription[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3450]No prescription phentermine online[/url]
[url=http://www.anyboard.net/suggest/posts/566668.html]Next Day Delivery Cialis[/url]
[url=http://vegweb.com/index.php?action=profile;u=87377]Buy ambien[/url]
[url=http://www.anyboard.net/suggest/posts/566676.html]Cialis Fedex[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3476]Buy Carisoprodol without prescription[/url]
[url=http://www.scam.com/showthread.php?t=38082]Cheap phentermine delivery fedex[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3487]Buy paxil online without prescription[/url]
[url=http://www.mysportsforum.com/forums/t6882-buy-viagra-prescription.html]Buy viagra prescription[/url]
[url=http://www.gametab.com/forums/showthread.php?t=3467]Order adipex without prescription[/url]
[url=http://performancing.com/user/tyders23]Buy phentermine[/url]

Ric
On Tuesday, Jun 17

Hi. Thanks for the info.

Please check out my blog article on how I integrated tinyMCE into a rails app. It gives step by step instructions and solves a few gotchas.

Brian
On Thursday, Aug 21

I'm tring to embed a form into TinyMCE for a small business I'm working with - I'm new to developing web apps - and it strips out the tags. Any suggestion on how to allow the WYSIWYG to pass the form through to the browser? Thanks.

renuka
On Friday, Sep 12

Hi,

I want to use tinymce in my one page but i have one problem like i dont want to use tinymce for all textarea in page instead of that i want to use for 1 or 2 textarea so can anyone say me hows that possible?