ckeditor图像对齐中心定制 [英] ckeditor image align center customization
问题描述
在研究了至少十几个线程在图像中心对于ckeditor我想发布我正在使用我们的一个公司应用程序，看看是否有任何其他geeks有提示或改进建议。我发布在stackoverflow，因为它是我们都去帮助，我知道其他人正在研究这个相同的主题。
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.
我们的编辑器用于电子邮件模板，因此我想确保样式属性也重新插入到img标签属性中：
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">
在文件最底部的ckeditor.js文件中添加以下代码块。如果你使用未压缩的js文件，只要确保你在文件的最后。我添加了一个注释块，以确定。
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);
接下来打开图像插入js文件/ckeditor/plugins/image/dialogs/image.js id：'cmbAlign'。如果您使用的是压缩版本，您必须先解压缩它。我推荐此实用程序 http://tools.arantius.com/tabifier （输入json），它一直工作非常适合我。您将编辑cmbAlign代码块以匹配：
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');
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
这是我能够重新整合图像中心的方法。没有它不漂亮，我相信它不是100％准确，但我对你的想法感兴趣。到目前为止这个工作相当不错。
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.
推荐答案
Drupal有一个专门用于解决这个问题的模块
https://drupal.org/project/ckeditor_image
所有你需要做的是启用它
它劫持图像按钮，所以我想如果你不想黑客ckeditor它是最好的解决方案，我检查源代码它包含一个新的图像插件来替换核心中的一个
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
这篇关于ckeditor图像对齐中心定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
