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

如果您console.log链接对话框data中的onOk对象，您将找到完全不同的层次结构。元素类位于data.advanced.advCSSClasses中。但即使您决定在commit中覆盖（或扩展）此属性的值，您的字符串也会被commit advCSSClasses输入字段的原始data所取代（＆＃34;无论如何，高级＆＃34;标签。所以这种方法有点不同：

始终将选择的值存储在commit。
覆盖advCSSClasses输入字段commit以考虑存储值。
请务必执行原始advCSSClasses 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

现在你只需编写一个{{1}}函数，它将检测一个按钮类是否存在，以便在对话框打开后设置选择字段的正确值。

CKEditor链接对话框修改

1 个答案: