Question

我目前正在开发一个Ckeditor 4小部件，但我遇到了以下问题。我希望我的widget按钮最初被禁用，直到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调用完成后启用。到现在为止还挺好。过了一会儿，我尝试添加一个新的“智能对象”，但在完成对话框配置后，小部件的数据＆＃39;函数未被调用。通过双击编辑器中的元素编辑现有的智能对象时，仍然可以正常工作..

我可能混淆了不同的代码风格＆＃39;添加按钮，但我无法找到我的用例所需的修复程序..

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

Answer 1

似乎我的想法是不可能通过ckeditor小部件API而且我结合了一些不打算合并的API逻辑。

现在我只是通过最初隐藏窗口小部件按钮来修复它，并在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');
    }
});

这不是我最自豪的解决方案，但它现在有效。

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

1 个答案: