在 ckeditor5 下拉项上注册点击监听器

Question

我目前正在尝试为 CKEditor 5 to support automatic translations. I was able to find out how to write plugins 编写插件以及如何在文档中创建下拉菜单。

但是在文档中没有提到（或者我错过了）如何获知点击值：

打开下拉菜单的按钮有一个执行处理程序，但我如何为点击其中一个值注册监听器？
我可以为我的项目指定一个 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;
        });
    }
}

Answer 1

您可以在事件触发时使用 execute. it will fire an event when the toolbar button or list item is executed.for listView It fires when a child of some ListItemView fired execute. for toolbarView It fires when one of the buttons has been executed. execute will return EventInfo 对象。此外，还有 off() 和 stop() 方法来取消注册事件侦听器。

Note: Only supported when dropdown has list view added using addListToDropdown or addToolbarToDropdown.

这是代码片段，试一试。

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

-------------------------------------------- - - - - - - - 要么 - - - - - - - - - - - - - - - - - - ------------------------------

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

Answer 2

您可以使用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

在 ckeditor5 下拉项上注册点击监听器

Register click listener on ckeditor5 dropdown items

ckeditor

ckeditor5