在CKEditor

时间:2017-01-26 15:15:47

标签: javascript button dialog ckeditor

我尝试使用Dialog UI元素为CKEditor(版本4.x)编写插件。

对话框的定义如下:

CKEDITOR.dialog.add('abbrDialog', function(editor) {
return {
    title: editor.lang.abbr.title,
    label: editor.lang.abbr.title,
    minWidth: 400,
    minHeight: 200,

    contents: [{
            id: 'abbreviation-dialog',
            label: editor.lang.abbr.label,
            elements: [
              {
                id: 'abbreviation-found-label',
                type: 'html',
                label: editor.lang.abbr.found,
                html: '<span id="foundLabelId">'+ editor.lang.abbr.found + '<\/span>'
              },
              {
                id: 'abbreviation-current-item',
                type: 'html',
                label: editor.lang.abbr.currentLabel,
                html: '<span id="currentLabelId">'+ editor.lang.abbr.currentLabel + '<\/span>'
              },
              {
                id: 'abbreviation-replace-button',
                type: 'checkbox',
                label: editor.lang.abbr.replaceButton,
                onClick : function() {
                  replaceAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
                }
              },
              {
                id: 'abbreviation-next-button',
                type: 'button',
                label: editor.lang.abbr.nextButton,
                onClick : function() {
                  nextAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
                }
              },
              {
                id: 'abbreviation-all-button',
                type: 'button',
                label: editor.lang.abbr.allButton,
                onClick : function() {
                  replaceAllAbbreviations(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
                  //alert('Replace all!!');
                }
              }]
        }],

    buttons: [CKEDITOR.dialog.okButton],

    onShow: function() {
      initDialog(editor.lang.abbr.found, editor.lang.abbr.currentLabel);
    },

    onOk: function() {
      // nothing to do
    }

在一个功能中,我尝试禁用按钮。这看起来像:

CKEDITOR.dialog.getCurrent().getContentElement("abbreviation-dialog", "abbreviation-replace-button").disable();

不幸的是,这个按钮没有被禁用(但是添加了额外的CSS类cke_disabled)。

同样奇怪:如果我将abbreviation-replace-button变成一个复选框,则此复选框将被禁用(不再进行任何代码修改)。

我的问题:

  • 如何在插件对话框中禁用按钮?
  • 为什么禁用复选框但按钮没有?
  • 我的错误在哪里?

1 个答案:

答案 0 :(得分:0)

我认为您需要调用一种特殊方法来禁用按钮, 即`disableButton('btn')

您可以按照以下方式停用okcancel按钮

CKEDITOR.dialog.getCurrent().disableButton('ok')
CKEDITOR.dialog.getCurrent().disableButton('cancel')

在您的情况下,您可以尝试

CKEDITOR.dialog.getCurrent().disableButton('abbreviation-next-button')