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

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

但在文档中没有提到（或我没有提到）如何通知单击值：

• 打开下拉列表的按钮有一个执行处理程序，但是如何注册一个侦听器来单击其中一个值呢
• 我是否可以指定一个

  id

  或类似于我的项目的id来识别下拉列表右侧元素上的点击

以下是我能够基于文档构建的代码：

类转换扩展插件{
init（）{
this.editor.ui.componentFactory.add（'translate'，（locale）=>{
const dropdownView=createDropdown（区域设置）；
dropdownView.buttonView.set({
icon:languageIcon，
标签：“翻译”，
提示：正确，
});
const items=新集合（）；
items.add({
id:'en'，//如何分配id？？？
键入：“按钮”，
型号：新型号({
withText:true，
标签：“英语”
}),
});
items.add({
id:'es'，//如何分配id？？？
键入：“按钮”，
型号：新型号({
withText:true，
标签：“西班牙语”
}),
});
addListToDropdown（下拉视图，项目）；
//点击项目的回调？？？？
dropdownView.on（'单击'，（事件）=>{
console.log（'click'，事件）；
});
返回下拉视图；
});
}
}

您可以使用。当工具栏按钮或列表项被执行时，它将触发一个事件。对于listView，当某个ListItemView的子项被触发时，它将触发执行。对于工具栏视图，当其中一个按钮被执行时，它将触发。当事件激发时，execute将返回对象。此外，还有off（）和stop（）方法来注销事件侦听器

注意：仅当下拉菜单使用addListToDropdown或addToolbarToDropdown添加了列表视图时才受支持

下面是代码片段，请试一试

this.listenTo（下拉视图，'execute'，eventInfo=>{
console.log（eventInfo.source）；
} );

-----------------------------------------------------------或------------------------------------------------------------------

dropdownView.on（'execute'，eventInfo=>{
console.log（eventInfo.source）；
} );

您可以使用方法来侦听

执行事件

并且，使用属性获取单击的对象，然后使用其属性，例如
id
或
label
来识别它

例如：

const items=new Collection（）；
项目.加入（{
键入：“按钮”，
型号：新型号({
id:'en'，//id
withText:true，
标签：“英语”，
})
} );
项目.加入（{
键入：“按钮”，
型号：新型号({
id:'es'，//id
withText:true，
标签：“西班牙语”
})
} );
addListToDropdown（下拉视图，项目）；
dropdownView.on（'execute'，（eventInfo）=>{
const{id，label}=eventInfo.source；
如果（id=='en'）{
log（'对象（en）：'，标签）；
}else if（id=='es'）{
console.log（'对象：'，标签）；
}
});

下面是使用
ClassicEditor
（已测试）的完整工作示例：

从'@ckeditor/ckeditor5 editor classic/src/ClassicEditor'导入ClassicEditor'；
从“@ckeditor/ckeditor5 Essentials/src/Essentials”导入Essentials；
从“@ckeditor/ckeditor5ui/src/Model”导入模型；
从“@ckeditor/ckeditor5 utils/src/Collection”导入集合；
从“@ckeditor/ckeditor5ui/src/dropdown/utils”导入{createDropdown，addListToDropdown}”；
从“@ckeditor/ckeditor5 core/src/Plugin”导入插件；
const Translate='Translate'；
类转换扩展插件{
init（）{
log（'Translation initialized！'）；
this.editor.ui.componentFactory.add（Translate，（locale）=>{
const dropdownView=createDropdown（区域设置）；
dropdownView.buttonView.set({
标签：“翻译”，
withText:true，
});
const items=新集合（）；
项目.加入（{
键入：“按钮”，
型号：新型号({
id:'恩'，
withText:true，
标签：“英语”，
})
} );
项目.加入（{
键入：“按钮”，
型号：新型号({
id:'es'，
withText:true，
标签：“西班牙语”
})
} );
addListToDropdown（下拉视图，项目）；
dropdownView.on（'execute'，（eventInfo）=>{
const{id，label}=eventInfo.source；
如果（id=='en'）{
log（'对象（en）：'，标签）；
}else if（id=='es'）{
console.log（'对象：'，标签）；
}
});
返回下拉视图；
});
}
}
分类编辑器
.create（document.querySelector（“#editor”）{
插件：[精华，翻译]，
工具栏：[翻译]
} )
.然后（编辑=>{
日志（'编辑器已初始化'，编辑器）；
} )
.catch（错误=>{
console.error（error.stack）；
} );

单击两项后的控制台输出：

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

我已经尝试了执行侦听器。如果在我的代码中将
单击
替换为
执行
，则回调将被称为b