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)

17 comments | 2 trackbacks

Comments

Leave a response

  1. Ravi said 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,

  2. Ric said 24 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.

  3. Chris said about 1 month later:

    You wouldn’t happen to be using the MCImageManager plugin and have solved the authentication with rails problem?

  4. Ric said about 1 month later:

    No – afraid not, Chris.

  5. Nico said 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

  6. Ric said 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.

  7. Nico said 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

  8. Ric said 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.

  9. Nico said 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

  10. Ric said 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).

  11. Nico said 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…

  12. Nico said about 1 month later:

    Also, the server dump told me that tinyMCE is not defined… html 304 error… ??

  13. jitendra said 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…..

  14. Ric said 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!

  15. Le Van said 3 months later:

    Thanks for your work

  16. Ryan said 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

  17. Ric said 3 months later:

    Ryan. Yes, just don’t give the ‘other’ text field the css class.

Trackbacks

Use this link to trackback from your own site.

  1. From MyNetFaves : Web 2.0 Social Bookmarking
    MyNetFaves : Public Faves Tagged Richtext
    Marked your site as richtext at MyNetFaves!
  2. From Free dog sex.
    Dog sex.
    Dog sex. Barking dog pouch sex. Animal porn selected horse ass dog sex free.

RSS feed for this post trackback uri

(leave url/email »)

   Comment Markup Help Preview comment