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

Loading Multiple TinyMCE instances is freezing the browser, solution?

本文关键字:冻结 浏览器 解决方案 实例 TinyMCE 加载      更新时间:2023-09-26

我有一个页面,多个时间实例同时运行,每次加载时都会冻结浏览器。在我再次使用浏览器之前,等待时间不少于15秒。我已经在IE9, FF6和Chrome上测试过了,所有这些都在加载时冻结了一段时间。

我怎样才能防止这种冻结的发生?我至少有10个文本区域与时间连接到它在一个页面。计算机在core2duo上运行,内存为4GB,没有任何其他程序运行,但这应该无关紧要,因为即使在较低规格的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"
    }
});

Brett Henderson是对的,加载10个实例需要时间。但是,您永远不会一次编辑10,因此仅为用户想要处理的区域打开TinyMCE将使您达到目标。

为所有文本区域创建TinyMCE实例的代码:

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

并将模式更改为none:

tinyMCE.init({
    // General options
    mode : "none",
    /* 
       other options etc 
    */
});
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>

我使用点击事件加载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 -------------
            });

问题是TinyMCE加载的iframe和实例一样多。在您的情况下,更好的选择可能是使用内联版本https://www.tiny.cloud/docs/demo/inline/