Настройка выпадающего меню для CKeditor 5 - PullRequest
Новая
       4

Настройка выпадающего меню для CKeditor 5

0 голосов
/ 28 сентября 2018

Удалось добавить пользовательскую выпадающую кнопку на панель инструментов:
enter image description here Но я не знаю, как добавить к ней метку или значок.

Вотмой код: 

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;
        });
    }
}

1 Ответ

0 голосов
/ 01 октября 2018

Настройка меток, значков и т. Д. Для кнопки раскрывающегося списка должна выполняться в экземпляре представления раскрывающегося списка: 

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

Обратите внимание, что эти свойства наблюдаемы и могут быть динамически оценены на основенекоторые состояния с использованием функции ObservableMixin # bind .

См. пример здесь: https://github.com/ckeditor/ckeditor5-alignment/blob/894745ecb1e8bd94286b4089eb16079034eb8a0b/src/alignmentui.js#L107-L124

...