在研究了至少十几个关于 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 文件 /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% 准确的，但我对你的想法很感兴趣。到目前为止，这工作得很好。