Multiple instances with different config files in IE broken

Do you really need completely separate config files? I ask because if you only need to do separate toolbars, you can do it more easily with settings like these:

   config.toolbar_ComplexVersion =
   [
       ['Source'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Image','Table','HorizontalRule'],
       ['NumberedList','BulletedList'],['Outdent','Indent','Blockquote'],['Link','Unlink','Anchor'],
       ['Bold','Italic','Underline','Strike','Subscript','Superscript'],['Font'],['FontSize'],
       ['Styles'],['TextColor'],['BGColor'],['Maximize','ShowBlocks']
   ];

   config.toolbar = 'SimpleVersion';

   config.toolbar_SimpleVersion =
   [
       ['Source'],['Cut','Copy','Paste','PasteText'],
       ['Bold','Italic','Underline','Strike'],
       ['Styles']
   ];
    };

And then when you actually do your separate instances, you'd do:

      CKEDITOR.replace("YourIDHere", { toolbar : 'ComplexVersion' });

(The above text sets SimpleVersion as the default, but you could do it without.....)

Cheers.

This issue is not resolved. After reading all documentation and multiple tries, the only way I found to share multiple instances with different config files is using js setTimeout function, neither onload or (document).ready works.

The solution given by libek is not one solution. I dont want have different toolbars, but different sizes. So the question is How we can use different ckeditor-textareas sizes in the same form?.

This is my code:

<textarea name="teaser" id="teaser"></textarea>
<script language="javascript" type="text/javascript">
CKEDITOR.replace('teaser',  {customConfig : 'teaser.js' });
</script>

<textarea name="content" id="content"></textarea>
 <script language="javascript" type="text/javascript">
setTimeout ("CKEDITOR.replace('content',  {customConfig : 'content.js' });", 1000);
</script>

Without setTimeout function, config files sometimes are applied to each textarea and sometimes no. Sometimes teaser.js applies to two textareas, and sometimes content.js applies to two textares. It's easy to see the problem reloading consecutively. It not happens only in IE, I haver tried on Chrome, FF and same effect.

I have exactly the same issue not only on IE, but on all explorers (IE,FF, Chrome, etc).

What I have: 2 editors, one with a custom JS config file basic.js, the other with default.js

Here is my code, the HTML part and the JS/JQuery part:

<textarea name="mytextarea1" id="myTextAreaID1" blg_id="myTextAreaID1" class="blg_editor" style="width:100px;height:200px;resize: none;" >text here 3</textarea>

<textarea name="mytextarea3" id="myTextAreaID3" blg_id="myTextAreaID3" class="blg_editor" style="width:100px;height:200px;resize: none;" >text here 2</textarea>

      $(document).ready( function(){
         $('#myTextAreaID1').ckeditor( 
            function(){ console.log(config); }, 
            {
               customConfig: 'http://localhost/blog_php/public_html/mod/ckeditor/blg/basic.js',
               contentsCss: ['http://localhost/blog_php/public_html/default.css', 'http://localhost/blog_php/public_html/mod/ckeditor/blg/blg_editor.css'],
               height: '200px'
            }
         );
      });      
      

      $(document).ready( function(){
         $('#myTextAreaID3').ckeditor( 
            function(){ console.log(config); }, 
            {
               customConfig: 'http://localhost/blog_php/public_html/mod/ckeditor/blg/default.js',
               contentsCss: ['http://localhost/blog_php/public_html/default.css', 'http://localhost/blog_php/public_html/mod/ckeditor/blg/blg_editor.css'],
               height: '200px'
            }
         );
      });

If I only instance one editor at a time, it loads the correct configuration. But if more than one, like in my example above, all editors take the config aplied to the last editor....

Any clues????

I'm having a similar problem, just want to have 2 different configs, it will do the last one in the config.js file, aka basictoolbar:(wasn't sure if I should have posted this as a seperate message)

/*This configs the toolbars used for the editing form*/
CKEDITOR.editorConfig = function (config) {
    
    config.enterMode = CKEDITOR.ENTER_BR;
    config.filebrowserBrowseUrl= '/org/connectfourlearning/filemanager/filemanagerindex.html';
    config.filebrowserUploadUrl = '/uploader/upload.php';

    config.toolbar = 'regulartoolbar';
    config.toolbar_regulartoolbar =
    [
    {name: 'regularstyles', items: ['BulletedList', 'Bold', 'Italic', 'Strike', 'Underline', 'Superscript', 'Subscript', '-', 'RemoveFormat', 'Image', 'Table'] }
    ];

    config.toolbar = 'basictoolbar';
    config.toolbar_basictoolbar =
   [
           {name: 'basicstyles', items:['BulletedList', 'Bold', 'Italic', 'Strike', 'Underline', 'Superscript', 'Subscript', '-', 'RemoveFormat', 'Image'] }
                ];
};

The front end is this

<CKEditor:CKEditorControl ToolbarSet="regulartoolbar" ID="ReadyMaterialsTextBox" runat="server" Text='<%# Bind("ReadyMaterials") %>'></CKEditor:CKEditorControl>

<CKEditor:CKEditorControl ToolbarSet="basictoolbar" ID="ReadyObjectivesTextBox" runat="server" Text='<%# Bind("ReadyObjectives") %>'></CKEditor:CKEditorControl>

This problem is reported in this ticket: http://dev.ckeditor.com/ticket/6504

I have found the best way to define custom variables for your config file without conflicts is to create a variable i.e.
var small_editor = {width:200,height:400};

Then you can define for the editor to use this instead of a completely different config file.

$(".editor").ckeditor(small_editor);

I've also been trying to figure out this custom toolbars with multiple instances of CKEditor on one page.  silverbackis had a good clue on how to make them different sizes - his solution worked (thanks!).

I have a big problem trying to get the custom toolbars to work at all.  For example, in config.js, I have:

config.toolbar_Basic = [
        ['Bold','Italic','Underline','-','NumberedList','BulletedList','-','Undo','Redo']
    ];
    config.toolbar_BasicPlusPH = [
        ['CreatePlaceholder','-','Bold','Italic','Underline','-','NumberedList','BulletedList','-','Undo','Redo']
    ];

Then when I try to create an editor like this:

CKEDITOR.replace( 'textarea_id', {height: 140, width: 290},
   {toolbar: 'Basic'}
 );   // does not work, gives me full toolbar instead

CKEDITOR.replace( 'textarea_id', size_editor,
{toolbar: ['CreatePlaceholder','-','Bold','Italic','Underline','-','NumberedList','BulletedList','-','Undo','Redo']});    // DOES NOT WORK EITHER, shows FULL toolbar instead

Instead I have to put a line like this:  CKEDITOR.config.toolbar = 'Basic';

But then both CKEditor instances have the same toolbar.  If I later put another line: CKEDITOR.config.toolbar = 'BasicPlusPH';

Then both editors get the BasicPlusPH toolbar.  Either of the above lines gives me the correct toolbar I made, but whatever line is last is what both toolbars look like.

So first of all, why doesn't the syntax to specify the toolbar inside the CKEDITOR.replace call not work?  I've looked at tons of examples, and they do not work.

Second of all, is it possible to get two different toolbars on two different instances of CKEditor?  And please keep in mind, if you mention to use the "{toolbar: 'BasicPlusPH'} inside the replace call - that I cannot get this to work at all - even with once instance of CEditor on the page.

I appreciate any help!