3
在研究了至少十幾個關於ckeditor的圖像居中線程之後，我想發佈我用於我們公司應用程序之一的內容，並查看是否有其他極客有提示或改進建議。我發佈這個在stackoverflow，因爲這是我們大家去尋求幫助，我知道其他人正在研究這個相同的話題。ckeditor圖像對齊中心定製
我們的編輯器用於郵件模板，所以我想確保樣式屬性也被重新插入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文件的圖像插件/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％準確的，但我對你的想法很感興趣。到目前爲止，這工作得很好。
您想將圖像居中放在頁面上嗎？ – 2012-07-20 07:43:38
@NadavS。將圖像置於wysiwyg中的模板或內容中。 – 2012-07-22 20:52:40
@codewaggle我嘗試了各種方法，試圖讓我最難以改變主代碼。我喜歡當前圖像插件+我們使用的文件管理器http://labs.corefive.com/Projects/FileManager/如何與ck一起使用。在各種職位上挖了幾個小時之後，我覺得我沒有別的選擇，只能將其入侵。我也從我們內部的css專家那裏得知，我們目前所做的並不完美，我們的客戶的電子郵件閱讀器（例如谷歌或Outlook）測試成功。 – 2012-07-22 20:55:51