How to Create TinyMCE (WYSIWYG) for Ruby on Rails

Thehotfix.net Logo

How to Create TinyMCE (WYSIWYG) for Ruby on Rails

The erudite Blake Watters has just created a TinyMCE plugin for Ruby on Rails.

How-To integrate TinyMCE into your Rails app (assumes you’re using svn).

Add the plugin to your svn:externals and get the latest code.

$ cd MyRailsApp
$ svn propedit svn:externals vendor/plugins

Add the following line and save.

tiny_mce  https://secure.near-time.com/svn/plugins/trunk/tiny_mce

$ svn up

Now you’ve got the code.

Add the following to your application.rhtml

<% # Include TinyMCE before other JS to avoid problems -%>
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>

Install the JavaScript
```
$ rake tiny_mce:scripts:install
```

Activate TinyMCE for a controller. (Uses TinyMCE for any TextArea).

class MyController < ApplicationController
  uses_tiny_mce
  ...

That is it! Not too much work for full featured WYSIWYG eh? Now, to really make it sing try this.

uses_tiny_mce(:options => {:theme => 'advanced',
                           :browsers => %w{msie gecko},
                           :theme_advanced_toolbar_location => "top",
                           :theme_advanced_toolbar_align => "left",
                           :theme_advanced_resizing => true,
                           :theme_advanced_resize_horizontal => false,
                           :paste_auto_cleanup_on_paste => true,
                           :theme_advanced_buttons1 => %w{formatselect fontselect fontsizeselect bold italic underline strikethrough separator justifyleft justifycenter justifyright indent outdent separator bullist numlist forecolor backcolor separator link unlink image undo redo},
                           :theme_advanced_buttons2 => [],
                           :theme_advanced_buttons3 => [],
                           :plugins => %w{contextmenu paste}},
              :only => [:new, :edit, :show, :index])

All we’re doing here is passing TinyMCE options. Awesome work Blake.

UPDATE: This info is now in the Ruby on Rails Wiki.

UPDATE 2: I’ve uploaded a sample Rails app using the TinyMCE plugin.

Thanks to http://johnwulff.com/articles/2006/05/31/tinymce-with-ruby-on-rails for this how-to.