ckeditor に関する画像センタリングに関するスレッドを少なくとも 12 件調査した後、会社のアプリケーションの 1 つに使用しているものを投稿し、他のオタクが改善のためのヒントや提案を持っているかどうかを確認したいと思いました。私はこれを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 (type 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% 正確ではないと確信していますが、あなたの考えに興味があります. これまでのところ、これはかなりうまく機能しています。