CKeditor 5的自定义下拉按钮

Question

设法将自定义下拉按钮添加到工具栏：
但是我不知道如何在其中添加标签或图标。

这是我的代码：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Model from '@ckeditor/ckeditor5-ui/src/model';

import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';

import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';

export default class ImageDropdown extends Plugin {
    
    static get pluginName() {
        return 'ImageDropdown';
    }
    
    init() {
        const editor = this.editor;
        const t = editor.t;
        const defaultTitle = t('Add image');
        const dropdownTooltip = t('Image');

        // Register UI component
        editor.ui.componentFactory.add('imageDropdown', locale => {

            const dropdownView = createDropdown( locale );

            dropdownView.set({
                label: 'Image',
                tooltip: true
            });
            dropdownView.buttonView.set( {
				isOn: false,
				withText: true,
				tooltip: dropdownTooltip
            });
            dropdownView.extendTemplate( {
				attributes: {
					class: [
						'ck-image-dropdown'
					]
				}
			});

            // The collection of the list items.
            const items = new Collection();

            items.add( {
                type: 'button',
                model: new Model( {
                    label: 'Uppload image',
                    icon: imageIcon
                })
            });

            items.add( {
                type: 'button',
                model: new Model( {
                    label: 'Image URL',
                    icon: imageIcon
                })
            });

            // Create a dropdown with a list inside the panel.
            addListToDropdown( dropdownView, items );

            return dropdownView;
        });
    }
}

Answer 1

为下拉按钮设置标签，图标等应在下拉视图的实例上进行：

dropdownView.buttonView.set({
    label: 'some-label',
    icon: 'path/to/some/icon'
    tooltip: true
});

请注意，这些属性是observable，可以使用ObservableMixin#bind函数根据某些状态动态评估。

在此处查看示例：https://github.com/ckeditor/ckeditor5-alignment/blob/894745ecb1e8bd94286b4089eb16079034eb8a0b/src/alignmentui.js#L107-L124