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

Question

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

但是在文档中没有提到(或者我错过了)如何获知对值的点击:

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