Index: _source/plugins/iframe/dialogs/iframe.js =================================================================== --- _source/plugins/iframe/dialogs/iframe.js (revision 7012) +++ _source/plugins/iframe/dialogs/iframe.js (revision ) @@ -13,8 +13,6 @@ frameborder : { 'true' : '1', 'false' : '0' } }; - var defaultToPixel = CKEDITOR.tools.cssLength; - function loadValue( iframeNode ) { var isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox; @@ -126,40 +124,20 @@ labelLayout : 'vertical', label : commonLang.width, validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.width ) ), - getValue : defaultToPixel, - setup : function( iframeNode, fakeImage ) - { - loadValue.apply( this, arguments ); - fakeImage && this.setValue( fakeImage.getStyle( 'width' ) ); + setup : loadValue, + commit : commitValue - }, + }, - commit : function( iframeNode, extraStyles ) - { + { - commitValue.apply( this, arguments ); - var val = this.getValue(); - val && ( extraStyles.width = val ); - } - }, - { id : 'height', type : 'text', style : 'width:100%', labelLayout : 'vertical', label : commonLang.height, validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.height ) ), - getValue : defaultToPixel, - setup : function( iframeNode, fakeImage ) - { - loadValue.apply( this, arguments ); - fakeImage && this.setValue( fakeImage.getStyle( 'height' ) ); + setup : loadValue, + commit : commitValue - }, + }, - commit : function( iframeNode, extraStyles ) - { + { - commitValue.apply( this, arguments ); - var val = this.getValue(); - val && ( extraStyles.height = val ); - } - }, - { id : 'align', type : 'select', 'default' : '', Index: _source/plugins/flash/plugin.js =================================================================== --- _source/plugins/flash/plugin.js (revision 6455) +++ _source/plugins/flash/plugin.js (revision ) @@ -7,8 +7,6 @@ { var flashFilenameRegex = /\.swf(?:$|\?)/i; - var cssifyLength = CKEDITOR.tools.cssLength; - function isFlashEmbed( element ) { var attributes = element.attributes; @@ -18,19 +16,7 @@ function createFakeElement( editor, realElement ) { - var fakeElement = editor.createFakeParserElement( realElement, 'cke_flash', 'flash', true ), - fakeStyle = fakeElement.attributes.style || ''; - - var width = realElement.attributes.width, - height = realElement.attributes.height; - - if ( typeof width != 'undefined' ) - fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';'; - - if ( typeof height != 'undefined' ) - fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';'; - - return fakeElement; + return editor.createFakeParserElement( realElement, 'cke_flash', 'flash', true ); } CKEDITOR.plugins.add( 'flash', Index: _source/plugins/iframe/plugin.js =================================================================== --- _source/plugins/iframe/plugin.js (revision 6348) +++ _source/plugins/iframe/plugin.js (revision ) @@ -1,29 +1,10 @@ -/* +/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ (function() { - function createFakeElement( editor, realElement ) - { - var fakeElement = editor.createFakeParserElement( realElement, 'cke_iframe', 'iframe', true ), - fakeStyle = fakeElement.attributes.style || ''; - - var width = realElement.attributes.width, - height = realElement.attributes.height; - - if ( typeof width != 'undefined' ) - fakeStyle += 'width:' + CKEDITOR.tools.cssLength( width ) + ';'; - - if ( typeof height != 'undefined' ) - fakeStyle += 'height:' + CKEDITOR.tools.cssLength( height ) + ';'; - - fakeElement.attributes.style = fakeStyle; - - return fakeElement; - } - CKEDITOR.plugins.add( 'iframe', { requires : [ 'dialog', 'fakeobjects' ], @@ -96,7 +77,7 @@ { iframe : function( element ) { - return createFakeElement( editor, element ); + return editor.createFakeParserElement( element, 'cke_iframe', 'iframe', true ); } } }); Index: _source/plugins/flash/dialogs/flash.js =================================================================== --- _source/plugins/flash/dialogs/flash.js (revision 7011) +++ _source/plugins/flash/dialogs/flash.js (revision ) @@ -370,37 +370,19 @@ style : 'width:95px', label : editor.lang.common.width, validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.width ) ), - setup : function( objectNode, embedNode, paramMap, fakeImage ) - { - loadValue.apply( this, arguments ); - fakeImage && this.setValue( fakeImage.getStyle( 'width' ) ); + setup : loadValue, + commit : commitValue - }, + }, - commit : function( objectNode, embedNode, paramMap, extraStyles ) - { + { - commitValue.apply( this, arguments ); - var val = this.getValue(); - val && ( extraStyles.width = defaultToPixel( val ) ); - } - }, - { type : 'text', id : 'height', style : 'width:95px', label : editor.lang.common.height, validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.height ) ), - setup : function( objectNode, embedNode, paramMap, fakeImage ) - { - loadValue.apply( this, arguments ); - fakeImage && this.setValue( fakeImage.getStyle( 'height' ) ); + setup : loadValue, + commit : commitValue - }, + }, - commit : function( objectNode, embedNode, paramMap, extraStyles ) - { + { - commitValue.apply( this, arguments ); - var val = this.getValue(); - val && ( extraStyles.height = defaultToPixel( val ) ); - } - }, - { type : 'text', id : 'hSpace', style : 'width:95px', Index: _source/core/htmlparser/element.js =================================================================== --- _source/core/htmlparser/element.js (revision 7021) +++ _source/core/htmlparser/element.js (revision ) @@ -60,6 +60,54 @@ }; }; +/** + * Object presentation of CSS style declaration text. + * @param {CKEDITOR.htmlParser.element|String} elementOrStyleText A html parser element or the inline style text. + */ +CKEDITOR.htmlParser.cssStyle = function() +{ + var styleText, arg = arguments[ 0 ],rules = {}; + styleText = arg instanceof CKEDITOR.htmlParser.element ? arg.attributes.style : arg; + + // html-encoded quote might be introduced by 'font-family' + // from MS-Word which confused the following regexp. e.g. + //'font-family: "Lucida, Console"' + ( styleText || '' ) + .replace( /"/g, '"' ) + .replace( /\s*([^ :;]+)\s*:\s*([^;]+)\s*(?=;|$)/g, + function( match, name, value ) + { + name == 'font-family' && ( value = value.replace( /["']/g, '' ) ); + rules[ name.toLowerCase() ] = value; + }); + + return { + rules : rules, + /** + * Apply the styles onto the specified element or object. + * @param {CKEDITOR.htmlParser.element|CKEDITOR.dom.element|Object} obj + */ + populate : function( obj ){ + var style = this.toString(); + if ( style ) + { + obj instanceof CKEDITOR.dom.element ? + obj.setAttribute( 'style', style ) : + obj instanceof CKEDITOR.htmlParser.element ? + obj.attributes.style = style : + obj.style = style; + } + }, + toString :function() + { + var output = []; + for ( var i in rules ) + rules[ i ] && output.push( i, ':', rules[ i ], ';' ); + return output.join( '' ); + } + }; +}; + (function() { // Used to sort attribute entries in an array, where the first element of Index: _source/plugins/fakeobjects/plugin.js =================================================================== --- _source/plugins/fakeobjects/plugin.js (revision 7012) +++ _source/plugins/fakeobjects/plugin.js (revision ) @@ -1,10 +1,37 @@ -/* +/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ (function() { + var cssStyle = CKEDITOR.htmlParser.cssStyle, + cssLength = CKEDITOR.tools.cssLength; + + var cssLengthRegex = /^((?:\d*(?:\.\d+))|(?:\d+))(.*)?$/i; + + /* + * Replacing the former CSS length value with the later one, with + * adjustment to the length unit. + */ + function replaceCssLength( length1, length2 ) + { + var parts1 = cssLengthRegex.exec( length1 ), + parts2 = cssLengthRegex.exec( length2 ); + + // Omit pixel length unit when necessary, + // e.g. replaceCssLength( 10, '20px' ) -> 20 + if ( parts1 ) + { + if ( !parts1[ 2 ] && parts2[ 2 ] == 'px' ) + return parts2[ 1 ]; + if ( parts1[ 2 ] == 'px' && !parts2[ 2 ] ) + return parts2[ 1 ] + 'px'; + } + + return length2; + } + var htmlFilterRules = { elements : @@ -16,29 +43,17 @@ realFragment = realHtml && new CKEDITOR.htmlParser.fragment.fromHtml( decodeURIComponent( realHtml ) ), realElement = realFragment && realFragment.children[ 0 ]; - // If we have width/height in the element, we must move it into - // the real element. + // Width/height in the fake object are subjected to clone into the real element. if ( realElement && element.attributes[ 'data-cke-resizable' ] ) { - var style = element.attributes.style; + var styles = new cssStyle( element ).rules, + realAttrs = realElement.attributes, + width = styles.width, + height = styles.height; - if ( style ) - { - // Get the width from the style. - var match = /(?:^|\s)width\s*:\s*(.*?)(:?;|$)/i.exec( style ), - width = match && match[1]; - - // Get the height from the style. - match = /(?:^|\s)height\s*:\s*(.*?)(:?;|$)/i.exec( style ); - var height = match && match[1]; - - if ( width ) - realElement.attributes.width = CKEDITOR.tools.convertToPx( width ); - - if ( height ) - realElement.attributes.height = CKEDITOR.tools.convertToPx( height ); + width && ( realAttrs.width = replaceCssLength( realAttrs.width, width ) ); + height && ( realAttrs.height = replaceCssLength( realAttrs.height, height ) ); - } + } - } return realElement; } @@ -58,69 +73,103 @@ htmlFilter.addRules( htmlFilterRules ); } }); -})(); -CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) -{ - var lang = this.lang.fakeobjects, - label = lang[ realElementType ] || lang.unknown; + CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) + { + var lang = this.lang.fakeobjects, + label = lang[ realElementType ] || lang.unknown; - var attributes = - { - 'class' : className, - src : CKEDITOR.getUrl( 'images/spacer.gif' ), - 'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ), - 'data-cke-real-node-type' : realElement.type, - alt : label, - title : label, - align : realElement.getAttribute( 'align' ) || '' - }; + var attributes = + { + 'class' : className, + src : CKEDITOR.getUrl( 'images/spacer.gif' ), + 'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ), + 'data-cke-real-node-type' : realElement.type, + alt : label, + title : label, + align : realElement.getAttribute( 'align' ) || '' + }; - if ( realElementType ) - attributes[ 'data-cke-real-element-type' ] = realElementType; + if ( realElementType ) + attributes[ 'data-cke-real-element-type' ] = realElementType; - if ( isResizable ) + if ( isResizable ) + { - attributes[ 'data-cke-resizable' ] = isResizable; + attributes[ 'data-cke-resizable' ] = isResizable; + var fakeStyle = new cssStyle(); + + var width = realElement.getAttribute( 'width' ), + height = realElement.getAttribute( 'height' ); + + width && ( fakeStyle.rules.width = cssLength( width ) ); + height && ( fakeStyle.rules.height = cssLength( height ) ); + fakeStyle.populate( attributes ); + } + - return this.document.createElement( 'img', { attributes : attributes } ); -}; + return this.document.createElement( 'img', { attributes : attributes } ); + }; -CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) -{ - var lang = this.lang.fakeobjects, - label = lang[ realElementType ] || lang.unknown, - html; + CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) + { + var lang = this.lang.fakeobjects, + label = lang[ realElementType ] || lang.unknown, + html; - var writer = new CKEDITOR.htmlParser.basicWriter(); - realElement.writeHtml( writer ); - html = writer.getHtml(); + var writer = new CKEDITOR.htmlParser.basicWriter(); + realElement.writeHtml( writer ); + html = writer.getHtml(); - var attributes = - { - 'class' : className, - src : CKEDITOR.getUrl( 'images/spacer.gif' ), - 'data-cke-realelement' : encodeURIComponent( html ), - 'data-cke-real-node-type' : realElement.type, - alt : label, - title : label, - align : realElement.attributes.align || '' - }; + var attributes = + { + 'class' : className, + src : CKEDITOR.getUrl( 'images/spacer.gif' ), + 'data-cke-realelement' : encodeURIComponent( html ), + 'data-cke-real-node-type' : realElement.type, + alt : label, + title : label, + align : realElement.attributes.align || '' + }; - if ( realElementType ) - attributes[ 'data-cke-real-element-type' ] = realElementType; + if ( realElementType ) + attributes[ 'data-cke-real-element-type' ] = realElementType; - if ( isResizable ) + if ( isResizable ) + { - attributes[ 'data-cke-resizable' ] = isResizable; + attributes[ 'data-cke-resizable' ] = isResizable; + var realAttrs = realElement.attributes, + fakeStyle = new cssStyle(); + var width = realAttrs.width, + height = realAttrs.height; + + width != undefined && ( fakeStyle.rules.width = cssLength( width ) ); + height != undefined && ( fakeStyle.rules.height = cssLength ( height ) ); + fakeStyle.populate( attributes ); + } + - return new CKEDITOR.htmlParser.element( 'img', attributes ); -}; + return new CKEDITOR.htmlParser.element( 'img', attributes ); + }; -CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) -{ - if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT ) - return null; + CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) + { + if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT ) + return null; - return CKEDITOR.dom.element.createFromHtml( + var element = CKEDITOR.dom.element.createFromHtml( - decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), - this.document ); + decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), + this.document ); -}; + + if ( fakeElement.data( 'cke-resizable') ) + { + var width = fakeElement.getStyle( 'width' ), + height = fakeElement.getStyle( 'height' ); + + width && element.setAttribute( 'width', replaceCssLength( element.getAttribute( 'width' ), width ) ); + height && element.setAttribute( 'height', replaceCssLength( element.getAttribute( 'height' ), height ) ); + } + + return element; + } + +})();