Question

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

我怎样才能防止这种冻结？我在一页上附上了至少10个带有tinymce的textarea。计算机在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"
    }

});

Answer 1

Brett Henderson是对的，加载10个实例需要时间。但是，你永远不会一次编辑10，所以只为用户想要使用的区域打开TinyMCE就可以到达那里。

在点击时为所有textareas创建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 
    */

});

Answer 2

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 3

我使用click事件在点击的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 -------------
            });

Answer 4

问题在于TinyMCE加载的iframe与您的实例一样多。根据您的情况，更好的选择是使用内联版本https://www.tiny.cloud/docs/demo/inline/

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

4 个答案: