在ckeditor5下拉项目上注册点击侦听器 [英] Register click listener on ckeditor5 dropdown items

问题描述

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

I am currently trying to write a plugin for the CKEditor 5 to support automatic translations. I was able to find out how to write plugins and how to create dropdowns in the documentation.

但是在文档中没有提及(或者我错过了)如何得知有关单击值的信息:

But in the documentation there is no mention (or I missed it) how to be informed about a click on the values:

• 按钮的执行处理程序可打开下拉菜单，但是如何注册用于单击其中一个值的侦听器?
• 我可以分配一个 id 或与我的商品相似的符号来识别对下拉菜单右侧元素的点击吗?

• There is an Execute Handler for the button that opens the dropdown, but how do I register a listener for a click on one of the values?
• Can I assign an id or similar to my items to recognize the click on the right element of the dropdown?

这是我根据文档能够构建的代码:

Here's the code that I was able to build based on the documentation:

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

推荐答案

您可以使用

You can use DropdownView.on() method to listen to the execute event.

然后，使用 EventInfo.source 属性以获取被单击的对象，然后使用其属性，例如 id 或 label 进行标识.

And, use EventInfo.source property to get the object that is clicked and then use its property e.g. id or label to identify it.

例如:

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 (经过测试)的完整工作示例:

Here's the complete working example with ClassicEditor (tested):

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

单击两项后控制台输出:

Console output after clicking both items:

Object (en): English
Object (es): Spanish

这篇关于在ckeditor5下拉项目上注册点击侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！