加载多个 TinyMCE 实例会冻结浏览器，解决方案吗？

Question

我有一个页面同时运行多个tinymce 实例，并且每当加载时它都会冻结浏览器。我需要等待不少于 15 秒才能再次使用浏览器。我已经在 IE9、FF6 和 Chrome 上对此进行了测试，所有这些在加载时都会冻结一段时间。

我怎样才能防止这种冻结发生？我在一页中至少有 10 个带有tinymce 的文本区域。计算机在具有 4GB RAM 的 core2duo 上运行，没有运行任何其他程序，但这并不重要，因为即使在较低规格的 PC 上它也应该可以工作。

编辑添加 JS 代码以加载 TinyMCE。

<script type="text/javascript">
var myTextbox = "10 name of textarea here";

tinyMCE.init({
    // General options
    mode : "exact",
    elements: myTextbox,
    theme : "advanced",
    plugins : "paste,ibrowser",
    paste_remove_styles: true,
    paste_auto_cleanup_on_paste : true,
    plugins : "autolink,lists,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,wordcount,advlist,autosave",
    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "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,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,|,charmap,emotions,iespell,media,advhr,",
    theme_advanced_buttons5 : "pastetext,pasteword,selectall,iuploader,upload_status",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    setup : function(ed) {
    //IMAGE UPLOADER BUTTON 
    ed.addButton('iuploader', {
        title : 'Upload Image',
        image : '/www/images/admin/post_button_image_upload.gif',
        onclick : function() {
            load_image_uploader(this.id);
         }
      }),
    ed.addButton('upload_status', {
        title : 'Upload Status',
        image : '',
        onclick : function() {

         }
      });
    },

    // Content CSS
    content_css : "/www/js/tiny_mce/css/content.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "lists/template_list.js",
    external_link_list_url : "lists/link_list.js",
    external_image_list_url : "lists/image_list.js",
    media_external_list_url : "lists/media_list.js",

    // Style formats
    style_formats : [
        {title : 'Bold text', inline : 'b'},
        {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
        {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
        {title : 'Example 1', inline : 'span', classes : 'example1'},
        {title : 'Example 2', inline : 'span', classes : 'example2'},
        {title : 'Table styles'},
        {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
    ],

    // Replace values for the template plugin
    template_replace_values : {
        username : "Some User",
        staffid : "991234"
    }

});

Answer 1

问题是 TinyMCE 加载的 iframe 数量与您的实例一样多。对于您的情况，更好的选择可能是使用内联版本 https://www.tiny。云/文档/演示/内联/

Answer 2

Brett Henderson 是对的，加载 10 个实例需要时间。但是，您永远无法一次编辑 10 个，因此仅针对用户想要使用的区域打开 TinyMCE 即可实现。

单击时为所有文本区域创建 TinyMCE 实例的代码：

$('textarea').each(function(e) {
    e.addEvent( 'click', function() {
        tinyMCE.execCommand('mceAddControl', false, e.getProperty('id')) ;
    });
});

并将模式更改为无：

tinyMCE.init({
    // General options
    mode : "none",

    /* 
       other options etc 
    */

});

Answer 3

tinyMCE.init({
            mode : "exact",
            elements : "ajaxfilemanager, ajaxfilemanager_1",
            theme : "advanced", ....



<textarea id="ajaxfilemanager" name="ajaxfilemanager" style="width: 100%; height: 500px" ></textarea>
<textarea id="ajaxfilemanager1" name="ajaxfilemanager_1" style="width: 100%; height: 500px" ></textarea>

Answer 4

我使用点击事件在点击的文本区域上加载tinyMCE，这帮助我在同一页面上使用多个tinyMCE编辑器而无需冻结浏览器，这可能不是正确的方法，但它对我有用。代码：

            $('textarea').click(function(){
                $(this).addClass("tinyopen");
                //tinyMCE -------------
                    tinyMCE.init({

                        mode : "specific_textareas",
                        editor_selector : "tinyopen",

                        //  -----  Here comes your plugins and themes --------- //
                        //                                                      //  
                        //                                                      //  
                        //                                                      //
                        //  --------------------------------------------------- //

                        content_css : "path to css"

                    });
                //tinyMCE -------------
            });