自定义 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 and can be dynamically evaluated based on some state using the ObservableMixin#bind 函数。

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

自定义 CKeditor 5 的下拉按钮

Customizing dropdown button for CKeditor 5

javascript

ckeditor

dropdown

ckeditor5