2012-06-20

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');

      }
    }
  }
收工。

沒有留言:

張貼留言