# Loading tinyMCE via Ajax

**URL:** <https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820>\
**Category:** Rails\
**Created:** [August 2, 2008, 5:50pm UTC](https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820 "2008-08-02T17:50:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adam](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/4af34b/32.png) [@adam](https://www.ruby-forum.com/u/adam)\
**Post date:** [August 2, 2008, 5:50pm UTC](https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820/1 "2008-08-02T17:50:48Z")

</div>

Hi all,

I’m trying to use a tinyMCE text editor in my Rails app and am having  
some problems. I’m trying to load a tinyMCE-enabled form dynamically  
as the result of an Ajax call, i.e. I want to insert the form into a  
page via Ajax. The Ajax stuff is handled by the Mootools framework.  
There’s a few posts about this out there, but none of them seem to  
work for me.

The code I have behaves as follows:

Define a function init\_mce() to call the tinyMCE.init() function:

function init\_mce(){  
tinyMCE.idCounter=0;  
tinyMCE.init({  
mode: “textareas”,  
editor\_deselector: “no\_mce”,  
theme: “advanced”,  
convert\_urls: false,  
plugins: “emotions,preview”,  
});  
}

In the onComplete callback of my ajax request, call init\_mce();

The javascript returned from this request does two things:

1. Replace the content of a div with a form:

\<% remote\_form\_for :text, :url =\> some\_url, :before =\>  
“tinyMCE.triggerSave();” do |f| %\>  
\<%= f.text\_area :body, :style =\> “width:100%;height:100%;”, :id =\>  
“for\_mce”, :class =\> “for\_mce” %\>  
\<%= submit\_tag “Save” -%\>  
\<% end -%\>

1. Activate the control and set it to send an ajax request rather than  
a normal submit:

$$(’#editor\_window form’).each(function(elem)  
{elem.addEvent(‘submit’,function(e){e=new  
Event(e);tinyMCE.triggerSave();this.send();e.stop();}) });

$$(’#editor\_window textarea’).each(function(elem)  
{tinyMCE.execCommand(‘mceAddControl’,false,elem.id);});

Sadly, this doesn’t work. Has anyone found a working solution to this?

Many thanks,  
Adam

---

<div class="post-metadata">

**Author:** ![adam](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/4af34b/32.png) [@adam](https://www.ruby-forum.com/u/adam)\
**Post date:** [August 5, 2008, 3:39am UTC](https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820/2 "2008-08-05T03:39:39Z")

</div>

On Aug 2, 2008, at 11:49 AM, Adam wrote:

> The code I have behaves as follows:  
> plugins: “emotions,preview”,  
> “tinyMCE.triggerSave();” do |f| %\>  
> Event(e);tinyMCE.triggerSave();this.send();e.stop();}) });
> 
> $$(‘#editor\_window textarea’).each(function(elem)  
> {tinyMCE.execCommand(‘mceAddControl’,false,elem.id);});
> 
> Sadly, this doesn’t work. Has anyone found a working solution to this?
> 
> Many thanks,  
> Adam

What works for me:

```
 <% if request.xhr? -%>
   <%= javascript_tag("tinyMCE.execCommand('mceAddControl', false,

```

‘thing\_#{thing\_number}\_description’);") -%\>  
\<% end -%\>

Obviously the id is going to be your elem.id. The difference is that  
my command is inside the partial rhtml that also contains the  
text\_area having the “thing\_#{thing\_number}\_description”. Also, my  
form\_remote\_tag has :before =\> “tinyMCE.triggerSave(true,true);  
tinyMCE.setContent(‘’);”

Of course, this is still a 1.1.6 app (yeah, I know).

-Rob

Rob B. [http://agileconsultingllc.com](http://agileconsultingllc.com)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![adam](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/4af34b/32.png) [@adam](https://www.ruby-forum.com/u/adam)\
**Post date:** [August 10, 2008, 12:49am UTC](https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820/3 "2008-08-10T00:49:18Z")

</div>

Hi Rob, thanks for that. Unfortunately it doesn’t work for me. I think  
it’s because I use Mootools instead of prototype, and when I render a  
partial via Ajax, scripts aren’t evaluated; instead I have to call  
things separately such as

page.replace\_html…  
page \<\< “some\_functions();”

so all the JS is decoupled.

Weirdly though, when I call page \<\<  
“tinyMCE.execCommand(‘mceAddControl’, false,  
‘thing\_#{thing\_number}\_description’);” after having done a  
page.replace\_html to insert a partial with a tinyMCE form in it, the  
form is rendered as a regular text area instead of a tinyMCE text  
area. Is the problem perhaps that the JS has to be evaluated inside  
the element? If so, is there any way around this?

---

<div class="post-metadata">

**Author:** ![adam](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/4af34b/32.png) [@adam](https://www.ruby-forum.com/u/adam)\
**Post date:** [August 10, 2008, 1:58am UTC](https://www.ruby-forum.com/t/loading-tinymce-via-ajax/144820/4 "2008-08-10T01:58:16Z")

</div>

Aha! Fixed it. I was rendering another editor in a hidden div that was  
lost in some old code which was causing a conflict. Oops…