Rails: Integrating the TinyMCE plugin into ajaxscaffold generated forms
At the moment I’m using the ajaxscaffold generator for a couple of my controllers, one of which has a need for a rich text editor.
On another project, using Perl, we are in the process of integrating TinyMCE as a rich text editor, so I decided to give that a try. Thankfully most of the work of using it in Ruby on Rails has already been done for me. Apparently Blake Watters had created a plugin for it. So I grabbed it thusly:
cd MyAppDirectory ruby script/plugin install -x https://secure.near-time.com/svn/plugins/trunk/tiny_mce
Essentially I used the directions outlined in John Wulff’s post with the exception of how I downloaded the plugin. Follow steps 2 to 4 as described there. You’ll notice in the comments on that page that TinyMCE falls over once you add AJAX into the mix.
Not to worry, after some detective work, I found out how to work around this in my ajaxscaffold generated code.
First up, the controllers uses_tiny_mce call. Here’s mine:
uses_tiny_mce(:options => { :theme => 'advanced',
:browsers => %w{ msie gecko},
:mode => "textareas",
: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 => [],
:theme_advanced_buttons3_add => %w{ tablecontrols fullscreen},
:editor_selector => 'mceEditor',
:plugins => %w{ contextmenu paste table fullscreen} },
nly => [:new, :list, :create, :edit, :update])
This differs in two main ways from John Wulff’s example (plus some other options that I like, that you may not need); the nly argument includes the :list action which where most of ajaxscaffold stuff happens and that I specify a class that indicates when TinyMCE should replace a text_area with it’s editor.
Ok, the controller is taken care of. At this point according to comments I found here you might be able to use it with IE, but it needs more massaging to work with Firefox. So onto our views to put in place the necessary adjustments.
Assuming you have used ajaxscaffold to already generate your model, controller, and view stuff, you’ll have two files you have to edit. path/to/your_view/_new_edit.rhtml and in the same directory _form.rhtml.
Ok, here’s the easy change in the form_remote_tag call in _new_edit.rhtml:
@options.merge(:controller => '/topics'),
:loading => "Element.show('#{loading_indicator_id(@options)}'); Form.disable('#{element_form_id(@options)}');",
:before => "tinyMCE.triggerSave(true,true)",
:html => { :href => url_for(@options.merge(:controller => '/topics')),
:id => element_form_id(@options) } %>
Notice the :before argument. It adds the TinyMCE save mechanism to the auto-created onsubmit that form_remote_tag creates so that our content gets in the database!
Finally we add a little javascript to _form.rhtml. In my case, I had already edited _form.rhtml to NOT automatically output the form fields. So this example assumes that you have done the same:
<fieldset>
<div>
<!--[form:topic]-->
<div>
<label for="topic_description">Name:</label>
"text-input"} %>
</div>
...
<div>
<label for="topic_description">Description:</label>
"mceEditor", :cols => 120 %>
</div>
...
<!--[eoform:topic]-->
</div>
</fieldset>
The thing to notice here is the javascript helper javascript_tag. It makes sure that the TinyMCE controlls are added to the relevant fields. My understanding is that this is necessary because of the way partials are compiled in Rails.
Also notice that I specify the “mceEditor” class for the text_area I want replaced with TinyMCE. It corresponds to what I specified in the controller for what fields should have TinyMCE.
That should do it.
Enjoy your new rich text editor!
Walter
December 2nd, 2006 at 5:18 pm
Hey good summary about TinyMCE and generated ajax scaffold. Were you able to run TinyMCE plugin with recently released Ajaxscaffold plugin. Two javascripts are conflicting and I have no idea how to deal with that. Scott who has created Ajaxscaffold plugin prefers FCKEditor over TinyMCE. I tried FCKEditor and that sucks compared to TinyMCE.
Any advise will be helpful. In my case TinyMCE is not visible if I use ajaxscaffold plugin.
Thanks
December 4th, 2006 at 8:07 am
Hi Ashutosh,
Without more details it’s hard to hunt down your problem. Can you do a “view source” on the page that should load TinyMCE and list the javascript files that are loaded in the header please?
What are the scripts that appear to conflict? Beyond TinyMCE not loading, how is this problem manifesting itself? Are you seeing anything in your error logs?
Have you tried all the stuff outlined in this post?
By the way, TinyMCE is only compatible with some browsers. Specifically it won’t load for Safari and older versions of things. What browser are you testing against?
Cheers,
Walter
April 22nd, 2008 at 6:00 pm
I am getting this error while implementin tiny_mce in ajax_scaffold.
tinyMCE is not defined
nly => [:new, :list, :create, :edit, :update])
evalScripts(”\n//
=========================================================
uses_tiny_mce(:options => { :theme => ‘advanced’,
:browsers => %w{ msie gecko},
:mode => “textareas”,
: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 => [],
:theme_advanced_buttons3_add => %w{ tablecontrols fullscreen},
:editor_selector => ‘mceEditor’,
:plugins => %w{ contextmenu paste table fullscreen} },
_new_edit.rhtml
=======================================
@options.merge(:controller => ‘/treatment_plans’),
:loading => “Element.show(’#{loading_indicator_id(@options)}’); Form.disable(’#{element_form_id(@options)}’);”,
:before => “tinyMCE.triggerSave(true,true)”,
:html => { :href => url_for(@options.merge(:controller => ‘/treatment_plans’)),
:id => element_form_id(@options) } %>
view(_form)=>
======================================================
Date
Note
“mce-editor”,:style=>’width:400px; height:200px;’ %>
July 14th, 2008 at 1:26 pm
I don’t currently use the ajax scaffold plugin anymore. You might check out its replacement, active_scaffold:
http://activescaffold.com/
Cheers,
Walter