ckeditor 初始禁用小部件按钮状态

Question

我目前正在开发 Ckeditor 4 小部件，但遇到了以下问题。我希望在完成 AJAX 调用并获得特定结果之前禁用我的小部件按钮。

小部件代码：

editor.widgets.add('smartobject', {
            dialog: 'smartobject',
            pathName: lang.pathName,
            upcast: function(element) {
                return element.hasClass('smartObject');
            },

            init: function() {
                this.setData('editorHtml', this.element.getOuterHtml());
            },
            data: function() {
                var editorHtml = this.data.editorHtml;
                var newElement = new CKEDITOR.dom.element.createFromHtml(editorHtml);
                newElement.replace(this.element);
                this.element = newElement;
            }
        });

按钮添加如下：

        editor.ui.addButton && editor.ui.addButton('CreateSmartobject', {
            label: lang.toolbar,
            command: 'smartobject',
            toolbar: 'insert,5',
            icon: 'smartobject'
        });

使用此代码，我似乎无法配置默认的禁用状态。 所以我在文档中搜索，并认为我已经解决了。 以下代码添加似乎可以工作：

editor.$smartobjectPluginPreloadAvailableSmartobjectsPromise.done(function(availableSmartobjects) {
            if (availableSmartobjects && availableSmartobjects.length > 0) {
                editor.getCommand('smartobject').enable();
            }
        });

        editor.addCommand('smartobject', new CKEDITOR.dialogCommand('smartobject', {
            startDisabled: 1
        }));

添加此代码后，该按钮最初处于禁用状态，并在 AJAX 调用完成后启用。到目前为止，一切都很好。过了一会儿，我尝试添加一个新的“智能对象”，但在完成对话框配置后，没有调用小部件“数据”功能。通过在编辑器中双击元素编辑已经存在的智能对象时，仍然有效..

我可能混合了不同的“代码样式”来添加按钮，但我找不到我的用例所需的修复程序..

任何想法如何解决这个问题？

Answer 1

似乎我的想法无法通过 ckeditor 小部件 API 实现，我结合了一些不打算结合的 API 逻辑..

现在我只是通过最初通过 CSS 隐藏小部件按钮并在 AJAX 调用成功后向按钮添加一个类来修复它：

.cke_button__createsmartobject {
  display: none !important;
}

.cke_button__createsmartobject.showButton {
  display: block !important;
}

还有JS逻辑：

editor.ui.addButton && editor.ui.addButton('CreateSmartobject', {
  label: lang.toolbar,
  command: 'smartobject',
  toolbar: 'insert,5',
  icon: 'smartobject'
});

// Enable the button if smartobjects are allowed for the itemtype of this editor.
editor.$smartobjectPluginPreloadAvailableSmartobjectsPromise.done(function(availableSmartobjects) {
    if (availableSmartobjects && availableSmartobjects.length > 0) {
        jQuery('.cke_button__createsmartobject').addClass('showButton');
    }
});

这不是我最引以为豪的解决方案，但它目前有效。