How can I add several TinyMCE editors with different settings for each of them?

Question

I want to add several TinyMCE editors, and each of them has its own configuration on one page?

How can i do this?

Answer 1

You can do something like this:

jQuery version:

$('textarea.editor1').tinymce(
{
    script_url : '../admin/tiny_mce/tiny_mce.js',
    theme : "simple",
    plugins : "", // put plugins here
    setup : function(ed) 
    {
         ed.onInit.add(function(ed)
        {

        });             
    }
});

$('textarea.editor2').tinymce(
{
    script_url : '../admin/tiny_mce/tiny_mce.js',
    theme : "simple",
    plugins : "", // put plugins here
    setup : function(ed) 
    {
         ed.onInit.add(function(ed)
        {

        });             
    }
});

Non-jQuery version:

tinyMCE.init(
{
    mode : "textareas",
    theme : "simple",
    editor_selector : "editor1"
});

tinyMCE.init(
   {
       mode : "textareas",
    theme : "simple",
    editor_selector : "editor2"

   });

Answer 2

It is easy to achieve. I use jQuery lib to save the code, but it is easy to create without jQuery. Suppose you have html elements (for example, textareas) with identifiers " my_id1" and " my_id1" that you want to get a minimum for all you need to do:

var config_tinymce_1 = {

        plugins :"save",

        theme_advanced_buttons1 : "bold,italic,underline,save",
        theme_advanced_buttons2 : "",
        ...
};


var config_tinymce_2 = {

        plugins :"save",

        theme_advanced_buttons1 : "save",
        theme_advanced_buttons2 : "",
        ...
};

$(document).ready(function(){
        init_obj_1 = {element_id:'my_id1', window: window};
        $.extend(true, init_obj_1, config_tinymce_1);
        tinyMCE.execCommand('mceAddFrameControl',false, init_obj_1);

        init_obj_2 = {element_id:'my_id2', window: window};
        $.extend(true, init_obj_2, config_tinymce_2);
        tinyMCE.execCommand('mceAddFrameControl',false, init_obj_2);
});