Question

I have a page with multiple tinymce instances running at the same time and it’s freezing the browser whenever it loads. It’s taking not less than 15 seconds of waiting before I could use the browser again. I’ve tested this on IE9, FF6, and Chrome and all of them are freezing for some time while it is loading.

How could I prevent this freezing from happening? I have at least 10 textarea with tinymce attached to it in one page. Computer is running on core2duo with 4GB of RAM without any other program running, but this shouldn’t matter as its supposed to work even with a lower spec PC.

Edit add JS code to load 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 is right, loading 10 instances takes time. But, you’ll never edit 10 at once, so opening TinyMCE only for the areas the user wants to work with will get you there.

Code to create TinyMCE instance for all textareas on click:

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

and change the mode to none:

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

    /* 
       other options etc 
    */

});