我在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及其code。该对话框使用3-5个选项卡，因此创建自己的对话框应该是一个不错的起点。

---

  

我需要三个标签，但是我的代码将其与其他标签混在一起了

请注意，每个标签页都有其唯一的id，如下面的代码片段所示（注意firsttesttab，testtab和othertesttab ids），这一点非常重要。如果您不使用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及其code。该对话框使用3-5个选项卡，因此创建自己的对话框应该是一个不错的起点。

---

  

我需要三个标签，但是我的代码将其与其他标签混在一起了

请注意，每个标签页都有其唯一的id，如下面的代码片段所示（注意firsttesttab，testtab和othertesttab ids），这一点非常重要。如果您不使用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。