在研究了至少一打关于ckeditor的图片居中的帖子之后，我想把我在公司的一个应用程序中使用的东西贴出来，看看是否有其他极客有什么改进的技巧或建议。我把这个贴在stackoverflow上是因为我们都在那里寻求帮助，我知道其他人也在研究这个主题。
我们的编辑器用于电子邮件模板，所以我想确保样式属性也被重新插入到img标签属性中：

<img align="left" alt="" height="169" src="http://local.app.com/includes/images/temp/cdn/events/2.png" style="width: 123px; height: 169px; float: left;" width="123">

在ckeditor.js文件的最底部添加以下代码块。如果您使用的是未压缩的js文件，请确保您位于文件的最末尾。我添加了一个注解块以确保这一点。

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function configureHtmlOutput( ev )
{
   var editor = ev.editor,
      dataProcessor = editor.dataProcessor,
      htmlFilter = dataProcessor && dataProcessor.htmlFilter;

   // Out self closing tags the HTML4 way, like <br>.
   dataProcessor.writer.selfClosingEnd = '>';

   // Make output formatting behave similar to FCKeditor
   var dtd = CKEDITOR.dtd;
   for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
   {
      dataProcessor.writer.setRules( e,
         {
            indent : true,
            breakBeforeOpen : true,
            breakAfterOpen : false,
            breakBeforeClose : !dtd[ e ][ '#' ], 
            breakAfterClose : true
         });
   }
   // Output properties as attributes, not styles.
   htmlFilter.addRules(
      {
         elements :
         {
            $ : function( element )
            {
               // Output dimensions of images as width and height
               if ( element.name == 'img' )
               {
                  var style = element.attributes.style;

                  if ( style )
                  {
                     // Get the width from the style.
                     var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                     width = match && match[1];

                     // Get the height from the style.
                     match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                     var height = match && match[1];

                     // Get the border from the style.
                     match = /(?:^|\s)border-width\s*:\s*(\d+)px/i.exec( style );
                     var border = match && match[1];

                     // Get the float from the style.
                     match = /(?:^|\s)float\s*:\s*(\D+);/i.exec( style );notSet
                     var float = match && match[1];

                     if ( width )
                     {
                        element.attributes.width = width;
                     }

                     if ( height )
                     {
                        element.attributes.height = height;
                     }

                     if ( border )
                     {
                        element.attributes.border = border;
                     }

                     if ( float )
                     {
                        element.attributes.align = float;
                     }
                  }
               }

               if ( !element.attributes.style )
                  delete element.attributes.style;

               return element;
            }
         }
      } );
}
CKEDITOR.on('instanceReady',configureHtmlOutput);

接下来打开js file/ckeditor/plugins/image/dialogs/image.js id: 'cmbAlign'中的图像插件。如果您使用的是压缩版本，则必须先解压缩它。我推荐使用http://tools.arantius.com/tabifier（类型json）实用程序，它一直非常适合我。您将编辑“cmbAlign”代码块以匹配：

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                  id: 'cmbAlign',
                  type: 'select',
                  widths: ['35%', '65%'],
                  style: 'width:90px',
                  label: b.lang.common.align,
                  'default': '',
                  items: [
                    [b.lang.common.notSet, ''],
                    [b.lang.common.alignLeft, 'left'],
                    [b.lang.common.alignRight, 'right'],
                    [b.lang.common.alignCenter, 'center']  //=> display: block; margin-left: auto; margin-right: auto;
                  ],
                  onChange: function () {
                    l(this.getDialog());
                    o.call(this, 'advanced:txtdlgGenStyle');
                  },
                  setup: function (B, C) {
                    if (B == d) {
                      var D = C.getStyle('float');
                      switch (D) {
                        case 'inherit':
                        case 'none':
                            D = '';
                      }!D && (D = (C.getAttribute('align') || '').toLowerCase());
                      this.setValue(D);
                    }
                  },
                  commit: function (B, C, D) {
                    var E = this.getValue();
                    if (B == d || B == f) {
                      if (E) {
                            switch (E) {
                            case 'left': 
                                C.setStyle('float', E);
                                break;
                            case 'right': 
                                C.setStyle('float', E);
                                break;
                            case 'center': 
                                C.setStyle('display','block');
                                C.setStyle('margin-left','auto');
                                C.setStyle('margin-right','auto');
                                break;
                            default: 
                                C.setStyle('float', E);
                          }
                      }
                      else {
                        C.removeStyle('float');
                        C.removeStyle('display');
                        C.removeStyle('margin-right');
                        C.removeStyle('margin-left');
                      }
                      if (!D && B == d) {
                        E = (C.getAttribute('align') || '').toLowerCase();
                        console.log(E);
                        switch (E) {
                            case 'left': 
                                break;
                            case 'right': 
                                break;
                            case 'center': 
                            break;
                          default: 
                            C.removeAttribute('align'); 
                        }
                      }
                    } else if (B == g){
                        C.removeStyle('float');
                        C.removeStyle('display');
                        C.removeStyle('margin-right');
                        C.removeStyle('margin-left');
                    }
                  }
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这就是我如何能够重新整合图像居中。不，它不漂亮，我敢肯定，它不是100%准确，但我感兴趣的是你的想法。到目前为止，这工作得很好。