Зарегистрируйте прослушиватель кликов на выпадающих элементах ckeditor5 - PullRequest
Новая
       19

Зарегистрируйте прослушиватель кликов на выпадающих элементах ckeditor5

1 голос
/ 29 апреля 2020

Я сейчас пытаюсь написать плагин для CKEditor 5 для поддержки автоматических c переводов. Я смог узнать , как писать плагины и как создавать выпадающие списки в документации.

Но в документации нет упоминания (или я его пропустил), как получить информацию о щелчок по значениям:

  • Для кнопки, открывающей раскрывающийся список, существует обработчик выполнения, но как зарегистрировать прослушиватель для щелчка по одному из значений?
  • Могу ли я назначить id или аналогичные элементы для распознавания щелчка по правому элементу раскрывающегося списка?

Вот код, который я смог построить на основе документации: 

class Translation extends Plugin {
    init() {
        this.editor.ui.componentFactory.add('translate', (locale) => {
            const dropdownView = createDropdown(locale);
            dropdownView.buttonView.set({
                icon: languageIcon,
                label: 'Translate',
                tooltip: true,
            });

            const items = new Collection();
            items.add({
                id: 'en', // how to assign id ???
                type: 'button',
                model: new Model({
                    withText: true,
                    label: 'English'
                }),
            });
            items.add({
                id: 'es', // how to assign id ???
                type: 'button',
                model: new Model({
                    withText: true,
                    label: 'Spanish'
                }),
            });
            addListToDropdown(dropdownView, items);

            // callback for click on item ????
            dropdownView.on('click', (event) => {
                console.log('click', event);
            });

            return dropdownView;
        });
    }
}

Ответы [ 2 ]

1 голос
/ 09 мая 2020

Вы можете использовать метод DropdownView.on () для прослушивания события execute.

И, используйте свойство EventInfo.source для получения объекта по щелчку, а затем используйте его свойство, например id или label, чтобы идентифицировать его.

Например: 

const items = new Collection();
items.add( {
    type: 'button',
    model: new Model({
        id: 'en',                // id 
        withText: true,
        label: 'English',
    })
} );
items.add( {
    type: 'button',
    model: new Model({
        id: 'es',               // id
        withText: true,
        label: 'Spanish'
    })
} );

addListToDropdown(dropdownView, items);

dropdownView.on('execute', (eventInfo) => {
    const { id, label } = eventInfo.source;

    if ( id === 'en' ) {
        console.log('Object (en):', label);
    } else if ( id === 'es' ) {
        console.log('Object (es):', label);
    }
});

Вот полный рабочий пример с ClassicEditor (проверено) : 

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Model from '@ckeditor/ckeditor5-ui/src/model';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

const Translate = 'translate';

class Translation extends Plugin {
    init() {
        console.log('Translation initialized!');

        this.editor.ui.componentFactory.add(Translate, (locale) => {
            const dropdownView = createDropdown(locale);
            dropdownView.buttonView.set({
                label: 'Translate',
                withText: true,
            });

            const items = new Collection();
            items.add( {
                type: 'button',
                model: new Model({
                    id: 'en',
                    withText: true,
                    label: 'English',
                })
            } );
            items.add( {
                type: 'button',
                model: new Model({
                    id: 'es',
                    withText: true,
                    label: 'Spanish'
                })
            } );

            addListToDropdown(dropdownView, items);

            dropdownView.on('execute', (eventInfo) => {
                const { id, label } = eventInfo.source;

                if ( id === 'en' ) {
                    console.log('Object (en):', label);
                } else if ( id === 'es' ) {
                    console.log('Object (es):', label);
                }
            });

            return dropdownView;
        });
    }
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Translation ],
        toolbar: [ Translate ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

Вывод на консоль после нажатия на оба элемента: 

Object (en): English
Object (es): Spanish
1 голос
/ 09 мая 2020

Вы можете использовать Выполнить . это вызовет событие, когда кнопка панели инструментов или элемент списка будет выполнен. for listView Это происходит, когда запускается дочерний элемент некоторого ListItemView . для toolbarView Он срабатывает, когда одна из кнопок была выполнена. Выполнение вернет объект EventInfo при возникновении события. Кроме того, есть методы off () и stop () для отмены регистрации прослушивателя событий.

Примечание: поддерживается только в том случае, если в раскрывающемся списке добавлено представление списка с использованием addListToDropdown или addToolbarToDropdown .

Вот фрагмент кода, попробуйте. 

this.listenTo( dropdownView, 'execute', eventInfo => {
    console.log(eventInfo.source);
} );

---------------- ------------------------------------------- ИЛИ ------ -------------------------------------------------- ---------- 

dropdownView.on('execute', eventInfo => {
    console.log(eventInfo.source);
} );
...