CKEditor 5自定义插件在阅读模式下未被禁用

Question

现在我正在将自定义插件集成到ckeditor 5中。我使用ckeditor 5的文档创建和添加了插件。我还有一个类似于这个示例的自定义“超级”构建，我在我的Web应用程序中使用。

现在我的问题是，在ckeditor读取模式下，我的插件将无法禁用（如底部图像所示）。ckeditor 文档提到这应该是插件/按钮的“默认”行为。

如果有人知道我做错了什么，那将非常感激！

以下是我的自定义插件类的骨架示例。

import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';

import ckeditor5Icon from './icons/insertvariable.svg';

export default class HWInsertVariable extends Plugin {
    static get pluginName() {
        return 'HWInsertVariable';
    }

    init() {
        const that = this;
        const editor = this.editor;
        const model = editor.model;

        let labelTxt = 'Variable einfügen';

        editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: labelTxt,
                icon: ckeditor5Icon,
                tooltip: true,
                affectsData: true
            } );

            this.listenTo( view, 'execute', () => {
                model.change( writer => {
                    that.buttonClicked();
                } );

                editor.editing.view.focus();
            } );

            return view;
        } );
    }

    buttonClicked() {
        //code
    }
}

- DerKorb

Answer 1

我不确定解决这个问题的正确方法是什么，因为我也面临同样的问题。但我目前发现，可能有一种巧妙的方法可以解决它。

请查看关于“禁用命令”、“只读”模式的文档，并注意CSS类“ck-disabled”

如果/当我找到有效的解决方法时，我会尝试回到这里并发布更好的解决方案。

---

更新： 当我发现我的my_plugin_ui.js代码中缺少部分代码时，我已经为自己修复了这个问题。

  const command = editor.commands.get('nameOfCommand');

  // Execute the command when the button is clicked (executed).
  buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');

- jakebugz617