Я не могу иметь более 3 вкладок в CKEditor 4

Question

Мне нужны три вкладки, но мой код смешивает их с другими вкладками. Документация CKEditor 4 на эту тему отсутствует.

Вот мой код:

            {
                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,
                    },
                ],
            },

Надеюсь, вы можете помочь

Answer 1

Документацию можно найти здесь:

• 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

Пожалуйста, такжевзгляните на диалог плагина изображения и его код .В этом диалоговом окне используются 3-5 вкладок, поэтому он должен послужить хорошей отправной точкой для создания собственной.

---

Мне нужны три вкладки, но мой код смешивает их с другими вкладками

Обратите внимание, что очень важно, чтобы каждая вкладка имела свой уникальный id, как показано в приведенном ниже фрагменте кода (обратите внимание на идентификаторы firsttesttab, testtab и othertesttab).Если вы не используете ids, то код из всех вкладок будет перепутан:

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() {
        ...

ПРИМЕЧАНИЕ: Также важно, чтобы элементы пользовательского интерфейса внутри каждой вкладки также имели уникальный ids.

Answer 2

Документацию можно найти здесь:

• 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

Пожалуйста, взгляните также на диалог плагина изображения и его код . Этот диалог использует 3-5 вкладок, поэтому он должен стать хорошей отправной точкой для создания вашей собственной.

---

Мне нужны три вкладки, но мой код смешивает их с другими вкладками

Обратите внимание, что очень важно, чтобы каждая вкладка имела свой уникальный id, как показано в приведенном ниже фрагменте кода (обратите внимание на идентификаторы firsttesttab, testtab и othertesttab). Если вы не используете ids, то код из всех вкладок будет перепутан:

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() {
        ...

ПРИМЕЧАНИЕ: Также важно, чтобы элементы пользовательского интерфейса внутри каждой вкладки также имели уникальный ids.