javascript - 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');
    }
});

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