CKEditor图片编辑时，移除掉宽、高、ALT、预览等高级属性

Question

定制CKEditor的时候，会发现CK默认的图片编辑插件有一大堆自定义属性，比如宽、高、预览还有图片是否加链接的设置，但是这些对于整个网站的UI样式来说，无疑是巨大的危害。

那么移除它们很简单，根据CKEditor提供的自定义参数设置如下

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName == 'image') {
    //移除高级选项、链接选项
  	dialogDefinition.removeContents( 'advanced' );
    dialogDefinition.removeContents( 'Link' );
    // 定义对象
    var infoTab = dialogDefinition.getContents('info');
    //移除其它杂项
    infoTab.remove('browse');
    infoTab.remove('txtHSpace');
    infoTab.remove('txtVSpace');
    infoTab.remove('txtBorder');
    infoTab.remove('txtAlt');
    infoTab.remove('txtWidth');
    infoTab.remove('txtHeight');
    infoTab.remove('cmbAlign');
    infoTab.remove('ratioLock');
    infoTab.get( 'htmlPreview' ).style = 'display:none';
}

关于图片预览的配置，默认也可以使用infoTab.remove('htmlPreview');，但是这样操作会有报错，只好把它用样式隐藏了。

Answer 1

在非Q2A配置的编辑器还需要再配置name名对应关系，全部代码应该：

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName == 'image') {
    //移除高级选项、链接选项
  	dialogDefinition.removeContents( 'advanced' );
    dialogDefinition.removeContents( 'Link' );
    // 定义对象
    var infoTab = dialogDefinition.getContents('info');
    //移除其它杂项
    infoTab.remove('browse');
    infoTab.remove('txtHSpace');
    infoTab.remove('txtVSpace');
    infoTab.remove('txtBorder');
    infoTab.remove('txtAlt');
    infoTab.remove('txtWidth');
    infoTab.remove('txtHeight');
    infoTab.remove('cmbAlign');
    infoTab.remove('ratioLock');
    infoTab.get( 'htmlPreview' ).style = 'display:none';
}

// Add by unkown
CKEDITOR.replace( 'editor1' );

更多配置参考资料：http://stackoverflow.com/questions/18133800/how-do-i-customize-a-ckeditor-4-2-builtin-plugin-like-links/18142374#18142374

Answer 2

期待开源定制版编辑器！！！