Начальное отключенное состояние кнопки виджета Ckeditor

В настоящее время я разрабатываю виджет 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. Все идет нормально. Через некоторое время я попытался добавить новый «умный объект», но после завершения настройки диалога функция «данные» виджетов не вызывается. При редактировании уже существующего смарт-объекта двойным щелчком элемента в редакторе все еще работает.

Я, вероятно, перепутал разные «стили кода» для добавления кнопки, но я не могу найти исправление, которое мне нужно для моего варианта использования.

Любые идеи, как это исправить?


javascript ckeditor ckeditor4.x
person NickGreen    schedule 03.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Казалось, что моя идея невозможна через API виджета ckeditor, и я объединил некоторую логику 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');
    }
});

Это не то решение, которым я больше всего горжусь, но пока оно работает.

person NickGreen    schedule 07.06.2016
comment
Что ж, ваше решение может не удовлетворять, но оно быстрое, простое, понятное и эффективное. В корне это также настолько очевидно (display:none;), что мне почти стыдно признаться, что я не подумал об этом, пытаясь сделать что-то не слишком отличающееся от значка плагина, и что вы сэкономили мне много времени. . +1 - person Nick Rice; 11.11.2016