繁体   English   中英

当在ajax中加载编辑器时,tinymce getContent()返回空字符串

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

我正在将tinyMCE编辑器与使用Zend Framework开发的系统集成在一起。

以下是tinymce编辑器代码的部分视图的代码

<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>

问题在于,当视图以ajax加载时,在Submit按钮的click事件上调用以下命令:

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

返回的是一个空字符串。 如果视图正常加载,则一切正常。 这仅在FF中。 即使使用Ajax,Chrome和IE8也可以正常工作。

有人对此有过经验吗?

编辑:基本上我的应用程序使用MVC结构。 视图是MVC的V部分。 加载到浏览器的主页是一个项目列表页面,其中包含一个“添加新”按钮。 单击后,将通过ajax加载新视图并将其添加到页面。 加载的视图同时包含tinymce的所有javascript代码和textarea HTML。 除了getContent()调用在FF上不起作用外,其他一切正常

自己碰到这个,“修复”就是一头野兽。 通常,Tiny在其实例中存储对DOM元素(文档,正文,contentFrame,contentWindow)的引用。 我认为(但不是100%肯定)它最终还会在内部DOM,Selection和其他实用程序生成的闭包中创建对它们的引用。 因为这样做,当您查看更改时,旧的DOM被吹走并替换为新的东西(也许具有相同的ID?),但是内部引用得以保留。

我需要实现以支持IEx,FF3.x,WebKit(Chrome和Safari)的解决方案是在调用任何将重绘RTE区域的代码之前调用类似的方法:

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

我不确定,但是我认为这可能是因为几个具有相同id的tinymce实例。

如果您使用萤火虫,请尝试使用此功能进行检查。

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

如果id增加了一倍,那么问题就根源了。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM