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 调用完成后启用。到目前为止，一切都很好。过了一会儿，我尝试添加一个新的 'smartobject'，但是在完成对话框配置后，没有调用小部件 'data' 函数。当通过双击编辑器中的元素编辑一个已经存在的智能对象时，仍然有效..

我可能混淆了不同的 'code styles' 添加按钮，但我找不到我的用例所需的修复程序..

有什么解决办法吗？

Answer 1

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

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

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

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

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

Ckeditor initial disabled widget button state

javascript

ckeditor

ckeditor4.x