Changeset 7050 for CKEditor/trunk


Ignore:
Timestamp:
06/14/2011 05:42:56 PM (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