Changeset 7050 for CKEditor/trunk


Ignore:
Timestamp:
06/14/11 17:42:56 (4 years ago)
Author:
garry.yao
Message:

#8036: Improved the handling of fake object dimension with real element attributes.

Location:
CKEditor/trunk/_source
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/trunk/_source/core/htmlparser/element.js

    r7021 r7050  
    5858                isBlockLike : isBlockLike, 
    5959                hasInlineStarted : isEmpty || !isBlockLike 
     60        }; 
     61}; 
     62 
     63/** 
     64 *  Object presentation of  CSS style declaration text. 
     65 *  @param {CKEDITOR.htmlParser.element|String} elementOrStyleText A html parser element or the inline style text. 
     66 */ 
     67CKEDITOR.htmlParser.cssStyle = function() 
     68{ 
     69         var styleText, arg = arguments[ 0 ],rules = {}; 
     70        styleText = arg instanceof CKEDITOR.htmlParser.element ? arg.attributes.style : arg; 
     71 
     72   // html-encoded quote might be introduced by 'font-family' 
     73   // from MS-Word which confused the following regexp. e.g. 
     74   //'font-family: "Lucida, Console"' 
     75   ( styleText || '' ) 
     76           .replace( /"/g, '"' ) 
     77           .replace( /\s*([^ :;]+)\s*:\s*([^;]+)\s*(?=;|$)/g, 
     78                        function( match, name, value ) 
     79                        { 
     80                                name == 'font-family' && ( value = value.replace( /["']/g, '' ) ); 
     81                                rules[ name.toLowerCase() ] = value; 
     82                        }); 
     83 
     84        return { 
     85                rules : rules, 
     86                /** 
     87                 *  Apply the styles onto the specified element or object. 
     88                 * @param {CKEDITOR.htmlParser.element|CKEDITOR.dom.element|Object} obj 
     89                 */ 
     90                populate : function( obj ){ 
     91                        var style = this.toString(); 
     92                         if ( style ) 
     93                         { 
     94                                 obj instanceof CKEDITOR.dom.element ? 
     95                                        obj.setAttribute( 'style', style ) : 
     96                                  obj instanceof CKEDITOR.htmlParser.element ? 
     97                                        obj.attributes.style = style : 
     98                                  obj.style = style; 
     99                         } 
     100                }, 
     101                toString :function() 
     102                { 
     103                        var output = []; 
     104                        for ( var i in rules ) 
     105                                rules[ i ] && output.push( i, ':', rules[ i ], ';' ); 
     106                        return output.join( '' ); 
     107                } 
    60108        }; 
    61109}; 
  • CKEditor/trunk/_source/plugins/fakeobjects/plugin.js

    r7012 r7050  
    66(function() 
    77{ 
     8        var cssStyle = CKEDITOR.htmlParser.cssStyle, 
     9                        cssLength = CKEDITOR.tools.cssLength; 
     10 
     11        var cssLengthRegex = /^((?:\d*(?:\.\d+))|(?:\d+))(.*)?$/i; 
     12 
     13        /* 
     14         * Replacing the former CSS length value with the later one, with 
     15         * adjustment to the length  unit. 
     16         */ 
     17        function replaceCssLength( length1, length2 ) 
     18        { 
     19                var parts1 = cssLengthRegex.exec( length1 ), 
     20                                parts2 = cssLengthRegex.exec( length2 ); 
     21 
     22                // Omit pixel length unit when necessary, 
     23                // e.g. replaceCssLength( 10, '20px' ) -> 20 
     24                if ( parts1 ) 
     25                { 
     26                        if ( !parts1[ 2 ] && parts2[ 2 ] == 'px' ) 
     27                                return parts2[ 1 ]; 
     28                        if ( parts1[ 2 ] == 'px' && !parts2[ 2 ] ) 
     29                                return parts2[ 1 ] + 'px'; 
     30                } 
     31 
     32                return length2; 
     33        } 
     34 
    835        var htmlFilterRules = 
    936        { 
     
    1744                                        realElement = realFragment && realFragment.children[ 0 ]; 
    1845 
    19                                 // If we have width/height in the element, we must move it into 
    20                                 // the real element. 
     46                                // Width/height in the fake object are subjected to clone into the real element. 
    2147                                if ( realElement && element.attributes[ 'data-cke-resizable' ] ) 
    2248                                { 
    23                                         var style = element.attributes.style; 
     49                                        var styles = new cssStyle( element ).rules, 
     50                                                realAttrs = realElement.attributes, 
     51                                                width = styles.width, 
     52                                                height = styles.height; 
    2453 
    25                                         if ( style ) 
    26                                         { 
    27                                                 // Get the width from the style. 
    28                                                 var match = /(?:^|\s)width\s*:\s*(.*?)(:?;|$)/i.exec( style ), 
    29                                                         width = match && match[1]; 
    30  
    31                                                 // Get the height from the style. 
    32                                                 match = /(?:^|\s)height\s*:\s*(.*?)(:?;|$)/i.exec( style ); 
    33                                                 var height = match && match[1]; 
    34  
    35                                                 if ( width ) 
    36                                                         realElement.attributes.width = CKEDITOR.tools.convertToPx( width ); 
    37  
    38                                                 if ( height ) 
    39                                                         realElement.attributes.height = CKEDITOR.tools.convertToPx( height ); 
    40                                         } 
     54                                        width && ( realAttrs.width = replaceCssLength( realAttrs.width, width ) ); 
     55                                        height && ( realAttrs.height = replaceCssLength( realAttrs.height, height ) ); 
    4156                                } 
    4257 
     
    5974                } 
    6075        }); 
    61 })(); 
    6276 
    63 CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) 
    64 { 
    65         var lang = this.lang.fakeobjects, 
    66                 label = lang[ realElementType ] || lang.unknown; 
     77        CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) 
     78        { 
     79                var lang = this.lang.fakeobjects, 
     80                        label = lang[ realElementType ] || lang.unknown; 
    6781 
    68         var attributes = 
    69         { 
    70                 'class' : className, 
    71                 src : CKEDITOR.getUrl( 'images/spacer.gif' ), 
    72                 'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ), 
    73                 'data-cke-real-node-type' : realElement.type, 
    74                 alt : label, 
    75                 title : label, 
    76                 align : realElement.getAttribute( 'align' ) || '' 
     82                var attributes = 
     83                { 
     84                        'class' : className, 
     85                        src : CKEDITOR.getUrl( 'images/spacer.gif' ), 
     86                        'data-cke-realelement' : encodeURIComponent( realElement.getOuterHtml() ), 
     87                        'data-cke-real-node-type' : realElement.type, 
     88                        alt : label, 
     89                        title : label, 
     90                        align : realElement.getAttribute( 'align' ) || '' 
     91                }; 
     92 
     93                if ( realElementType ) 
     94                        attributes[ 'data-cke-real-element-type' ] = realElementType; 
     95 
     96                if ( isResizable ) 
     97                { 
     98                        attributes[ 'data-cke-resizable' ] = isResizable; 
     99 
     100                        var fakeStyle = new cssStyle(); 
     101 
     102                        var width = realElement.getAttribute( 'width' ), 
     103                                height = realElement.getAttribute( 'height' ); 
     104 
     105                        width && ( fakeStyle.rules.width = cssLength( width ) ); 
     106                        height && ( fakeStyle.rules.height = cssLength( height ) ); 
     107                        fakeStyle.populate( attributes ); 
     108                } 
     109 
     110                return this.document.createElement( 'img', { attributes : attributes } ); 
    77111        }; 
    78112 
    79         if ( realElementType ) 
    80                 attributes[ 'data-cke-real-element-type' ] = realElementType; 
     113        CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) 
     114        { 
     115                var lang = this.lang.fakeobjects, 
     116                        label = lang[ realElementType ] || lang.unknown, 
     117                        html; 
    81118 
    82         if ( isResizable ) 
    83                 attributes[ 'data-cke-resizable' ] = isResizable; 
     119                var writer = new CKEDITOR.htmlParser.basicWriter(); 
     120                realElement.writeHtml( writer ); 
     121                html = writer.getHtml(); 
    84122 
    85         return this.document.createElement( 'img', { attributes : attributes } ); 
    86 }; 
     123                var attributes = 
     124                { 
     125                        'class' : className, 
     126                        src : CKEDITOR.getUrl( 'images/spacer.gif' ), 
     127                        'data-cke-realelement' : encodeURIComponent( html ), 
     128                        'data-cke-real-node-type' : realElement.type, 
     129                        alt : label, 
     130                        title : label, 
     131                        align : realElement.attributes.align || '' 
     132                }; 
    87133 
    88 CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) 
    89 { 
    90         var lang = this.lang.fakeobjects, 
    91                 label = lang[ realElementType ] || lang.unknown, 
    92                 html; 
     134                if ( realElementType ) 
     135                        attributes[ 'data-cke-real-element-type' ] = realElementType; 
    93136 
    94         var writer = new CKEDITOR.htmlParser.basicWriter(); 
    95         realElement.writeHtml( writer ); 
    96         html = writer.getHtml(); 
     137                if ( isResizable ) 
     138                { 
     139                        attributes[ 'data-cke-resizable' ] = isResizable; 
     140                        var realAttrs = realElement.attributes, 
     141                                fakeStyle = new cssStyle(); 
    97142 
    98         var attributes = 
    99         { 
    100                 'class' : className, 
    101                 src : CKEDITOR.getUrl( 'images/spacer.gif' ), 
    102                 'data-cke-realelement' : encodeURIComponent( html ), 
    103                 'data-cke-real-node-type' : realElement.type, 
    104                 alt : label, 
    105                 title : label, 
    106                 align : realElement.attributes.align || '' 
     143                        var width = realAttrs.width, 
     144                                height = realAttrs.height; 
     145 
     146                        width != undefined && ( fakeStyle.rules.width =  cssLength( width ) ); 
     147                        height != undefined && ( fakeStyle.rules.height = cssLength ( height ) ); 
     148                        fakeStyle.populate( attributes ); 
     149                } 
     150 
     151                return new CKEDITOR.htmlParser.element( 'img', attributes ); 
    107152        }; 
    108153 
    109         if ( realElementType ) 
    110                 attributes[ 'data-cke-real-element-type' ] = realElementType; 
     154        CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) 
     155        { 
     156                if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT ) 
     157                        return null; 
    111158 
    112         if ( isResizable ) 
    113                 attributes[ 'data-cke-resizable' ] = isResizable; 
     159                var element = CKEDITOR.dom.element.createFromHtml( 
     160                        decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), 
     161                        this.document ); 
    114162 
    115         return new CKEDITOR.htmlParser.element( 'img', attributes ); 
    116 }; 
     163                if ( fakeElement.data( 'cke-resizable') ) 
     164                { 
     165                        var width = fakeElement.getStyle( 'width' ), 
     166                                height = fakeElement.getStyle( 'height' ); 
    117167 
    118 CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) 
    119 { 
    120         if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT ) 
    121                 return null; 
     168                        width && element.setAttribute( 'width', replaceCssLength( element.getAttribute( 'width' ), width ) ); 
     169                        height && element.setAttribute( 'height', replaceCssLength( element.getAttribute( 'height' ), height ) ); 
     170                } 
     171                 
     172                return element; 
     173        } 
    122174 
    123         return CKEDITOR.dom.element.createFromHtml( 
    124                 decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), 
    125                 this.document ); 
    126 }; 
     175})(); 
  • CKEditor/trunk/_source/plugins/flash/dialogs/flash.js

    r7011 r7050  
    371371                                                                        label : editor.lang.common.width, 
    372372                                                                        validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.width ) ), 
    373                                                                         setup : function( objectNode, embedNode, paramMap, fakeImage ) 
    374                                                                         { 
    375                                                                                 loadValue.apply( this, arguments ); 
    376                                                                                 fakeImage && this.setValue( fakeImage.getStyle( 'width' ) ); 
    377                                                                         }, 
    378                                                                         commit : function( objectNode, embedNode, paramMap, extraStyles ) 
    379                                                                         { 
    380                                                                                 commitValue.apply( this, arguments ); 
    381                                                                                 var val = this.getValue(); 
    382                                                                                 val && ( extraStyles.width = defaultToPixel( val ) ); 
    383                                                                         } 
     373                                                                        setup : loadValue, 
     374                                                                        commit : commitValue 
    384375                                                                }, 
    385376                                                                { 
     
    389380                                                                        label : editor.lang.common.height, 
    390381                                                                        validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.height ) ), 
    391                                                                         setup : function( objectNode, embedNode, paramMap, fakeImage ) 
    392                                                                         { 
    393                                                                                 loadValue.apply( this, arguments ); 
    394                                                                                 fakeImage && this.setValue( fakeImage.getStyle( 'height' ) ); 
    395                                                                         }, 
    396                                                                         commit : function( objectNode, embedNode, paramMap, extraStyles ) 
    397                                                                         { 
    398                                                                                 commitValue.apply( this, arguments ); 
    399                                                                                 var val = this.getValue(); 
    400                                                                                 val && ( extraStyles.height = defaultToPixel( val ) ); 
    401                                                                         } 
     382                                                                        setup : loadValue, 
     383                                                                        commit : commitValue 
    402384                                                                }, 
    403385                                                                { 
  • CKEditor/trunk/_source/plugins/flash/plugin.js

    r6455 r7050  
    77{ 
    88        var flashFilenameRegex = /\.swf(?:$|\?)/i; 
    9  
    10         var cssifyLength = CKEDITOR.tools.cssLength; 
    119 
    1210        function isFlashEmbed( element ) 
     
    1917        function createFakeElement( editor, realElement ) 
    2018        { 
    21                 var fakeElement = editor.createFakeParserElement( realElement, 'cke_flash', 'flash', true ), 
    22                         fakeStyle = fakeElement.attributes.style || ''; 
    23  
    24                 var width = realElement.attributes.width, 
    25                         height = realElement.attributes.height; 
    26  
    27                 if ( typeof width != 'undefined' ) 
    28                         fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';'; 
    29  
    30                 if ( typeof height != 'undefined' ) 
    31                         fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';'; 
    32  
    33                 return fakeElement; 
     19                return editor.createFakeParserElement( realElement, 'cke_flash', 'flash', true ); 
    3420        } 
    3521 
  • CKEditor/trunk/_source/plugins/iframe/dialogs/iframe.js

    r7012 r7050  
    1313                frameborder : { 'true' : '1', 'false' : '0' } 
    1414        }; 
    15  
    16         var defaultToPixel = CKEDITOR.tools.cssLength; 
    1715 
    1816        function loadValue( iframeNode ) 
     
    127125                                                                        label : commonLang.width, 
    128126                                                                        validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.width ) ), 
    129                                                                         getValue : defaultToPixel, 
    130                                                                         setup : function( iframeNode, fakeImage ) 
    131                                                                         { 
    132                                                                                 loadValue.apply( this, arguments ); 
    133                                                                                 fakeImage && this.setValue( fakeImage.getStyle( 'width' ) ); 
    134                                                                         }, 
    135                                                                         commit : function( iframeNode, extraStyles ) 
    136                                                                         { 
    137                                                                                 commitValue.apply( this, arguments ); 
    138                                                                                 var val = this.getValue(); 
    139                                                                                 val && ( extraStyles.width = val ); 
    140                                                                         } 
     127                                                                        setup : loadValue, 
     128                                                                        commit : commitValue 
    141129                                                                }, 
    142130                                                                { 
     
    147135                                                                        label : commonLang.height, 
    148136                                                                        validate : CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.height ) ), 
    149                                                                         getValue : defaultToPixel, 
    150                                                                         setup : function( iframeNode, fakeImage ) 
    151                                                                         { 
    152                                                                                 loadValue.apply( this, arguments ); 
    153                                                                                 fakeImage && this.setValue( fakeImage.getStyle( 'height' ) ); 
    154                                                                         }, 
    155                                                                         commit : function( iframeNode, extraStyles ) 
    156                                                                         { 
    157                                                                                 commitValue.apply( this, arguments ); 
    158                                                                                 var val = this.getValue(); 
    159                                                                                 val && ( extraStyles.height = val ); 
    160                                                                         } 
     137                                                                        setup : loadValue, 
     138                                                                        commit : commitValue 
    161139                                                                }, 
    162140                                                                { 
  • CKEditor/trunk/_source/plugins/iframe/plugin.js

    r6348 r7050  
    66(function() 
    77{ 
    8         function createFakeElement( editor, realElement ) 
    9         { 
    10                 var fakeElement = editor.createFakeParserElement( realElement, 'cke_iframe', 'iframe', true ), 
    11                         fakeStyle = fakeElement.attributes.style || ''; 
    12  
    13                 var width = realElement.attributes.width, 
    14                         height = realElement.attributes.height; 
    15  
    16                 if ( typeof width != 'undefined' ) 
    17                         fakeStyle += 'width:' + CKEDITOR.tools.cssLength( width ) + ';'; 
    18  
    19                 if ( typeof height != 'undefined' ) 
    20                         fakeStyle += 'height:' + CKEDITOR.tools.cssLength( height ) + ';'; 
    21  
    22                 fakeElement.attributes.style = fakeStyle; 
    23  
    24                 return fakeElement; 
    25         } 
    26  
    278        CKEDITOR.plugins.add( 'iframe', 
    289        { 
     
    9778                                                iframe : function( element ) 
    9879                                                { 
    99                                                         return createFakeElement( editor, element ); 
     80                                                        return editor.createFakeParserElement( element, 'cke_iframe', 'iframe', true ); 
    10081                                                } 
    10182                                        } 
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy