All--
I'm having some challenges with the image alignment in my application's CKEditor instance for creating HTML emails. While
Is there a documented method to convert CKEditor from
For those struggling with this same issue, be aware that newer versions of Outlook also disregard image sizing via style declaration as well. It's not just you!
Thank you in advance for any help you can provide.
I'm having some challenges with the image alignment in my application's CKEditor instance for creating HTML emails. While
style="float:left"is a certainly a valid manner of justifying an image, it appears that Microsoft, in its infinite wisdom has made that invalid for recent versions of Outlook's HTML Rendering engine. As a result, users of my application are getting great looking results for everyone but their most up-to-date and potentially lucrative customers--not a good situation!
Is there a documented method to convert CKEditor from
style="float:left"images to
align="left"? If it makes any difference, I'm instantiating CK via Jquery.
For those struggling with this same issue, be aware that newer versions of Outlook also disregard image sizing via style declaration as well. It's not just you!
Thank you in advance for any help you can provide.

Re: Change Float to Align for HTML Emails
yeah, outlook 2007 is crap.
Re: Change Float to Align for HTML Emails
Alfonso, any chance that you could point me toward a fix?
Re: Change Float to Align for HTML Emails
viewtopic.php?f=11&t=17207&start=10
Re: Change Float to Align for HTML Emails
Thanks.
Re: Change Float to Align for HTML Emails
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 ); 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; } } } ); }And then take the next bit of code and call it *after* the editor load:
<script language="Javascript"> CKEDITOR.replace( 'WhateverIDYouUsed', { on : { 'instanceReady' : configureHtmlOutput } } ); </script>If all set up properly, it should fire whenever an <img> tag is added or modified, sniff out the various variables in the "style" attribute, and add them as old-school standalone attributes.
Most of the first block of code, I snagged from one of the samples and then made some additions, to catch borders and float. I'd still like to get 'border-style' in the mix, I haven't puzzled out the regex needed to sniff that one out yet, but it's low-priority as most folks don't use borders on images anyhow.