问题
After researching at least a dozen threads on image centering in regards to ckeditor I wanted to post what I am using for one of our company applications and see if any other geeks have tips or suggestions for improvement. I am posting this on stackoverflow because it's where we all go for help and I know others are researching this same topic.
Our editor is used for email templates so I wanted to make sure the style attributes are also reinserted into the img tag attributes:
<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">
In the ckeditor.js file at the very bottom of the file add the following code block. If you are using the uncompressed js file, just make sure you are at the very end of the file. I added a comment block to be sure.
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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);
Next open the image plug in js file /ckeditor/plugins/image/dialogs/image.js id: 'cmbAlign'. If you are using the compressed version you will have to uncompress it first. I recommend this utility http://tools.arantius.com/tabifier (type json) which has always worked very well for me. You will be editing the "cmbAlign" code block to match:
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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');
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
This is how I was able to reintegrate image centering. No it's not pretty and I am sure it's not 100% accurate, but I am interested in your thoughts. So far this works pretty well.
回答1:
Drupal has a module specially for solving this problem https://drupal.org/project/ckeditor_image All you have to do is to enable it It hijackes the image button, so i think if you don't want hack the ckeditor it's the best solution, i check the source code it contains a new image plugin to replace the one in core
来源：https://stackoverflow.com/questions/11551922/ckeditor-image-align-center-customization