load tinyMCE into colorbox

Question

i have this problem: in my site there are textareas with tinymce and i can see all textarea right, but when i open colorbox within textarea, this not inherit tinymce properties. This is my code to open colorbox:

$("#edit_item"+val.iditem).colorbox({
   href: $(this).attr('href'),                     
   data: data,
   onComplete: function(){ setup_tiny(); }  
});

and this is my function 'setup_tiny':

function setup_tiny(){
    tinyMCE.init({
      mode : "exact",
    elements : "description",        
        width : "40%",        
        height: "200",

        // General options        
        theme: "advanced",

        // Theme options
        theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
        theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
        theme_advanced_buttons4: "",

        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_resizing: true
   });
}

I have just tried this way, after load colorbox:

tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');                    
tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');

but it doesn't work as well. I have also tried to import tinymce plugin from this site 'http://mktgdept.com/jquery-tinymce-plugin' and also this not work.

How can I load tinymce inside colorbox? Thanks

Answer 1

I've solved my issue using the following code:

function setup_tiny(textarea_name){      
    tinyMCE.init({
        mode : "exact",
        elements : textarea_name,                                

        // General options        
        theme: "advanced",

        // Theme options
        theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
        theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
        theme_advanced_buttons4: "",

        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_resizing: true
   });
}
$("#edit_item"+val.iditem).colorbox({
    href: $(this).attr('href'),                     
    data: data,
    onComplete: function(){                            
        setup_tiny("new_description");
    }                
}); 

In this way i invoke my function 'setup_tiny' with id textarea passed as argument.