在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屋!