How to set up CKEditor for multiple instances with different heights?

Question

I'd like to have multiple instances of CKEditor based on the same config settings, but with different heights. I tried setting up config with the default height, setting up the 1st instance, then overriding the height & setting up the 2nd instance:

var config = {
    .....
    height:'400'
};

$('#editor1').ckeditor(config);
config.height = '100';
$('#editor2').ckeditor(config);

...but I get two CKEditor instances that both have 100px height.

I also tried this:

CKEDITOR.replace('editor2',{
    height: '100'
});

.. I got error messages that the instance already existed. I searched around a bit & found someone in a similar situation got advice that you have to destroy() the instance before replace(), but that seems too complicated for just setting a different initial height.

In the end I set up two different configs & copied over the toolbar_Full property:

var config1 = {
    height:'400',
    startupOutlineBlocks:true,
    scayt_autoStartup:true,
    toolbar_Full:[
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        '/',
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'insert', items : [ 'Image','HorizontalRule' ] },
        { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
        { name: 'colors', items : [ 'TextColor','BGColor' ] },
        { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] },
        { name: 'document', items : [ 'Source' ] }
    ]
}

var config2 = {
    height:'100',
    startupOutlineBlocks:true,
    scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;

$('#editor1').ckeditor(config1);
$('#editor2').ckeditor(config2);

Is there a better way? Anything I'm missing? There's this question but they didn't post quite enough to be useful, & this very similar question hasn't been answered. Thanks!

Update:

This seems to be a timing/config handling quirk of CKEditor -- the config is read & applied later (I'm guessing after the editor's DOM framework has been set up) rather than when the editor is first instantiated.

So, any changes to the config settings made immediately after the 1st editor is instantiated with .ckeditor() are actually applied by the editor at some point in the following several milliseconds. I'd argue this isn't normal behavior, or logical.

For instance, you can get the expected behavior in my first example (overriding the config.height property after the first editor has been instantiated) to work by delaying the 2nd CKEditor instance with setTimeout(). Firefox needed ~100ms, IE needed 1ms. Wacky & wrong.

CKEditor should read the config settings when each editor is first instantiated. For now, everyone has to work around that quirk.

Reinmar · Accepted Answer · 2012-06-26T11:04:34.287

The easiest way to initialize two editors with custom heights is:

$('#editor1').ckeditor({ height: 100 });
$('#editor2').ckeditor({ height: 200 });

or without jQuery:

CKEDITOR.replace('editor1', { height: 100 });
CKEDITOR.replace('editor2', { height: 200 });

AFAIK it isn't possible to change editor's height on the fly.

If these methods weren't working for you, then you were doing sth else wrong.

Update:

Answering to your comment - your question in fact wasn't about CKEditor, but rather about sharing one object with only two different properties. So you can try like this:

var configShared = {
        startupOutlineBlocks:true,
        scayt_autoStartup:true,
        // etc.
    },
    config1 = CKEDITOR.tools.prototypedCopy(configShared),
    config2 = CKEDITOR.tools.prototypedCopy(configShared);
config1.height = 100;
config2.height = 200;

CKEDITOR.replace('editor1', config1);
CKEDITOR.replace('editor2', config2);

CKEDITOR.tools.prototypedCopy is a tool that creates new object with prototype set to the passed one. So they share all properties except of these you override later.

Update 2:

This is the update for the "Update" section in the question :).

There's no quirk in CKEditor's timing or bug or whatsoever - it's pure JavaScript and how BOM/DOM and browsers work plus some practical approach.

First thing - 90% of BOM/DOM is synchronous, but there are a couple of things that aren't. Because of this entire editor has to have asynchronous nature. That's why it provides so many events.

Second thing - in JS object are passed by reference and as we want CKEditor to initialize very quickly we should avoid unnecessary tasks. One of these is copying config object (without good reason). So to save some msecs (and because of async plugins loading too) CKEditor extends passed config object only by setting its prototype to object containing default options.

Summarizing - I know that this may look like a bug, but it's how JS/BOM/DOM libs work. I'm pretty sure that many other libs' async methods are affected by the same issue.

I still need all the other config settings though -- as far as I can tell, your suggestion doesn't allow for using the other config settings in my original question, right? — Wick, Jun 21 '12 at 19:33
Nice job on the prototypedCopy() function! I only disagree that my question "wasn't about about CKEditor" -- your answer of cloning the config object is one solution, but the fact remains my question is about CKEditor's timing quirk with applying the config settings... — Wick, Jun 23 '12 at 18:19
I've updated my answer with response to your "Update" section. — Reinmar, Jun 26 '12 at 11:09

score 2 · Answer 2 · edited Sep 04 '14 at 10:56

Add this you will get the different toolbar for both CKeditor in single page

<script>

    CKEDITOR.on('instanceCreated', function (event) {
        var editor = event.editor,
            element = editor.element;

        if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') {
            editor.on('configLoaded', function () {
                // Remove unnecessary plugins to make the editor simpler.
                editor.config.removePlugins = 'find,flash,' +
                    'forms,iframe,image,newpage,removeformat,' +
                    'smiley,specialchar,stylescombo,templates';

                // Rearrange the layout of the toolbar.
                editor.config.toolbarGroups = [
                    { name: 'editing', groups: ['basicstyles'] },
                    { name: 'undo' },
                    //{ name: 'clipboard', groups: ['selection', 'clipboard'] },
                  { name: 'styles' },
                    { name: 'colors' },
                    { name: 'tools' }
                  //  { name: 'about' }
                ];
            });
        }
    });

</script>

This answer appears to be underrated very much - is there any problem with the approach shown ? Excessive resource consumption, performance hogging, violation of best practices? — collapsar, Aug 12 '15 at 12:34

score 0 · Answer 3 · answered Jun 27 '13 at 18:31

Solution above from Reinmar is working for me, however I decided to give 1 more solution that i used before this one.

It's really simple, all you need to know is that ckeditor create content div element for every instance with almost the same id, only difference is incremental value. So if you have 2,3,4.. instances only difference will be ordinal number. Code is here:

    CKEDITOR.on('instanceReady', function(){
    $('#cke_1_contents').css('height','200px');
});

This event will be activated for every instance you have, so if you want to set height for all instances you could create global variable and use it like x in #cke_"+x+"contents, every time event is activated increase x for 1, check which instance in row is with simple if and then set height.

    var x=1;
CKEDITOR.on('instanceReady', function(){
    if(x==1) h='200px';
    else if(x==2)h='400px';
    else if(x==3)h='700px';
    $('#cke_'+x+'_contents').css('height',h);
    x++;
});

This is not best solution but it is working, problem is you actually see content div resizing.

score 0 · Answer 4 · answered Oct 24 '14 at 11:24

0

If you add the ckeditor.js to page more than once too, it may cause that problem. The script code must be defined once in every page. <script type="text/javascript" src="Fck342/ckeditor.js"></script>

answered Oct 24 '14 at 11:24

CodeRunner

1

score 0 · Answer 5 · answered Sep 22 '15 at 06:50

0

just use CKEDITOR.replaceAll();

answered Sep 22 '15 at 06:50

JM R.

1,311
1
8
4

Waqas K · Answer 6 · 2019-06-25T16:00:39.747

Update 25 Jun 2019.

Please Use this code to add multiple CKEditor instances with custom height for each one. Easiest way ever.

  <textarea name="editor1" style="height:30px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor1' );
      CKEDITOR.add            
   </script>

<textarea name="editor2" style="height:40px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor2' );
      CKEDITOR.add            
   </script>

<textarea name="editor3" style="height:50px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor3' );
      CKEDITOR.add            
   </script>

<textarea name="editor4" style="height:60px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor4' );
      CKEDITOR.add            
   </script>

<textarea name="editor5" style="height:70px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor5' );
      CKEDITOR.add            
   </script>

Ref: Here

As the original post states, the issue was setting different heights/settings on each CKEditor instance. However this answer only describes a method to create multiple CKEditor instances so it doesn't relate to the original question. — Wick, Feb 13 '19 at 17:34

How to set up CKEditor for multiple instances with different heights?

6 Answers6

Linked

Related