Integrating TinyMCE into your Rails app is as simple as installing the tiny_mce plugin, created by Blake Watters.
Get the source
ruby script/plugin install hxxp://secure.near-time.com/svn/plugins/trunk/tiny_mce/
replace hxxp with http
Copy the TinyMCE Javascript files into public/
$ rake tiny_mce:scripts:install
Include it in your views
To automatically have TinyMCE available on all views, add the following to your app/views/layouts/application.rhtml (or any other layout/view for that matter):
<% # Include TinyMCE before other JS to avoid problems -%>
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>
This must be in your <head> tag.
Update your controllers for TinyMCE
This will add TinyMCE in any TextArea:
class MyController < ApplicationController
uses_tiny_mce
...
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])
Foiling XSS attacks and other nasty things
Unfortunately, you can’t use ERb’s html_escape helper anymore because it’s going to mess with the formatting inside the TinyMCE box. But not using anything exposes you to a great amount of security problems.
Here is a piece of code you can use to filter out all except the white listed html tags:
http://svn.techno-weenie.net/projects/plugins/white_list/
Discussion
I tried to install the plugin with the following commands (rails 1.1.6) but it didn’t work:
script/plugin source https://secure.near-time.com/svn/plugins
script/plugin install -x tiny_mce
Nothing happened
Is it a bug with untrusted ssl certificates ?
I don’t know if it got fixed just now, but I was able to do a standalone subversion checkout of the plugin. It prompted me for the certificate which I accepted permanently.
I was then able to dump the plugin into my vendors folder. If my rails app was on subversion, I could run svn import on the local copy to my app.
I get the following error on start-up:
undefined local variable or method `javascript_include_tiny_mce_if_used'
Any ideas? The error goes away if I refresh the browser…
undefined local variable or method `javascript_include_tiny_mce_if_used'
restart server,will fixed it.
I just added
include TinyMCEHelper
to app/helpers/application_helper.rb. I couldn’t figure what changed with rails to break this, so consider it a hack.
Also you guys need to restart your server. That’s most likely why you’re getting the error.
Note that if you are in dev mode, you must restart the server for this to work.
When an ajax remote_form_for you need to have TinyMCE update the actual form field from its editor before
the form is serialized and submitted.
Something like this does the trick:
< remote_form_for(:comment, :url => formatted_comments_path(:js), :before => ‘tinyMCE.triggerSave();’ ) do |f| >
Creating an Image Selector b/w Rails and TinyMCE
How to Create an Image Selection Plugin for tinyMCE with Ruby on Rails
Not a big fan of the convoluted install instructions.
Just…
“script/plugin install https://secure.near-time.com/svn/plugins/trunk/tiny_mce“
and be done with it…
Did you try it? It doesn’t work. Follow the instructions above for installing it.
Hi, I just spent some time trying to figure out how to get this tiny_mce plugin to work with RoR 2.0 and AJAX calls. I have made simple how-to and uploaded it to my new blog:
http://hubertlepicki.com/articles/2008/03/02/tinymce-and-ajax
With some code examples to download.
Hello all, Not sure if this has been the case for a while, but today (16 Mar 2008),
“script/plugin install https://secure.near-time.com/svn/...”
is not working, but “http://...” is. Took me a while to figure this out, but wanted to save the time for anyone else who might have gotten stuck here.
Hi all. This seemed like a little overkill to me and wrought with problems so in the interest of giving back here is my alternate method of using TinyMCE (any version) with Rails and which does it with less code and more precision.
Step 1: Download the version of TinyMCE you want to use. Extract the tarball and move “jscript/tiny_mce” into your “public/javascripts” directory. You want the tiny_mce directory below the jscript directory, not the one containing the jscript directory and move the whole directory so you have public/javascripts/tiny_mce/... in your project.
Step 2: Open the application_helper.rb file in your editor and add the following helper method:
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
Step 3: Create a new file named public/javascripts/mce_editor.js in your editor and add the following to it:
tinyMCE.init({theme:"advanced",mode:"textareas",editor_selector:"mce-editor",content_css:"stylesheets/application.css"});
Step 4: Edit your layout (default is views/layouts/application.[rhtml|html.erb]) and add <%= yield :tinymce %> within the <head> section above and before the inclusion of any script.aculo.us scripts, that includes the javascript_include_tag :defaults if you use it like this:
<head>
...
<%= yield :tinymce %>
<%= javascript_include_tag :defaults %>
...
</head>
That’s it! Now, anytime you use or want to use the TinyMCE editor on a text area in a template or partial you need to do two things in the template:
<% use_tinymce -%>
<%= textarea_tag :foo, :bar, ... :class => "mce-editor" %>
The <% use_tinymce -%> bit tells the layout to load the TinyMCE javascript files when this template is used. This is an improvement over the plugin because the plugin loads the JS files anytime the controller is used regardless of whether TinyMCE is used in rendering the action.
To your textarea input field you need to set or add the element class mce-editor like ... :class => "mce-editor" ... or ... :class => "mce-editor otherselector" ... which tells TinyMCE that this textarea is a TinyMCE textarea (we set this in the configuration in mce_editor.js with the editor_selector option.
You control the configuration of TinyMCE by editing the mce_editor.js file we created in Step 3 so you aren’t tied to one particular version of TinyMCE enforced by the plugin. You can create multiple configuration files for multiple controls and either create new helper methods to load different configs or change the helper method to accept an argument and use that as the config to load. It’s up to you from here.
I hope this helps unshackle some people from a plugin that isn’t maintained or in sync with TinyMCE development.
I agree with Ben. The latest TinyMCE version is well beyond the one included in the plugin and it’s much easier to get it working manually, following Ben’s steps (the plugin didn’t work fully for me).
Also, i’d avoid using this:
tinyMCE.init({theme:"advanced",mode:"textareas",editor_selector:"mce-editor",content_css:"stylesheets/application.css"});
as it calls css that you might not have. Just keep it simple to start out:
tinyMCE.init({theme:"simple",mode:"textareas",editor_selector:"mce-editor"});
The stylesheet for the TinyMCE advanced theme is part of the tinymce package. There should be no missing files and you should be able to use the any of the tinymce themes without changing or adding any css in the application.
The use of the application.css stylesheet (or whatever you use for the layout) sets the CSS for the tinymce control, so a P in the control looks like a P on the page. You’ll need to think about this a little but if you don’t add a stylesheet with content_css: then you will get the default styles from the theme, not exactly WYSIWYG.
I’m glad you found my method helpful. TinyMCE is a really great tool. Error noted and revised to correct. Thanks.
Thanks for all the tips. Please check out my blog post which details how I got it to work, plus solves a couple of gotchas.