I cant have more than 3 tabs in CKEditor 4

Question

I need three tabs but my code mixes it up with other tabs there is no CKEditor 4 documentation about this subject

here is my code:

            {
                label: 'one',
                elements: [
                    {
                        type: 'text',
                        id: 'img',
                        label: 'imgtext',
                    },
                ],
            },
            {
                label: 'two',
                elements: [
                    {
                        type: 'text',
                        label: editor.lang.common.url,
                    },
                ],
            },
            {
                label: 'three',
                elements: [
                    {
                        type: 'text',
                        label: editor.lang.common.width,
                    },
                ],
            },

I hope you can help

Answer 1

You can find documentation here:

• https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html#plugin-dialog-window
• https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_2.html#dialog-window-logic
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog_definition.html

Please also have a look at image plugin dialog and its code. This dialog uses 3-5 tabs so it should be a good starting point to create your own.

---

I need three tabs but my code mixes it up with other tabs

Please note that is very important that each tab has its unique id as shown in below code snippet (notice firsttesttab, testtaband othertesttab ids ). If you don't use ids then code from all tabs will get mixed up:

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
    return {

        // Basic properties of the dialog window: title, minimum size.
        title: 'Abbreviation Properties',
        minWidth: 600,
        minHeight: 200,

        // Dialog window content definition.
        contents: [
            {
                // Definition of the Basic Settings dialog tab (page).
                id: 'firsttesttab',
                label: 'First Test Tab',
                // The tab content.
                elements: [
                    {
                        // Text input field for the abbreviation text.
                        type: 'text',
                        id: 'firsttxttest',
                        label: 'First Test Field'
                    }
                ]
            },
            {
                // Definition of the Basic Settings dialog tab (page).
                id: 'testtab',
                label: 'Test Tab',
                // The tab content.
                elements: [
                    {
                        // Text input field for the abbreviation text.
                        type: 'text',
                        id: 'txttest',
                        label: 'Test Field'
                    }
                ]
            },
            {
                // Definition of the Basic Settings dialog tab (page).
                id: 'othertesttab',
                label: 'Other Test Tab',
                // The tab content.
                elements: [
                    {
                        // Text input field for the abbreviation text.
                        type: 'text',
                        id: 'othertxttest',
                        label: 'Other Test Field'
                    }
                ]
            }
        ],

        // Invoked when the dialog is loaded.
        onShow: function() {
        ...

NOTE: It is also important that UI elements inside each tab have unique ids as well.