TinyMCE WYSIWYG Text Editor on Rails

Posted by Ric Mon, 16 Jun 2008 12:14:00 GMT

In Swirrl, we needed users to be able to easily create formatted text. For a time, we toyed with using a markup language such as Textile, but decided that only techies would really be comfortable with writing in a markup language, and we wanted our app to be as accessible as possible.

Basically, what we needed was a WYSIWYG (what you see is what you get) editor. We looked into a couple of options but eventually settled on TinyMCE. This is a really flexible javascript-based text editor, which is already used in many applications on the web. It simply produces html, and provides a way for techie users to edit that html directly if they want, but ‘normal’ users don’t have to worry about any markup.

After reading the rails wiki, the TinyMCE wiki and playing around a bit, I found it quite easy to integrate into our rails application. There’s quite a lot of suggestions on different ways to go about this, so I thought I’d document what worked for me…

1. Download TinyMCE

2. Make a new folder in your rails app: ‘public/javascripts/tiny_mce’

3. Copy the contents of the ‘jscripts/tiny_mce’ folder from the download into this new folder in your rails app. (So now you should have a folder in your rails app: ‘public/javascripts/tiny_mce/’ which contains the ‘langs’, ‘plugins’ and ‘themes’ folders, amongst other things.)

4. Make a new file: ‘public/javascripts/mce_editor.js’ and add your TinyMCE initialisation code, e.g.

tinyMCE.init({
    theme:"advanced",
    mode:"textareas",
    plugins : "safari",
    ...
});

(Get more information on the TinyMCE API and configuration options from the TinyMCE wiki)

5. Add a method to the application helper

def use_tinymce
    @content_for_tinymce = "" 
    content_for :tinymce do
      javascript_include_tag "tiny_mce/tiny_mce"
    end
    @content_for_tinymce_init = "" 
    content_for :tinymce_init do
      javascript_include_tag "mce_editor"
    end
end

6. In the application layout (views/layouts/application.rhtml), yield the appropriate contents. According to this TinyMCE wiki page the order of javascript files is important.

<head>
  <!-- ... -->
  <%= javascript_include_tag "prototype" %>
  <%= yield :tinymce %>
  <%= javascript_include_tag "scriptaculous" %> 
  <%= javascript_include_tag "effects" %> 
  <%= javascript_include_tag "controls" %>
  <%= yield :tinymce_init %> 
  <!-- ... -->
</head>

7. Now, to use tinymce in a view or layout, just make a call to the new helper method e.g.

  <% use_tinymce -%>
  <%= textarea_tag :foo, :bar, ... :class => "mce-editor" %>

8. Although TinyMCE does do some tidying up of the html code, you will also want to add white-listing to your implementation to prevent people submitting anything dodgy. (Note that for some of the more advanced TinyMCE formatting, you will need to allow the “style” attribute in your whitelist).

Gotcha: If you want your users to be able to post xml code in their text areas, you will have to use the xml encoding option, and decode that content if you’re showing it outside of a TinyMCE editor anywhere e.g:

  <%= white_list(CGI.unescapeHTML(@page.content)) -%>

(Note: I found that this option doesn’t work correctly in TinyMCE version 3.0.8 but is fixed in 3.0.9)

permalink, no trackbacks, 41 comments, subscribe to this article's comments

Subscribe to this blog: Share this article:

Trackbacks

Use the following link to trackback from your own site:
http://www.ricroberts.com/trackbacks?article_id=tinymce-wysiwyg-text-editor-on-rails&day=16&month=06&year=2008

Comments

Leave a comment

Ravi 23 days later:

Hi Rich,

I am using TinyMCE text editor in my rails app.how to limit the chacters in tinyMce textarea.characters are decreasing while entering characters in textarea.

maximum:200 characters if 5 characters enterd. you have left 195 characters.

like this.

thanks,
Ric 23 days later:

Hi Ravi.

You can use a bit of javascript to check the length of content of the edited content element, on key up (or whatever). e.g.

$('mydivid').down('form').edited_content.value

This gives you all the html, including markup (which is what you will actually store in the db).

If you want to check the number of characters that the user will actually see, you can use the prototype unescapeHTML() function to strip out the tags.

$('mydivid').down('form').edited_content.value.unescapeHTML()

Hope this points you in the right direction.
Chris about 1 month later:

You wouldn’t happen to be using the MCImageManager plugin and have solved the authentication with rails problem?
Ric about 1 month later:

No – afraid not, Chris.

Nico about 1 month later:

Hello,

I hv followed every step you said and it doesnt display the bouton. I ve built a specific project to test that. here is all files :

tinies_controller :

....

application_helper.rb :

def use_tinymce
  # Avoid multiple inclusions
  @content_for_tinymce = "" 
  content_for :tinymce do
    javascript_include_tag('tiny_mce/tiny_mce') + javascript_include_tag('mce_editor')
  end
end

views\layout\tinies.html.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Tinies: <%= controller.action_name %></title>

<%= yield :tinymce %>

</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>

views\tinies\index.html.erb

<h1>Listing tinies</h1>

<% use_tinymce -%>

<%= text_area(:application, :notes, :cols => 40, :rows => 15, :class => "mce-editor") %>

<br />

<%= link_to 'New tiny', new_tiny_path %>

It works if i put everything outside rails world… but inside… ive got only a textarea box

Ric about 1 month later:

Hey Nico.

I’m sorry you’re having problems.

What are your tinymce settings (set with the tinyMCE.init function)?

-Ric.
Nico about 1 month later:

hey Ric, Thank you for your answer… 2days i m looking for a solution.

here is the tinyMCE.init from your tiny_mce.js : tinyMCE.init({theme:”simple”,mode:”textareas”,editor_selector:”mce-editor”});

Thank you so much for your help,

Nico From Belgium
Ric about 1 month later:

Make sure that your tiny mce initialization javascript is in the file with the name referenced by the helper- in my example this is ‘mce_editor.js’. (In your comment you call it ‘tiny_mce.js’).

For the tinyMCE initialization parameters, please refer to the tiny mce wiki.

It’s good that you’ve got it to work outside rails. What I’ve done isn’t particularly complicated. To find your problem try to just think through logically what html/js you’re trying to generate with rails, and compare it to your working (non-rails) version. Good luck.
Nico about 1 month later:

1°) Did you Test all of this with rails 2.0.2 and on windows vista ?

2°)Why :class=>‘mce-editor’ and not ‘mce_editor’ ?

10x
Ric about 1 month later:

1) Yes.

2) Because that’s the class I’ve specified in tiny mce’s ‘editor_selector’ configuration option.

What exactly isn’t working? i.e. What are you expecting that isn’t happening?

I might be able to help you further if you have an example I can look at. (Just post a url in the comments).
Nico about 1 month later:

What i have is a simple html textarea. i ve made it easier (everything in the layout\tinies.html.erb:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Tinies: <%= controller.action_name %> This is some content that will be editable with TinyMCE.
it s the most simple way to do,isnt it ?

And the only stupid thing i ve is a simple textarea with the content “this is some…” No bouton…
Nico about 1 month later:

Also, the server dump told me that tinyMCE is not defined… html 304 error… ??
jitendra about 1 month later:

hi Ric,

I am using Rails 2.0.2 and want to add TinyMCE 3.1.0.1 in my admin part of application.

I followed all steps mentioned here but it is not working.

May be problem is that i created admin section with Active_Scaffold plugin.

Thanks in advance…..
Ric about 1 month later:

Hi jitendra.

If you can show me an example page where it’s not working, I’ll take a look – otherwise I’ve not got a lot to go on!
Le Van 2 months later:

Thanks for your work
Ryan 3 months later:

Hey, I’ve got TinyMCE working now. The only problem is I have two text_area fields on the page and I only want the top one to have the TinyMCE edit area. Is this possible?

Thanks
Ric 3 months later:

Ryan. Yes, just don’t give the ‘other’ text field the css class.
yachtman 3 months later:

Followed instructions to a ‘t’ (I think), get no errors, yet nothing shows…
Here is the html source… Text content here…
yachtman 3 months later:

..follow on..

If you got to http://www.solargenetics.com you can see the actual source and the javascript includes. All looks okay and there are no log errors..
yachtman 3 months later:

Solved.

The configuration sample you show above under #4 does not work by itself and needs the ”, ...” removed from the end or put other config options.

=> ”...plugins : “safari”, ...”
Ric 3 months later:

Yachtman,

Indeed. I didn’t include all my config as it wouldn’t be relevant to you.

Glad you figured that out.
Henry 4 months later:

This worked perfectly for me as written (minus the ’...’). Thanks for taking the time to write this up!
MyTaskHelper 4 months later:

I get stuck with TinyMcE, while rendering it using Ajax, in my free online database http://www.mytaskhelper.com

Anyone has such problems, any suggestions?
Bala Paranj 5 months later:

Thanks for the instructions. I was able to upgrade from Tiny MCE 2.0 to 3.2.1 version. Now it works with the FireFox 3.0.4.

Installing the Rails Plugin for Tiny MCE did not help me. Just a note: Even without the :class => ‘mce-editor’, it works.
Tom 5 months later:

The configuration sample you show above under #4 does not work by itself and needs the ”, ...” removed from the end or put other config options.

=> ”…plugins : “safari”, ...”

can I suggest that you remove ”, ...” from the end of that example?

Just for the sake of everyone else that comes across this because it just caught me out too.

many thanks
Tom 5 months later:

sorry about this, perhaps I’m missing something, but I can’t see anyway of linking to a specific :controller, :aciton, :id with this. The link editor only allows html style links, which is understandable.

The problem is that this info will be rendered in a lot of places so relative links are going to be at risk and the idea of using absolute links for internal content really goes against the grain.

any ideas?
cs 5 months later:

ahoy ric,

do you think tinyMCE/white_list can handle these XSS atacks?: http://ha.ckers.org/xss.html

and, in swirrl being an rdf app, are there intelligent, wiki-like-links :d like [resource-page][chapter_x] or something like that?

i’m also thinking to use TinyMCE in my app but want to enable only internal links, inside the portal, without opening to www.

do you have any ideas how to approach?

thx, cs.
Ric 5 months later:

Tom,

My config in TinyMCE.init is about 20 or thirty lines long, so that’s why I didn’t include the whole thing, and used elipses. That config is just an example!

I’m not really sure what you mean about the links? You can create TinyMCE plugins to add buttons with extra functionality if you need to.
Ric 5 months later:

CS,

To enable internal links, you need to write your own TinyMCE plugin which is specific to your site’s url structure.

I’m pretty confident about hacker security (using something similar to techno-weenie’s white listing approach).
patrick 5 months later:

just wanted to say, thanks a lot for this great article. i had tried to install this on edge rails a couple of times, but couldnt do it with the normal script/plugin install method.

if you want to check out what i do with it, my site should be up soon: studentsspeakup.com

thanks!
Dipin 6 months later:

I do think it’s a very good rich text editor, while I want know how to setup a db column to handle the rich text field. Appreciate your advise. Thank you..
Ajey 7 months later:

Ric,

Great blog.. I have implemented the tinyMCE in my rails application, it works great… But, wherever I have used text_area, it applies editor every where, I have 2 text_areas on same page description and for street address, but need rich text editor only for description.

Ajey
Patrick Espake 7 months later:

Thanks!
JD-Salinger 7 months later:

Wow—- youre a big help man! thank you so much!!!!... youre a saviour…. CTRL+D for this page
David Kennedy 7 months later:

Classic example of the Internet information rule “95% of all instructions don’t work”.
Eelke Sietse 9 months later:

I only get HTML tags back in my view

and my source code gives me this crap

csdfsfsdf fsdfsdfsdfsdfsfsdfsfsfsdfsfsfdsfdffdfs

how do i get my sttuff rendered
geeta 11 months later:

Hello, I have done every thing that has been mentioned in this blog. But I am not able to see the editor .. :( Can some one guide me regarding this -Geeta
geeta 11 months later:

Hey I got it working I forgot to add the init function. but now my editor comes now above the text area but below the text area. what could be the reason ??
Geeta 11 months later:

Hey I got it working. Since tinymce wiki in ie. 8 doesnot show proper information it show overlapping. So I could not get all the options. after placing all the options every works correctly. Hey great work ….
Jim Brisson 12 months later:

Thanks for the nice write up. Up and running in about 20 minutes. Fantastic!!
hendri.firmana@gmail.com about 1 year later:

i’m using tinymce plus, but i get a problem when i upload the image, how can i solve this problem ? please