Load TinyMce JS file on document.ready() not working with $.getScript

1.5k views Asked by At

I'm trying like this,

  $.getScript('js/tiny_mce/tiny_mce.js',function(){
        recargar_tiny();
    });

on document.ready()

On firebug log: .js loaded OK, no errors

But seems that recargar_tiny() wich is:

function recargar_tiny(){
     tinyMCE.init({
           mode : "textareas",
            theme : "advanced",
            plugins : "table,inlinepopups",

            // Theme options
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
            editor_deselector : "no_tiny",
            content_css : "/js/tinymce/examples/css/content.css",
            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'}
            ],

            formats : {
                    alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
                    aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
                    alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
                    alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
                    bold : {inline : 'span', 'classes' : 'bold'},
                    italic : {inline : 'span', 'classes' : 'italic'},
                    underline : {inline : 'span', 'classes' : 'underline', exact : true},
                    strikethrough : {inline : 'del'},
                    customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
            }

    });
}

seems not to load the WYSWYG editor. It works if i load it 'normally'

What i'm doing wrong?

-EDit-

Even tried a new function:

function recargar_tiny_now(){

     $.getScript('/js/tiny_mce/tiny_mce.js',function(){
                     tinyMCE.init({
       mode : "textareas",
        theme : "advanced",
        plugins : "inlinepopups",
        media_strict: false,
        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,forecolor,image,link,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,removeformat,|,bullist,numlist,|,outdent,indent",
        heme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "center",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        editor_deselector : "no_tiny",


        // Example content CSS (should be your site CSS)
        content_css : "/js/tinymce/examples/css/content.css",

        // Style formats
        style_formats : [

                {title : 'Bold text', inline : 'b'},
                {title : 'Blue text', inline : 'span', styles : {color : '#006'}},
                {title : 'Blue header', block : 'h1', styles : {color : '#006'}},
                {title : 'Codigo fuente', inline : 'code', classes : 'prettyprint', exact: true}


        ],

        formats : {
                alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
                aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
                alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
                alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
                bold : {inline : 'span', 'classes' : 'bold'},
                italic : {inline : 'span', 'classes' : 'italic'},
                underline : {inline : 'span', 'classes' : 'underline', exact : true},
                strikethrough : {inline : 'del'},
                customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
        }

});
     });

}

to use as a callback, and finally got something, tiny doesn't work, but I get on Firebug:

Sceen of the error

thanks!

0

There are 0 answers