ckeditor编辑器 点击图片无法居中问题的解决

2014-04-01 17:25:00
sucheasy
转贴
6784
摘要:ckeditor编辑器有个很奇葩的问题 就是选中图片无法居中,经验证从4.1.1 到4.3.x 全系列均存在这个问题,想要图片居中必须选中图片所在行,但是这对某些刁钻的客户来说 太难接受了,找遍互联网,发现注意这个问题的人真的不太多.如易互联

ckeditor编辑器有个很奇葩的问题 就是选中图片无法居中,经验证从4.1.1 到4.3.x 全系列均存在这个问题,想要图片居中必须选中图片所在行,但是这对某些刁钻的客户来说 太难接受了,找遍互联网,发现注意这个问题的人真的不太多.如易互联

我把我的方法分享下,虽然不够细致 但是能客观的解决问题,如果谁有工匠精神 还望把修改大成的代码发给我一份

==================

1.针对源码版本

  修改"../ckeditor/plugins/image" 目录下的plugin.js ,找到 function setupAlignCommand( value ) 所在行开始 注意将核心内容 替换为下面所示:


function setupAlignCommand( value ) {
				var command = editor.getCommand( 'justify' + value );
				if ( command ) {
					if ( value == 'left' || value == 'right'|| value=='center' ) {
						command.on( 'exec', function( evt ) {
							var img = getSelectedImage( editor ),
								align;
							if ( img ) {
								align = getImageAlignment( img );
								if ( align == value ) {
									img.removeStyle( 'float' );
									img.removeStyle( 'margin-left' );
									img.removeStyle( 'margin-right' );
									img.removeStyle( 'display' );

									// Remove "align" attribute when necessary.
									if ( value == getImageAlignment( img ) )
										img.removeAttribute( 'align' );
									img.removeStyle( 'margin-left' );
									img.removeStyle( 'margin-right' );
									img.removeStyle( 'display' );

								}else if( value=='center'){
									img.removeStyle( 'float' );
									img.setStyle( 'margin-left', 'auto' );
									img.setStyle( 'margin-right', 'auto' );
									img.setStyle( 'display', 'block' );
								}else if(value!='center')
									img.setStyle( 'float', value );

								evt.cancel();
							}
						} );
					}     

2.针对压缩版

修改"../ckeditor/" 目录下的ckeditor.js ,找到 16846行开始的地方,(可以搜索 CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED   在其上端附近) 注意将核心内容 替换为下面所示:


  if ( c ) {
 g = f( c );
 if ( g == a ) {
 c.removeStyle( 'float' );
 c.removeStyle( 'margin-left' );
 c.removeStyle( 'margin-right' );
 c.removeStyle( 'display' );

 // Remove "align" attribute when necessary.
 if ( a == f( c ) ){
 c.removeAttribute( 'align' );
 c.removeStyle( 'margin-left' );
 c.removeStyle( 'margin-right' );
 c.removeStyle( 'display' );

 }}else if( a=='center'){
 c.removeStyle( 'float' );
 c.setStyle( 'margin-left', 'auto' );
 c.setStyle( 'margin-right', 'auto' );
 c.setStyle( 'display', 'block' );
 }else if(a!='center')
 c.setStyle( 'float', a );
 d.cancel();
 }
                        });
以上!具体针对4.1.1 和4.3.3 请各位知悉


文章分类
联系我们
联系人: 如易
Email: admin@sucheasy.com
QQ: 172787898
微信: sucheasy
地址: 北京市海淀区上地十街辉煌国际1号院1号楼20层