CKEDITOR Sharedspaces - Can I load the custom buttons and dropdown just once?

0
votes

CKEditor v4.8 Question with SharedSpaces. I am dynamically generating the Editors (with content replacing the DIV tags - inline editing) in a loop based on SQL rows.

I would like to only load/call the editor.ui.addButton and addRichCombo once outside of the loop. Is this possible?

     for (var i = 0; i < retrievedRecords.length; i++) {
            var documentBlock = retrievedRecords[i];

         // This next line creates each inline editor with all custom buttons and combo every time through the loop
         // Can I just load the custom buttons and combo once and all new editors use that 1 toolbar?
            createInlineEditor('myID_' + i, content, id);

            var refToEditor = document.getElementById('myID_' + i);
            divContainer.appendChild(refToEditor);
        }
1
ckeditorckeditor4.x

1 Answers

0
votes

sharedspace plugin works little different than you would think. It doesn't share the same toolbar between editors, but it's the space between the top and bottom toolbars. I know it could sound little complicated so I'm adding some image to illustrate it:

enter image description here

There are some important reasons why it works like that, but the most obvious is that you can have different plugins for your editors with configured sharedspace plugin and they change the appearance of the toolbar e.g. by additional buttons. If you could share the same toolbar you could get not working buttons for different editors.

IMO the best thing you can do to simplify your code is sharing configuration object between editors.

var config = {
    on: {
        pluginsLoaded: function( evt ) {
            evt.editor.ui.addButton( 'MyBold', {
                label: 'My Bold',
                command: 'bold',
                toolbar: 'basicstyles,1'
            } );
        }
    }
};

 for (var i = 0; i < retrievedRecords.length; i++) {
        var documentBlock = retrievedRecords[i];

        var editor = createInlineEditor('myID_' + i, content, id, config);

        var refToEditor = document.getElementById('myID_' + i);
        divContainer.appendChild(refToEditor);
    }