如何从CKEditor5视图类下拉框取值并响应用户输入

1. 响应下拉项execute事件并持久化选择 #

修改View类中的_createDropdown方法，通过MVVM模型绑定实现选中状态的存储与按钮文本更新：

// 此代码位于继承自ckeditor5/src/ui/View的View类中
_createDropdown(label, options) {
    const dropdown = createDropdown(this.locale);
    // 初始化默认选中值（这里取第一个选项作为默认）
    this._selectedAlignment = options[0].value;

    // 按钮初始显示默认选中项的文本
    dropdown.buttonView.set({
        label: `${label}: ${options[0].text}`,
        withText: true
    });

    const items = new Collection();

    options.forEach(option => {
        const itemModel = new Model({
            icon: option.icon,
            label: option.text,
            withText: true,
            value: option.value // 为选项绑定对应值
        });

        // 监听选项的execute事件，更新选中状态
        this.listenTo(itemModel, 'execute', () => {
            this._selectedAlignment = option.value;
            // 更新下拉按钮显示当前选中项
            dropdown.buttonView.set('label', `${label}: ${option.text}`);
            // 选中后自动关闭下拉框
            dropdown.isOpen = false;
        });

        items.add({
            type: 'button',
            model: itemModel
        });
    });

    addListToDropdown(dropdown, items);
    dropdown.render();

    return dropdown;
}

调用该方法时，传入的options需包含value字段（示例）：

this.alignmentDropdown = this._createDropdown('对齐方式', [
    { text: '居中', value: 'center', icon: yourCenterIcon },
    { text: '左对齐', value: 'left', icon: yourLeftIcon },
    { text: '右对齐', value: 'right', icon: yourRightIcon }
]);

为了更规范地获取选中值，可在View类中添加getter：

get alignment() {
    return this._selectedAlignment;
}

2. 在UI类中获取选中值 #

放弃直接操作DOM元素的方式，通过View类的属性获取选中值：

// UI类，继承自Plugin
this.listenTo(iframeView, 'submit', () => {
    const url = iframeView.urlInput.fieldView.element.value;
    const width = iframeView.widthInput.fieldView.element.value;
    const height = iframeView.heightInput.fieldView.element.value;
    // 通过View的getter获取对齐方式
    const alignment = iframeView.alignment;
    const showScrollBars = iframeView.showScrollbarsToggle.fieldView.element.value;
    const showBorders = iframeView.showBorderToggle.fieldView.element.value;
    const name = iframeView.nameInput.fieldView.element.value;
    const title = iframeView.advisoryTitleInput.fieldView.element.value;
    const description = iframeView.longDescriptionInput.fieldView.element.value;
    // 后续业务逻辑...
});

注：CKEditor5基于MVVM设计，建议优先通过视图/模型属性交互，而非直接操作DOM元素，避免框架内部状态不一致问题。

内容的提问来源于stack exchange，提问作者Koen Cornelis