ckeditor图像对齐中心定制
在研究了关于ckeditor的图像居中的至少十几个主题后，我想发布我用于我们公司应用程序的内容，看看是否有其他极客有提示或改进建议。 我在stackoverflow上发布这个，因为它是我们都寻求帮助的地方，我知道其他人正在研究这个相同的主题。
我们的编辑器用于电子邮件模板，因此我想确保样式属性也重新插入到img标记属性中：
在文件最底部的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
. 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％准确，但我对你的想法感兴趣。 到目前为止，这非常有效。
Drupal有一个专门用于解决这个问题的模块https://drupal.org/project/ckeditor_image所有你需要做的就是启用它它劫持了图像按钮，所以我想如果你不想破解ckeditor它是最好的解决方案，我检查它包含一个新的图像插件的源代码，以替换核心中的插件