我在 CKEditor 4 中不能有超过 3 个选项卡

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

也请看看image plugin dialog and its code。此对话框使用 3-5 个选项卡，因此它应该是创建您自己的选项卡的良好起点。

---

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

请注意，每个选项卡都有其唯一的 id 非常重要，如下面的代码片段所示（注意 firsttesttab、testtab 和 othertesttab id）。如果您不使用 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() {
        ...

注意：同样重要的是，每个选项卡中的 UI 元素也具有唯一的 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

也请看看image plugin dialog and its code。此对话框使用 3-5 个选项卡，因此它应该是创建您自己的选项卡的良好起点。

---

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

请注意，每个选项卡都有其唯一的 id 非常重要，如下面的代码片段所示（注意 firsttesttab、testtab 和 othertesttab id）。如果您不使用 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() {
        ...

注意：同样重要的是，每个选项卡中的 UI 元素也具有唯一的 ids。