TinyMCE in Ruby On Rails on Windows

I am currently working on a Social Networking website for a friend of mine and decided that I would use RoR for the project. We wanted to integrate TinyMCE into the site to make it easy for creating blog posts. Once I got to the point where I was able to add in TinyMCE, I went to the Ruby on Rails Wiki to begin. I never used Subversion, so I needed to download the client before I could get started. I opted for the command line client, which at the time of writing is at svn-1.4.5-setup.exe. The Rails Wiki is pretty good and I also found the post by John Wulff on his blog. It should be noted that both of these are excellect sources, but I wanted to add my own that is specific using it in a Windows enviroment and adds some additional details about using TinyMCE.

Note: After I installed the subversion command line client, I had to reboot my computer for it to function properly. If you get the message that svn.exe is not a recognized command, try rebooting.

Installing TinyMCE

1. Open the command prompt and go to the vendor/plugin directory of your application (<YourWebAppDirectory>\vendor\plugin)
2. This downloads the TinyMCE plugin into the plugin directory.svn export https://secure.near-time.com/svn/plugins/trunk/tiny_mce
3. This installs the javascipt files that are used with TinyMCE.rake tiny_mce:scripts:install

Include TinyMCE in your layout

You will need to include the code below into the head of your layout(s) where you intend to expose the TinyMCE plugin.

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

Include it in your Controller(s)

You will need to include this in every controller that you need to use the TinyMCE plugin. Below is the one provided on the Rails Wiki site, though I don’t personally like it.

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}}, nly => [:new, :edit, :show, :index])

Options defined

One thing I hate about every reference I found, they all fail to define what the options are for and if you can modify them. Some of the items are self explanatory, so I will not mention those.

• theme: There are 2 themes that are available for use (simple & advanced). For myself, the simple editor is of very little use except for maybe in the case of using in a user profile. There really is no settings to alter the what is exposed with the simple theme. The advanced theme is more common and allows you to alter the layout of the buttons and bars.
• theme_advanced_toolbar_location: Defines where the toolbar should be located in relationship to the textarea box.
• theme_advanced_button[]: By default, the advanced theme has 3 rows of buttons. This allows you to specify the buttons you would like to see and what order you would like to see them in. If you only want to show one line of buttons, you just put the [] as the setting. Below is the configuration that I use for my site.
  uses_tiny_mce(:options => {:theme => 'advanced',
:browsers => %w{msie gecko},
:theme_advanced_toolbar_location => "top",
:theme_advanced_toolbar_align => "left",
:theme_advanced_buttons1 => %w{fullscreen separator cut copy paste separator updo redo separator bold italic underline strikethrough justifyleft justifycenter justifyright justifiyfull separator bullist numlist outdent indent separator iespell link unlink image media sub sup removeformat cleanup charmap emotions separator formatselect fontselect fontsizeselect},
:theme_advanced_buttons2 => [],
:theme_advanced_buttons3 => [],
:plugins => %w{contextmenu paste media fullscreen emotions iespell advimage}}, nly => [:new, :edit])
  • fullscreen: Allows user to maximize the editor window to fullscreen. This is great when you are writing large posts.
  • separator: should be added to group buttons together and provides a pipe delimiter between groups of buttons.
  • iespell: A spellchecker. This does require that the users have this browswer plugin installed.
  • media: Allows users to attach a variety of media content.
• plugins: Some of the buttons use additional plugins to function properly. You only need to declare plugins that you wish to use. Also note that if you want to use the iespell plugin, this requires every author of you website to install that plugin. To find out what plugins are available you can look in the <ApplicationDirectory>\vendor\plugins\tiny_mce\public\javascripts\tiny_mce\plugins directory.
  • advimage: Provides additional settings when adding images with the image button.