Add a tinymce editor dynamically

Question

I have a page with 2 working tinymce editor when i display it. Textarea is dynamicaly added to the page with a user control (page already loaded). The following js/coffescript aim to add a tinymce editor to the new textarea:

$(document).on 'nested:fieldAdded', (event) ->
  tinyMCE.execCommand("mceAddControl", false, event.field.find('textarea').attr("id"))

If i do an alert event.field.find('textarea').attr("id"), it returns the correct ID of the textfield where the editor should be added. However, it does not add tinyMCE to the textarea. I can also see that when the alert is displayed, the textarea exist on the page, I guess it means it exist when the script try to add tinymce.

At the top of my body i have the following script :

<script type="text/javascript">
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"bottom","theme_advanced_buttons3_add":"tablecontrols,fullscreen","plugins":"paste,table,fullscreen","dialog_type":"modal","content_css":"/assets/application.css"});
//]]>
</script>

What do I need to change to my script to succesfully add tinyMCE to the new textarea?

nrsharma nrsharma · Accepted Answer · 2013-10-03T11:19:18

The control on which the tinymce editor will apply needed to render first. The point is it's require the element to be added in DOM and loaded first.

May be you can try to add some time delay to your script for adding/applying the editor.

Try this (may this will help you)

Make a function

function loadTinyMCEEditor() {
  tinyMCE.init({
  });
}

and call loadTinyMCEEditor() after page fully loaded and your dynamic control added to DOM.

Add a tinymce editor dynamically

1 Answers