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

Question

我目前正在尝试为CKEditor 5编写一个插件来支持自动翻译。我能够在文档中找到如何编写插件以及如何创建下拉菜单。

但在文档中没有提及（或者我错过了）如何获知有关单击值的信息：

• 打开下拉列表的按钮有一个执行处理程序，但如何注册一个监听器来单击其中一个值？
• 我可以为我的项目分配一个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

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