\r
(function()\r
{\r
+ var cssStyle = CKEDITOR.htmlParser.cssStyle,\r
+ cssLength = CKEDITOR.tools.cssLength;\r
+\r
+ var cssLengthRegex = /^((?:\d*(?:\.\d+))|(?:\d+))(.*)?$/i;\r
+\r
+ /*\r
+ * Replacing the former CSS length value with the later one, with\r
+ * adjustment to the length unit.\r
+ */\r
+ function replaceCssLength( length1, length2 )\r
+ {\r
+ var parts1 = cssLengthRegex.exec( length1 ),\r
+ parts2 = cssLengthRegex.exec( length2 );\r
+\r
+ // Omit pixel length unit when necessary,\r
+ // e.g. replaceCssLength( 10, '20px' ) -> 20\r
+ if ( parts1 )\r
+ {\r
+ if ( !parts1[ 2 ] && parts2[ 2 ] == 'px' )\r
+ return parts2[ 1 ];\r
+ if ( parts1[ 2 ] == 'px' && !parts2[ 2 ] )\r
+ return parts2[ 1 ] + 'px';\r
+ }\r
+\r
+ return length2;\r
+ }\r
+\r
var htmlFilterRules =\r
{\r
elements :\r
realFragment = realHtml && new CKEDITOR.htmlParser.fragment.fromHtml( decodeURIComponent( realHtml ) ),\r
realElement = realFragment && realFragment.children[ 0 ];\r
\r
- // If we have width/height in the element, we must move it into\r
- // the real element.\r
+ // Width/height in the fake object are subjected to clone into the real element.\r
if ( realElement && element.attributes[ 'data-cke-resizable' ] )\r
{\r
- var style = element.attributes.style;\r
-\r
- if ( style )\r
- {\r
- // Get the width from the style.\r
- var match = /(?:^|\s)width\s*:\s*(\d+)/i.exec( style ),\r
- width = match && match[1];\r
+ var styles = new cssStyle( element ).rules,\r
+ realAttrs = realElement.attributes,\r
+ width = styles.width,\r
+ height = styles.height;\r
\r
- // Get the height from the style.\r
- match = /(?:^|\s)height\s*:\s*(\d+)/i.exec( style );\r
- var height = match && match[1];\r
-\r
- if ( width )\r
- realElement.attributes.width = width;\r
-\r
- if ( height )\r
- realElement.attributes.height = height;\r
- }\r
+ width && ( realAttrs.width = replaceCssLength( realAttrs.width, width ) );\r
+ height && ( realAttrs.height = replaceCssLength( realAttrs.height, height ) );\r
}\r
\r
return realElement;\r
htmlFilter.addRules( htmlFilterRules );\r
}\r
});\r
-})();\r
-\r
-CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable )\r
-{\r
- var lang = this.lang.fakeobjects,\r
- label = lang[ realElementType ] || lang.unknown;\r
\r
- var attributes =\r
+ CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable )\r
{\r
- 'class' : className,\r
- src : CKEDITOR.getUrl( 'images/spacer.gif' ),\r
- 'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ),\r
- 'data-cke-real-node-type' : realElement.type,\r
- alt : label,\r
- title : label,\r
- align : realElement.getAttribute( 'align' ) || ''\r
- };\r
+ var lang = this.lang.fakeobjects,\r
+ label = lang[ realElementType ] || lang.unknown;\r
\r
- if ( realElementType )\r
- attributes[ 'data-cke-real-element-type' ] = realElementType;\r
+ var attributes =\r
+ {\r
+ 'class' : className,\r
+ src : CKEDITOR.getUrl( 'images/spacer.gif' ),\r
+ 'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ),\r
+ 'data-cke-real-node-type' : realElement.type,\r
+ alt : label,\r
+ title : label,\r
+ align : realElement.getAttribute( 'align' ) || ''\r
+ };\r
+\r
+ if ( realElementType )\r
+ attributes[ 'data-cke-real-element-type' ] = realElementType;\r
+\r
+ if ( isResizable )\r
+ {\r
+ attributes[ 'data-cke-resizable' ] = isResizable;\r
\r
- if ( isResizable )\r
- attributes[ 'data-cke-resizable' ] = isResizable;\r
+ var fakeStyle = new cssStyle();\r
\r
- return this.document.createElement( 'img', { attributes : attributes } );\r
-};\r
+ var width = realElement.getAttribute( 'width' ),\r
+ height = realElement.getAttribute( 'height' );\r
\r
-CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable )\r
-{\r
- var lang = this.lang.fakeobjects,\r
- label = lang[ realElementType ] || lang.unknown,\r
- html;\r
+ width && ( fakeStyle.rules.width = cssLength( width ) );\r
+ height && ( fakeStyle.rules.height = cssLength( height ) );\r
+ fakeStyle.populate( attributes );\r
+ }\r
\r
- var writer = new CKEDITOR.htmlParser.basicWriter();\r
- realElement.writeHtml( writer );\r
- html = writer.getHtml();\r
+ return this.document.createElement( 'img', { attributes : attributes } );\r
+ };\r
\r
- var attributes =\r
+ CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable )\r
{\r
- 'class' : className,\r
- src : CKEDITOR.getUrl( 'images/spacer.gif' ),\r
- 'data-cke-realelement' : encodeURIComponent( html ),\r
- 'data-cke-real-node-type' : realElement.type,\r
- alt : label,\r
- title : label,\r
- align : realElement.attributes.align || ''\r
+ var lang = this.lang.fakeobjects,\r
+ label = lang[ realElementType ] || lang.unknown,\r
+ html;\r
+\r
+ var writer = new CKEDITOR.htmlParser.basicWriter();\r
+ realElement.writeHtml( writer );\r
+ html = writer.getHtml();\r
+\r
+ var attributes =\r
+ {\r
+ 'class' : className,\r
+ src : CKEDITOR.getUrl( 'images/spacer.gif' ),\r
+ 'data-cke-realelement' : encodeURIComponent( html ),\r
+ 'data-cke-real-node-type' : realElement.type,\r
+ alt : label,\r
+ title : label,\r
+ align : realElement.attributes.align || ''\r
+ };\r
+\r
+ if ( realElementType )\r
+ attributes[ 'data-cke-real-element-type' ] = realElementType;\r
+\r
+ if ( isResizable )\r
+ {\r
+ attributes[ 'data-cke-resizable' ] = isResizable;\r
+ var realAttrs = realElement.attributes,\r
+ fakeStyle = new cssStyle();\r
+\r
+ var width = realAttrs.width,\r
+ height = realAttrs.height;\r
+\r
+ width != undefined && ( fakeStyle.rules.width = cssLength( width ) );\r
+ height != undefined && ( fakeStyle.rules.height = cssLength ( height ) );\r
+ fakeStyle.populate( attributes );\r
+ }\r
+\r
+ return new CKEDITOR.htmlParser.element( 'img', attributes );\r
};\r
\r
- if ( realElementType )\r
- attributes[ 'data-cke-real-element-type' ] = realElementType;\r
+ CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement )\r
+ {\r
+ if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT )\r
+ return null;\r
\r
- if ( isResizable )\r
- attributes[ 'data-cke-resizable' ] = isResizable;\r
+ var element = CKEDITOR.dom.element.createFromHtml(\r
+ decodeURIComponent( fakeElement.data( 'cke-realelement' ) ),\r
+ this.document );\r
\r
- return new CKEDITOR.htmlParser.element( 'img', attributes );\r
-};\r
+ if ( fakeElement.data( 'cke-resizable') )\r
+ {\r
+ var width = fakeElement.getStyle( 'width' ),\r
+ height = fakeElement.getStyle( 'height' );\r
\r
-CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement )\r
-{\r
- if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT )\r
- return null;\r
+ width && element.setAttribute( 'width', replaceCssLength( element.getAttribute( 'width' ), width ) );\r
+ height && element.setAttribute( 'height', replaceCssLength( element.getAttribute( 'height' ), height ) );\r
+ }\r
+\r
+ return element;\r
+ };\r
\r
- return CKEDITOR.dom.element.createFromHtml(\r
- decodeURIComponent( fakeElement.data( 'cke-realelement' ) ),\r
- this.document );\r
-};\r
+})();\r
Got questions, comments, patches, etc.? Contact Jason Woofenden