链接对话框修改

Question

我试图添加一个下拉到CKEditor的链接对话框。当被选中时，下拉菜单应该为链接插入相应的类名。

CKEDITOR.on( 'dialogDefinition', function( ev ) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if ( dialogName == 'link' ) {
    var infoTab = dialogDefinition.getContents( 'info' );
    infoTab.add({
      type: 'select',
      label: 'Display link as a button',
      id: 'buttonType',
      'default': '',
      items: [
        ['- Not button -', ''],
        ['Button one', 'btn-primary'],
        ['Button two', 'btn-success'],
        ['Button three', 'btn-danger']
      ],
      commit: function(data) {
        data.className = this.getValue();
      }
    });
  }
});

我有一种感觉，提交函数没有做的工作，但不知道如何使其工作。我在http://www.lxg.de/code/simplify-ckeditors-link-dialog上看到了一段代码，它几乎和我想要的一样。我试过了，也不行。

我使用CKEditor 4.3.2.

提前感谢您的帮助。

Answer 1

如果您在链接对话框的onOk中console.log data对象，您将发现一个完全不同的层次结构。元素类在data.advanced.advCSSClasses中。但是，即使您决定在commit中覆盖(或扩展)此属性的值，您的字符串也将被advCSSClasses输入字段("高级"选项卡)的原始commit销毁。所以方法有点不同:

1. 始终将select的值存储在data中。
2. 覆盖advCSSClasses输入字段的commit，以考虑存储值。
3. 记住执行advCSSClasses输入的原始commit。

CKEDITOR.on( 'dialogDefinition', function( ev ) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if ( dialogName == 'link' ) {
    var infoTab = dialogDefinition.getContents( 'info' ),
        advTab =  dialogDefinition.getContents( 'advanced' ),
        advCSSClasses = advTab.get( 'advCSSClasses' );
    infoTab.add( {
      type: 'select',
      label: 'Display link as a button',
      id: 'buttonType',
      'default': '',
      items: [
        ['- Not button -', ''],
        ['Button one', 'btn-primary'],
        ['Button two', 'btn-success'],
        ['Button three', 'btn-danger']
      ],
      commit: function( data ) {
        data.buttonType = this.getValue();
      }
    });
    var orgAdvCSSClassesCommit = advCSSClasses.commit;
    advCSSClasses.commit = function( data ) {
        orgAdvCSSClassesCommit.apply( this, arguments );
        if ( data.buttonType && data.advanced.advCSSClasses.indexOf( data.buttonType ) == -1 )
            data.advanced.advCSSClasses += ' ' + data.buttonType;
    };
  }
});

现在你只需要写一个setup函数，它将检测你的一个按钮类是否存在，以便在对话框打开时设置一个合适的值