tinymce getContent() returns empty string when editor loaded in ajax

I am integrating tinyMCE editor along with a system am developing with Zend Framework.

Fo开发者_开发问答llowing is the code for the partial view of tinymce editor code

<script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/jquery.validate.tinymce.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('textarea.editor').tinymce({
            script_url : '<?php echo $this->baseUrl()?>/js/tinymce/tiny_mce.js',

            // General options
            theme : "advanced",
            plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

            // Theme options
            theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true
        });
    });
</script>

The problem is that when the view is loaded in ajax, calling the following on the click event of the submit button:

var content = tinyMCE.get('body').getContent();
    alert(content);

return's an empty string. If the view is loaded normally everything works fine. This is only in FF. Chrome and IE8 are working fine even with Ajax.

Does anybody have previous experiences with this?

Edit: Basically my app is using MVC structure. A view is the V part of the MVC. The main page loaded to browsers is a items-listing page which contains an "Add new" button. Once clicked a new view is loaded via ajax and added to the page. The loaded view contains both the all the javascript code for the tinymce and the textarea HTML as well. Its all working fine except for the getContent() call which is not working on FF

---

Ran into this myself and the "fix" is a beast. In broad strokes, Tiny stores references to DOM elements (document, body, contentFrame, contentWindow) in its instances. I think (but not 100% sure) that it also ends up creating references to them in closures generated by its internal DOM, Selection, and other utils. Because it does this, when you view changes, the old DOM is blown away and replaced with something new (maybe with identical IDs?), but the internal references are preserved.

The solution I needed to implement to support IEx, FF3.x, WebKit (Chrome & Safari), was to call something like BEFORE calling any code that will redraw the RTE area:

for(var i=0, n=tinymce.editors.length; i<n; i++) {
    tinymce.editors[i].destroy();
    delete document.getElementById(tinymce.editors[i].id);
}

---

I am not sure, but i think it might be because of several tinymce instance having the same id.

If you use firebug try this to check this out.

for (var i = 0; i < tinymce.editors.length; i++) {
  console.log(tinymce.editors[i].id);
}

If there are id doubled you got the root of your problem.