动态更改ckeditor对话框

时间:2017-05-19 19:25:19

标签: javascript jquery modal-dialog ckeditor

我正在尝试根据另一个字段修改对话框字段的内容。我尝试了replace方法,但是我抛出了这个错误:The editor instance "edit-body-und-0-value" is already attached to the provided element. 基本目标是向表中添加一个类。使用表格对话框,我想我是否可以填写advCSSClassess默认值,然后替换编辑器,我现在有一个附加类的对话框。

这是我的插件代码:

CKEDITOR.on('dialogDefinition', function( ev ) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if ( dialogName === 'table' ) {
        var tableProperties = dialogDefinition.getContents( 'info' );
        var advancedTab = dialogDefinition.getContents( 'advanced' );
        var classField = advancedTab.get( 'advCSSClasses' );
        classField['default'] = 'stackable';
        tableProperties.add({
            type: 'checkbox',
            id: 'stackTable',
            label: 'Make table responsive',
            'default': false,
            onClick: function( button ) {        
                classField[ 'default' ] = 'stackable';
                var thisEditor = CKEDITOR.instances;
                CKEDITOR.replace('edit-body-und-0-value', thisEditor);
            }

        });

    }
});

我已经能够在点击处理程序中以这样的方式破解它,但这似乎不可持续。:

var classInput = $("label:contains('Stylesheet Classes')").attr('for');
$('#' + classInput).val('stackable');

我已使用thisthis作为参考。

1 个答案:

答案 0 :(得分:0)

由于这个问题得到了新的要求,所以这是我最终得到的代码。这已经够老了,我不记得细节了,但是我希望这会有所帮助。

CKEDITOR.on('dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName === 'table' ) {
  var tableProperties = dialogDefinition.getContents( 'info' );
  tableProperties.add({
    type: 'checkbox',
    id: 'stackTable',
    label: 'Make table stackable on mobile. Does not work with header row.',
    'default': false,
    onClick: function( button ) {
      var classInput = CKEDITOR.dialog.getCurrent().getContentElement('advanced', 'advCSSClasses').getElement().$;
      $('#' + classInput.id).find('input').val('sy-stacktable');
    }
  });
}
});