Skip to content Skip to sidebar Skip to footer
Home / Alignment / Ckeditor / Css Float / Javascript / Php

Ckeditor Align Images Instead Of Float

Post a Comment
All, I'm very successfully using CKEditor in my app that allows clients to build and send HTML Emails. There's just one hitch--CK uses style='float:left' for images, while Outlook

Solution 1:

Here is an alternative... I found that did the width/height just changed to add the align as well. 

CKEDITOR.on('instanceReady', function (ev) {
    // Ends self closing tags the HTML4 way, like <br>.
    ev.editor.dataProcessor.htmlFilter.addRules(
        {
            elements:
            {
                $: function (element) {
                    // Output dimensions of images as width and heightif (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 align from the stylevar match = /(?:^|\s)float\s*:\s*(left|right)/i.exec(style),
                            align = match && match[1];

                            if (width) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                                element.attributes.width = width;
                            }

                            if (height) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                                element.attributes.height = height;
                            }

                            if (align) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(left|right);?/i, '');
                                element.attributes.align = align;
                            }
                        }
                    }



                    if (!element.attributes.style)
                        delete element.attributes.style;

                    return element;
                }
            }
        });
    });

Solution 2:

Absent any really spot-on answers, I did my own research. The only correct way to solve this issue is to update the plugins/image/dialogs/image.js file with the following code that prioritizes html entities over that of CSS. The solution makes a WYSIWYG editor that's near perfect for Email editor applications, and also the only solution I've found that 100% eliminates the issue of drag-and-drop from Microsoft creating HORRIBLE extra markup.

(function(){var imageDialog=function(editor,dialogType){var IMAGE=1,LINK=2,PREVIEW=4,CLEANUP=8,regexGetSize=/^\s*(\d+)((px)|\%)?\s*$/i,regexGetSizeOrEmpty=/(^\s*(\d+)((px)|\%)?\s*$)|^$/i,pxLengthRegex=/^\d+px$/;var onSizeChange=function(){var value=this.getValue(),dialog=this.getDialog(),aMatch=value.match(regexGetSize);if(aMatch){if(aMatch[2]=='%')switchLockRatio(dialog,false);value=aMatch[1]}if(dialog.lockRatio){var oImageOriginal=dialog.originalElement;if(oImageOriginal.getCustomData('isReady')=='true'){if(this.id=='txtHeight'){if(value&&value!='0')value=Math.round(oImageOriginal.$.width*(value/oImageOriginal.$.height));if(!isNaN(value))dialog.setValueOf('info','txtWidth',value)}else{if(value&&value!='0')value=Math.round(oImageOriginal.$.height*(value/oImageOriginal.$.width));if(!isNaN(value))dialog.setValueOf('info','txtHeight',value)}}}updatePreview(dialog)};var updatePreview=function(dialog){if(!dialog.originalElement||!dialog.preview)return1;dialog.commitContent(PREVIEW,dialog.preview);return0};function commitContent(){var args=arguments;var inlineStyleField=this.getContentElement('advanced','txtdlgGenStyle');inlineStyleField&&inlineStyleField.commit.apply(inlineStyleField,args);this.foreach(function(widget){if(widget.commit&&widget.id!='txtdlgGenStyle')widget.commit.apply(widget,args)})}var incommit;function commitInternally(targetFields){if(incommit)return;incommit=1;var dialog=this.getDialog(),element=dialog.imageElement;if(element){this.commit(IMAGE,element);targetFields=[].concat(targetFields);var length=targetFields.length,field;for(var i=0;i<length;i++){field=dialog.getContentElement.apply(dialog,targetFields[i].split(':'));field&&field.setup(IMAGE,element)}}incommit=0}var switchLockRatio=function(dialog,value){var oImageOriginal=dialog.originalElement;if(!oImageOriginal)returnnull;var ratioButton=CKEDITOR.document.getById(btnLockSizesId);if(oImageOriginal.getCustomData('isReady')=='true'){if(value=='check'){var width=dialog.getValueOf('info','txtWidth'),height=dialog.getValueOf('info','txtHeight'),originalRatio=oImageOriginal.$.width*1000/oImageOriginal.$.height,thisRatio=width*1000/height;dialog.lockRatio=false;if(!width&&!height)dialog.lockRatio=true;elseif(!isNaN(originalRatio)&&!isNaN(thisRatio)){if(Math.round(originalRatio)==Math.round(thisRatio))dialog.lockRatio=true}}elseif(value!=undefined)dialog.lockRatio=value;else dialog.lockRatio=!dialog.lockRatio}elseif(value!='check')dialog.lockRatio=false;if(dialog.lockRatio)ratioButton.removeClass('cke_btn_unlocked');else ratioButton.addClass('cke_btn_unlocked');var lang=dialog._.editor.lang.image,label=lang[dialog.lockRatio?'unlockRatio':'lockRatio'];ratioButton.setAttribute('title',label);ratioButton.getFirst().setText(label);return dialog.lockRatio};var resetSize=function(dialog){var oImageOriginal=dialog.originalElement;if(oImageOriginal.getCustomData('isReady')=='true'){dialog.setValueOf('info','txtWidth',oImageOriginal.$.width);dialog.setValueOf('info','txtHeight',oImageOriginal.$.height)}updatePreview(dialog)};var setupDimension=function(type,element){if(type!=IMAGE)return;function checkDimension(size,defaultValue){var aMatch=size.match(regexGetSize);if(aMatch){if(aMatch[2]=='%'){aMatch[1]+='%';switchLockRatio(dialog,false)}return aMatch[1]}return defaultValue}var dialog=this.getDialog(),value='',dimension=((this.id=='txtWidth')?'width':'height'),size=element.getAttribute(dimension);if(size)value=checkDimension(size,value);value=checkDimension(element.getStyle(dimension),value);this.setValue(value)};var previewPreloader;var onImgLoadEvent=function(){var original=this.originalElement;original.setCustomData('isReady','true');original.removeListener('load',onImgLoadEvent);original.removeListener('error',onImgLoadErrorEvent);original.removeListener('abort',onImgLoadErrorEvent);CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display','none');if(!this.dontResetSize)resetSize(this);if(this.firstLoad)CKEDITOR.tools.setTimeout(function(){switchLockRatio(this,'check')},0,this);this.firstLoad=false;this.dontResetSize=false};var onImgLoadErrorEvent=function(){var original=this.originalElement;original.removeListener('load',onImgLoadEvent);original.removeListener('error',onImgLoadErrorEvent);original.removeListener('abort',onImgLoadErrorEvent);var noimage=CKEDITOR.getUrl(editor.skinPath+'images/noimage.png');if(this.preview)this.preview.setAttribute('src',noimage);CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display','none');switchLockRatio(this,false)};var numbering=function(id){return id+CKEDITOR.tools.getNextNumber()},btnLockSizesId=numbering('btnLockSizes'),btnResetSizeId=numbering('btnResetSize'),imagePreviewLoaderId=numbering('ImagePreviewLoader'),imagePreviewBoxId=numbering('ImagePreviewBox'),previewLinkId=numbering('previewLink'),previewImageId=numbering('previewImage');return{title:(dialogType=='image')?editor.lang.image.title:editor.lang.image.titleButton,minWidth:420,minHeight:310,onShow:function(){this.imageElement=false;this.linkElement=false;this.imageEditMode=false;this.linkEditMode=false;this.lockRatio=true;this.dontResetSize=false;this.firstLoad=true;this.addLink=false;var editor=this.getParentEditor(),sel=this.getParentEditor().getSelection(),element=sel.getSelectedElement(),link=element&&element.getAscendant('a');CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display','none');previewPreloader=new CKEDITOR.dom.element('img',editor.document);this.preview=CKEDITOR.document.getById(previewImageId);this.originalElement=editor.document.createElement('img');this.originalElement.setAttribute('alt','');this.originalElement.setCustomData('isReady','false');if(link){this.linkElement=link;this.linkEditMode=true;var linkChildren=link.getChildren();if(linkChildren.count()==1){var childTagName=linkChildren.getItem(0).getName();if(childTagName=='img'||childTagName=='input'){this.imageElement=linkChildren.getItem(0);if(this.imageElement.getName()=='img')this.imageEditMode='img';elseif(this.imageElement.getName()=='input')this.imageEditMode='input'}}if(dialogType=='image')this.setupContent(LINK,link)}if(element&&element.getName()=='img'&&!element.getAttribute('_cke_realelement')||element&&element.getName()=='input'&&element.getAttribute('type')=='image'){this.imageEditMode=element.getName();this.imageElement=element}if(this.imageEditMode){this.cleanImageElement=this.imageElement;this.imageElement=this.cleanImageElement.clone(true,true);this.setupContent(IMAGE,this.imageElement);switchLockRatio(this,true)}elsethis.imageElement=editor.document.createElement('img');if(!CKEDITOR.tools.trim(this.getValueOf('info','txtUrl'))){this.preview.removeAttribute('src');this.preview.setStyle('display','none')}},onOk:function(){if(this.imageEditMode){var imgTagName=this.imageEditMode;if(dialogType=='image'&&imgTagName=='input'&&confirm(editor.lang.image.button2Img)){imgTagName='img';this.imageElement=editor.document.createElement('img');this.imageElement.setAttribute('alt','');editor.insertElement(this.imageElement)}elseif(dialogType!='image'&&imgTagName=='img'&&confirm(editor.lang.image.img2Button)){imgTagName='input';this.imageElement=editor.document.createElement('input');this.imageElement.setAttributes({type:'image',alt:''});editor.insertElement(this.imageElement)}else{this.imageElement=this.cleanImageElement;delete this.cleanImageElement}}else{if(dialogType=='image')this.imageElement=editor.document.createElement('img');else{this.imageElement=editor.document.createElement('input');this.imageElement.setAttribute('type','image')}this.imageElement.setAttribute('alt','')}if(!this.linkEditMode)this.linkElement=editor.document.createElement('a');this.commitContent(IMAGE,this.imageElement);this.commitContent(LINK,this.linkElement);if(!this.imageElement.getAttribute('style'))this.imageElement.removeAttribute('style');if(!this.imageEditMode){if(this.addLink){if(!this.linkEditMode){editor.insertElement(this.linkElement);this.linkElement.append(this.imageElement,false)}else editor.insertElement(this.imageElement)}else editor.insertElement(this.imageElement)}else{if(!this.linkEditMode&&this.addLink){editor.insertElement(this.linkElement);this.imageElement.appendTo(this.linkElement)}elseif(this.linkEditMode&&!this.addLink){editor.getSelection().selectElement(this.linkElement);editor.insertElement(this.imageElement)}}},onLoad:function(){if(dialogType!='image')this.hidePage('Link');var doc=this._.element.getDocument();this.addFocusable(doc.getById(btnResetSizeId),5);this.addFocusable(doc.getById(btnLockSizesId),5);this.commitContent=commitContent},onHide:function(){if(this.preview)this.commitContent(CLEANUP,this.preview);if(this.originalElement){this.originalElement.removeListener('load',onImgLoadEvent);this.originalElement.removeListener('error',onImgLoadErrorEvent);this.originalElement.removeListener('abort',onImgLoadErrorEvent);this.originalElement.remove();this.originalElement=false}delete this.imageElement},contents:[{id:'info',label:editor.lang.image.infoTab,accessKey:'I',elements:[{type:'vbox',padding:0,children:[{type:'hbox',widths:['280px','110px'],align:'right',children:[{id:'txtUrl',type:'text',label:editor.lang.common.url,required:true,onChange:function(){var dialog=this.getDialog(),newUrl=this.getValue();if(newUrl.length>0){dialog=this.getDialog();var original=dialog.originalElement;dialog.preview.removeStyle('display');original.setCustomData('isReady','false');var loader=CKEDITOR.document.getById(imagePreviewLoaderId);if(loader)loader.setStyle('display','');original.on('load',onImgLoadEvent,dialog);original.on('error',onImgLoadErrorEvent,dialog);original.on('abort',onImgLoadErrorEvent,dialog);original.setAttribute('src',newUrl);previewPreloader.setAttribute('src',newUrl);dialog.preview.setAttribute('src',previewPreloader.$.src);updatePreview(dialog)}elseif(dialog.preview){dialog.preview.removeAttribute('src');dialog.preview.setStyle('display','none')}},setup:function(type,element){if(type==IMAGE){var url=element.getAttribute('_cke_saved_src')||element.getAttribute('src');var field=this;this.getDialog().dontResetSize=true;field.setValue(url);field.setInitValue();field.focus()}},commit:function(type,element){if(type==IMAGE&&(this.getValue()||this.isChanged())){element.setAttribute('_cke_saved_src',decodeURI(this.getValue()));element.setAttribute('src',decodeURI(this.getValue()))}elseif(type==CLEANUP){element.setAttribute('src','');element.removeAttribute('src')}},validate:CKEDITOR.dialog.validate.notEmpty(editor.lang.image.urlMissing)},{type:'button',id:'browse',style:'display:inline-block;margin-top:10px;',align:'center',label:editor.lang.common.browseServer,hidden:true,filebrowser:'info:txtUrl'}]}]},{id:'txtAlt',type:'text',label:editor.lang.image.alt,accessKey:'A','default':'',onChange:function(){updatePreview(this.getDialog())},setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('alt'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('alt',this.getValue())}elseif(type==PREVIEW){element.setAttribute('alt',this.getValue())}elseif(type==CLEANUP){element.removeAttribute('alt')}}},{type:'hbox',widths:['140px','240px'],children:[{type:'vbox',padding:10,children:[{type:'hbox',widths:['70%','30%'],children:[{type:'vbox',padding:1,children:[{type:'text',width:'40px',id:'txtWidth',labelLayout:'horizontal',label:editor.lang.image.width,onKeyUp:onSizeChange,onChange:function(){commitInternally.call(this,'advanced:txtdlgGenStyle')},validate:function(){var aMatch=this.getValue().match(regexGetSizeOrEmpty);if(!aMatch)alert(editor.lang.image.validateWidth);return!!aMatch},setup:setupDimension,commit:function(type,element,internalCommit){var value=this.getValue();if(type==IMAGE){if(value)element.setAttribute('width',value);elseif(!value&&this.isChanged())element.removeStyle('width');!internalCommit&&element.removeStyle('width')}elseif(type==PREVIEW){var aMatch=value.match(regexGetSize);if(!aMatch){var oImageOriginal=this.getDialog().originalElement;if(oImageOriginal.getCustomData('isReady')=='true')element.setStyle('width',oImageOriginal.$.width+'px')}else element.setStyle('width',value+'px')}elseif(type==CLEANUP){element.removeAttribute('width');element.removeStyle('width')}}},{type:'text',id:'txtHeight',width:'40px',labelLayout:'horizontal',label:editor.lang.image.height,onKeyUp:onSizeChange,onChange:function(){commitInternally.call(this,'advanced:txtdlgGenStyle')},validate:function(){var aMatch=this.getValue().match(regexGetSizeOrEmpty);if(!aMatch)alert(editor.lang.image.validateHeight);return!!aMatch},setup:setupDimension,commit:function(type,element,internalCommit){var value=this.getValue();if(type==IMAGE){if(value)element.setAttribute('height',value);elseif(!value&&this.isChanged())element.removeStyle('height');!internalCommit&&element.removeStyle('height')}elseif(type==PREVIEW){var aMatch=value.match(regexGetSize);if(!aMatch){var oImageOriginal=this.getDialog().originalElement;if(oImageOriginal.getCustomData('isReady')=='true')element.setStyle('height',oImageOriginal.$.height+'px')}else element.setStyle('height',value+'px')}elseif(type==CLEANUP){element.removeAttribute('height');element.removeStyle('height')}}}]},{type:'html',style:'margin-top:10px;width:40px;height:40px;',onLoad:function(){var resetButton=CKEDITOR.document.getById(btnResetSizeId),ratioButton=CKEDITOR.document.getById(btnLockSizesId);if(resetButton){resetButton.on('click',function(evt){resetSize(this);evt.data.preventDefault()},this.getDialog());resetButton.on('mouseover',function(){this.addClass('cke_btn_over')},resetButton);resetButton.on('mouseout',function(){this.removeClass('cke_btn_over')},resetButton)}if(ratioButton){ratioButton.on('click',function(evt){var locked=switchLockRatio(this),oImageOriginal=this.originalElement,width=this.getValueOf('info','txtWidth');if(oImageOriginal.getCustomData('isReady')=='true'&&width){var height=oImageOriginal.$.height/oImageOriginal.$.width*width;if(!isNaN(height)){this.setValueOf('info','txtHeight',Math.round(height));updatePreview(this)}}evt.data.preventDefault()},this.getDialog());ratioButton.on('mouseover',function(){this.addClass('cke_btn_over')},ratioButton);ratioButton.on('mouseout',function(){this.removeClass('cke_btn_over')},ratioButton)}},html:'<div>'+'<a href="javascript:void(0)" tabindex="-1" title="'+editor.lang.image.unlockRatio+'" class="cke_btn_locked" id="'+btnLockSizesId+'" role="button"><span class="cke_label">'+editor.lang.image.unlockRatio+'</span></a>'+'<a href="javascript:void(0)" tabindex="-1" title="'+editor.lang.image.resetSize+'" class="cke_btn_reset" id="'+btnResetSizeId+'" role="button"><span class="cke_label">'+editor.lang.image.resetSize+'</span></a>'+'</div>'}]},{type:'vbox',padding:1,children:[{type:'text',id:'txtBorder',width:'60px',labelLayout:'horizontal',label:editor.lang.image.border,'default':'',onKeyUp:function(){updatePreview(this.getDialog())},onChange:function(){commitInternally.call(this,'advanced:txtdlgGenStyle')},validate:CKEDITOR.dialog.validate.integer(editor.lang.image.validateBorder),setup:function(type,element){if(type==IMAGE){var value,borderStyle=element.getStyle('border-width');borderStyle=borderStyle&&borderStyle.match(/^(\d+px)(?: \1 \1 \1)?$/);value=borderStyle&&parseInt(borderStyle[1],10);isNaN(parseInt(value,10))&&(value=element.getAttribute('border'));this.setValue(value)}},commit:function(type,element,internalCommit){var value=parseInt(this.getValue(),10);if(type==IMAGE||type==PREVIEW){if(!isNaN(value)){element.setStyle('border-width',CKEDITOR.tools.cssLength(value));element.setStyle('border-style','solid')}elseif(!value&&this.isChanged()){element.removeStyle('border-width');element.removeStyle('border-style');element.removeStyle('border-color')}if(!internalCommit&&type==IMAGE)element.removeAttribute('border')}elseif(type==CLEANUP){element.removeAttribute('border');element.removeStyle('border-width');element.removeStyle('border-style');element.removeStyle('border-color')}}},{type:'text',id:'txtHSpace',width:'60px',labelLayout:'horizontal',label:editor.lang.image.hSpace,'default':'',onKeyUp:function(){updatePreview(this.getDialog())},onChange:function(){commitInternally.call(this,'advanced:txtdlgGenStyle')},validate:CKEDITOR.dialog.validate.integer(editor.lang.image.validateHSpace),setup:function(type,element){if(type==IMAGE){var value,marginLeftPx,marginRightPx,marginLeftStyle=element.getStyle('margin-left'),marginRightStyle=element.getStyle('margin-right');marginLeftStyle=marginLeftStyle&&marginLeftStyle.match(pxLengthRegex);marginRightStyle=marginRightStyle&&marginRightStyle.match(pxLengthRegex);marginLeftPx=parseInt(marginLeftStyle,10);marginRightPx=parseInt(marginRightStyle,10);value=(marginLeftPx==marginRightPx)&&marginLeftPx;isNaN(parseInt(value,10))&&(value=element.getAttribute('hspace'));this.setValue(value)}},commit:function(type,element,internalCommit){var value=parseInt(this.getValue(),10);if(type==IMAGE||type==PREVIEW){if(!isNaN(value)){element.setStyle('margin-left',CKEDITOR.tools.cssLength(value));element.setStyle('margin-right',CKEDITOR.tools.cssLength(value))}elseif(!value&&this.isChanged()){element.removeStyle('margin-left');element.removeStyle('margin-right')}if(!internalCommit&&type==IMAGE)element.removeAttribute('hspace')}elseif(type==CLEANUP){element.removeAttribute('hspace');element.removeStyle('margin-left');element.removeStyle('margin-right')}}},{type:'text',id:'txtVSpace',width:'60px',labelLayout:'horizontal',label:editor.lang.image.vSpace,'default':'',onKeyUp:function(){updatePreview(this.getDialog())},onChange:function(){commitInternally.call(this,'advanced:txtdlgGenStyle')},validate:CKEDITOR.dialog.validate.integer(editor.lang.image.validateVSpace),setup:function(type,element){if(type==IMAGE){var value,marginTopPx,marginBottomPx,marginTopStyle=element.getStyle('margin-top'),marginBottomStyle=element.getStyle('margin-bottom');marginTopStyle=marginTopStyle&&marginTopStyle.match(pxLengthRegex);marginBottomStyle=marginBottomStyle&&marginBottomStyle.match(pxLengthRegex);marginTopPx=parseInt(marginTopStyle,10);marginBottomPx=parseInt(marginBottomStyle,10);value=(marginTopPx==marginBottomPx)&&marginTopPx;isNaN(parseInt(value,10))&&(value=element.getAttribute('vspace'));this.setValue(value)}},commit:function(type,element,internalCommit){var value=parseInt(this.getValue(),10);if(type==IMAGE||type==PREVIEW){if(!isNaN(value)){element.setStyle('margin-top',CKEDITOR.tools.cssLength(value));element.setStyle('margin-bottom',CKEDITOR.tools.cssLength(value))}elseif(!value&&this.isChanged()){element.removeStyle('margin-top');element.removeStyle('margin-bottom')}if(!internalCommit&&type==IMAGE)element.removeAttribute('vspace')}elseif(type==CLEANUP){element.removeAttribute('vspace');element.removeStyle('margin-top');element.removeStyle('margin-bottom')}}},{id:'cmbAlign',type:'select',labelLayout:'horizontal',widths:['35%','65%'],style:'width:90px',label:editor.lang.image.align,'default':'',items:[[editor.lang.common.notSet,''],[editor.lang.image.alignLeft,'left'],[editor.lang.image.alignRight,'right']],onChange:function(){updatePreview(this.getDialog());commitInternally.call(this,'advanced:txtdlgGenStyle')},setup:function(type,element){if(type==IMAGE){var value=element.getStyle('float');switch(value){case'inherit':case'none':value=''}!value&&(value=(element.getAttribute('align')||'').toLowerCase());this.setValue(value)}},commit:function(type,element,internalCommit){var value=this.getValue();if(type==IMAGE||type==PREVIEW){if(value)element.setAttribute('align',value);else element.removeAttribute('align');!internalCommit&&element.removeStyle('float')}elseif(type==CLEANUP)element.removeAttribute('align')}}]}]},{type:'vbox',height:'250px',children:[{type:'html',style:'width:95%;',html:'<div>'+CKEDITOR.tools.htmlEncode(editor.lang.common.preview)+'<br>'+'<div id="'+imagePreviewLoaderId+'" class="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+'<div id="'+imagePreviewBoxId+'" class="ImagePreviewBox"><table><tr><td>'+'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="'+previewLinkId+'">'+'<img id="'+previewImageId+'" alt="" /></a>'+(editor.config.image_previewText||'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.')+'</td></tr></table></div></div>'}]}]}]},{id:'Link',label:editor.lang.link.title,padding:0,elements:[{id:'txtUrl',type:'text',label:editor.lang.common.url,style:'width: 100%','default':'',setup:function(type,element){if(type==LINK){var href=element.getAttribute('_cke_saved_href');if(!href)href=element.getAttribute('href');this.setValue(href)}},commit:function(type,element){if(type==LINK){if(this.getValue()||this.isChanged()){element.setAttribute('_cke_saved_href',decodeURI(this.getValue()));element.setAttribute('href','javascript:void(0)/*'+CKEDITOR.tools.getNextNumber()+'*/');if(this.getValue()||!editor.config.image_removeLinkByEmptyURL)this.getDialog().addLink=true}}}},{type:'button',id:'browse',filebrowser:{action:'Browse',target:'Link:txtUrl',url:editor.config.filebrowserImageBrowseLinkUrl||editor.config.filebrowserBrowseUrl},style:'float:right',hidden:true,label:editor.lang.common.browseServer},{id:'cmbTarget',type:'select',label:editor.lang.common.target,'default':'',items:[[editor.lang.common.notSet,''],[editor.lang.common.targetNew,'_blank'],[editor.lang.common.targetTop,'_top'],[editor.lang.common.targetSelf,'_self'],[editor.lang.common.targetParent,'_parent']],setup:function(type,element){if(type==LINK)this.setValue(element.getAttribute('target'))},commit:function(type,element){if(type==LINK){if(this.getValue()||this.isChanged())element.setAttribute('target',this.getValue())}}}]},{id:'Upload',hidden:true,filebrowser:'uploadButton',label:editor.lang.image.upload,elements:[{type:'file',id:'upload',label:editor.lang.image.btnUpload,style:'height:40px',size:38},{type:'fileButton',id:'uploadButton',filebrowser:'info:txtUrl',label:editor.lang.image.btnUpload,'for':['Upload','upload']}]},{id:'advanced',label:editor.lang.common.advancedTab,elements:[{type:'hbox',widths:['50%','25%','25%'],children:[{type:'text',id:'linkId',label:editor.lang.common.id,setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('id'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('id',this.getValue())}}},{id:'cmbLangDir',type:'select',style:'width : 100px;',label:editor.lang.common.langDir,'default':'',items:[[editor.lang.common.notSet,''],[editor.lang.common.langDirLtr,'ltr'],[editor.lang.common.langDirRtl,'rtl']],setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('dir'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('dir',this.getValue())}}},{type:'text',id:'txtLangCode',label:editor.lang.common.langCode,'default':'',setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('lang'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('lang',this.getValue())}}}]},{type:'text',id:'txtGenLongDescr',label:editor.lang.common.longDescr,setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('longDesc'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('longDesc',this.getValue())}}},{type:'hbox',widths:['50%','50%'],children:[{type:'text',id:'txtGenClass',label:editor.lang.common.cssClass,'default':'',setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('class'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('class',this.getValue())}}},{type:'text',id:'txtGenTitle',label:editor.lang.common.advisoryTitle,'default':'',onChange:function(){updatePreview(this.getDialog())},setup:function(type,element){if(type==IMAGE)this.setValue(element.getAttribute('title'))},commit:function(type,element){if(type==IMAGE){if(this.getValue()||this.isChanged())element.setAttribute('title',this.getValue())}elseif(type==PREVIEW){element.setAttribute('title',this.getValue())}elseif(type==CLEANUP){element.removeAttribute('title')}}}]},{type:'text',id:'txtdlgGenStyle',label:editor.lang.common.cssStyle,'default':'',setup:function(type,element){if(type==IMAGE){var genStyle=element.getAttribute('style');if(!genStyle&&element.$.style.cssText)genStyle=element.$.style.cssText;this.setValue(genStyle);var height=element.$.style.height,width=element.$.style.width,aMatchH=(height?height:'').match(regexGetSize),aMatchW=(width?width:'').match(regexGetSize);this.attributesInStyle={height:!!aMatchH,width:!!aMatchW}}},onChange:function(){commitInternally.call(this,['info:cmbFloat','info:cmbAlign','info:txtVSpace','info:txtHSpace','info:txtBorder','info:txtWidth','info:txtHeight']);updatePreview(this)},commit:function(type,element){if(type==IMAGE&&(this.getValue()||this.isChanged())){element.setAttribute('style',this.getValue())}}}]}]}};CKEDITOR.dialog.add('image',function(editor){return imageDialog(editor,'image')});CKEDITOR.dialog.add('imagebutton',function(editor){return imageDialog(editor,'imagebutton')})})();

Solution 3:

Rather than edit the ckeditor code, I add a custom plugin to override default behaviours. In this case it will modify the ckeditor image dialog definition by changing the commit function on the align select box.

For help writing a custom plugin: http://www.voofie.com/content/2/ckeditor-plugin-development/

This is from my plugin.js for a custom 'ckoverride' plugin. 

(function()
{
    CKEDITOR.on( 'dialogDefinition', function( ev )
    {
        // Take the dialog name and its definition from the event// data.var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        if ( dialogName == 'image' )
        {
            // Get a reference to the "Info" (main) tab.var infoTab = dialogDefinition.getContents( 'info' );
            // Get a reference to the align combo box.var align = infoTab.get('cmbAlign');

            // Override the commit function.// Changes the image alignment to use the align attribute, not floats.
            align.commit = function( type, element, internalCommit )
            {
                varIMAGE = 1,
                    LINK = 2,
                    PREVIEW = 4,
                    CLEANUP = 8; // constants from image.jsvar value = this.getValue();
                if ( type == IMAGE || type == PREVIEW )
                {
                    if ( value )
                        element.setAttribute( 'align', value );
                    else
                        element.removeAttribute( 'align' );
                }
                elseif ( type == CLEANUP )
                    element.removeAttribute( 'align' );
            };
        }
    }
})();

// custom plugin, doesn't actually do anything other than override the default plugins.CKEDITOR.plugins.add('ckoverride',{
        init:function(e){},
        requires:[]
});

Solution 4:

I cannot be helpful but I want to point a way for you. You can easily add new buttons and actions to CKEditors and can configure it's toolbars menu.

here is an example that shows how to implement your own tool for CKEditor.

(function(){  
    b='syrinxImage';  
    CKEDITOR.plugins.add(b,{  
        init:function(c){  
            c.addCommand(b,a);  
            c.ui.addButton('SyrinxImage',{  
            label:'Insert Image',   
            icon: this.path + 'toolBarButton.png',  
            command: b  
        });  
    }  
})();

when you done with your own tool you can set or modify CKEditor's toolbar like this

[  
    ['Source','-','Templates'],  
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],  
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
    ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],  
    '/',  
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],  
    ['Link','Unlink','Anchor'],  
    ['SyrinxImage','SyrinxCode','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
    '/',  
    ['Styles','Format','Font','FontSize'],  
    ['TextColor','BGColor'],  
    ['Maximize', 'ShowBlocks','-','About']  
]

please check the following link for more detailed information. first codeCKEditor JavaScript APIMain page of Documentation for CKEditor

I hope, I can be helpful with these.

Solution 5:

I am using small jquery code to fix this before saving content:

ck_editor_content.find("img").each( function(){
    var img_algn = $(this).css('float');
    $(this).attr('align', img_algn);
});

Post a Comment for "Ckeditor Align Images Instead Of Float"