CKEditor 圖片置中（Center-Aligned Photo）

CKEditor 3.6 並沒有圖片置中的功能。

靠左對齊與靠右對齊分別是用 CSS 的 float: left 與 float: right 來實做，float 當然沒有 center 這個選項。

用 float 的好處在文繞圖，而置中對齊當然不需要文繞圖。

要讓圖片可以置中對齊，這邊想到幾個方法：

第一個是對 img 外層的 block 元件如 div 加上 maring: 0 auto，然後再對 div 設定寬度，就可以讓裡面的圖片置中對齊，麻煩的是要知道圖片的寬度。

<div style="width: xxxpx" margin: 0 auto">
<img .../>
</div>

第二個是對 img 外層的 block 元件如 div 加上 text-align: center，也可以讓裡面的圖片置中對齊，好處是不用管圖片的寬度，但如果既有結構中若外層元件不是 block 的話也無用。

<div style="text-align: center">
<img .../>
</div>

最後一個是將預設為 inline 的 img 改為 block，再加上 margin: 0 auto，若 img 本身有設寬度的話就行得通。

<img style="display: block; margin: 0 auto;" .../>

再來就是找到 CKEditor 處理圖片對齊的程式在哪，這大概是最難的，幸運的很快在網路上找到，就是 ckeditor_3.6.3\ckeditor\plugins\image\dialogs\image.js。

開起來後可以看到一堆像便秘一般的程式，先用 Eclipse 格式化一下，然後知道 CKEditor 是用 float 實做對齊，就先用 float 去找看看。

第一個反白處就是對齊的下拉選單，第二個反白就是設定 style 的地方。

修改程式如下：

  {
    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' ] ],
    onChange : function() {
      l(this.getDialog());
      o.call(this, 'advanced:txtdlgGenStyle');
    },
    setup : function(B, C) {
      if (B == d) {
var D = C.getStyle('float');
// 新增置中的判斷
var E = C.getStyle('display');
switch (D) {
case 'inherit':
case 'none':
 D = '';
}
// 表示目前為置中
if (E == 'block') {
 D = 'center';
}
!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) {
 if (E == 'center') {
// 置中時，加入 display 與 margin，並移除 float
   C.setStyle('display', 'block');
   C.setStyle('margin', '0 auto');
   C.removeStyle('float');
 } else {
// 靠左或靠右時，加入 float，並移除 display 與 margin
   C.setStyle('float', E);
   C.removeStyle('display');
   C.removeStyle('margin');
 }
} else {
 C.removeStyle('float');
 // 移除置中 style
 C.removeStyle('display');
 C.removeStyle('margin');
}
if (!D && B == d) {
 E = (C.getAttribute('align') || '').toLowerCase();
 switch (E) {
 case 'left':
 case 'right':
 case 'center': // 加入置中判斷
   C.removeAttribute('align');
 }
}
      } else if (B == g) {
C.removeStyle('float');
// 移除置中 style
C.removeStyle('display');
C.removeStyle('margin');
      }
    }
  }

收工。