Get tinyMce mode to activate on a new textbox inserted by AJAX (in Rails)

Question

I have a nested attribute (speeches) under a model Speaker and I'm using tinyMce to let a speaker fill out a profile form where they might have one or more speeches they give.

I'm using the Rails 2.3 nested attributes helpers as used in Ryan Bates's complex-form-example github account.

The tinyMce functionality is great for a "Speech" if it's loaded by the page, but not active for a new "Speech" loaded by AJAX on "Add new speech" (calls a insert_fields script to add the form fields)

The tinyMce code on the page is

<script src="/javascripts/tiny_mce/tiny_mce_src.js?1254270151" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
tinyMCE.init({
editor_selector : 'mceEditor',
language : 'en',
mode : 'textareas',
theme : 'simple'

});
//]]>
</script>

And to activate a textarea form field, you put class="mceEditor" on it.

Is there a way to activate tinyMce on the new Ajax inserted form fields?

TinyMce plugin: http://github.com/kete/tiny%5Fmce

Answer 1

You can create a new editor after TinyMCE has been initialized using:

var new_editor = new tinymce.Editor('new_id', {
});
new_editor.render();

This won't utilize the settings you have in your controller, and is a pure javascript solution, not really a ruby one, but you should be able to easily run it after your ajax call completes and you have the id of the new text area.

Answer 2

I don't know if this is a good answer; but for this situation (someone following the Railscast on nested attributes and complex forms and wanting to use tinyMCE)

pasting

<script type="text/javascript">
//<![CDATA[
tinyMCE.init({
editor_selector : 'mceEditor',
language : 'en',
mode : 'textareas',
theme : 'simple'

});
//]]>
</script>

Into my insert fields function made it worl