Ticket #6737: 6737.patch

File 6737.patch, 16.9 KB (added by Garry Yao, 9 years ago)
  • _source/plugins/format/plugin.js

     
    99
    1010        init : function( editor )
    1111        {
    12                 var config = editor.config,
    13                         lang = editor.lang.format;
     12                var plugin = this,
     13                        config = editor.config,
     14                        lang = editor.lang.format,
     15                        styles;
    1416
    15                 // Gets the list of tags from the settings.
    16                 var tags = config.format_tags.split( ';' );
     17                function loadStylesSet( callback )
     18                {
     19                        var formatStyles = config.formatStyles || 'format';
     20                        if ( !( formatStyles instanceof Array ) )
     21                        {
     22                                var parts = formatStyles.split( ':' ),
     23                                        name = parts[ 0 ],
     24                                        path = parts[ 1 ] || plugin.path + 'styles/default.js';
    1725
    18                 // Create style objects for all defined styles.
    19                 var styles = {};
    20                 for ( var i = 0 ; i < tags.length ; i++ )
    21                 {
    22                         var tag = tags[ i ];
    23                         styles[ tag ] = new CKEDITOR.style( config[ 'format_' + tag ] );
    24                         styles[ tag ]._.enterMode = editor.config.enterMode;
     26                                formatStyles = [ name, path ].join( ':' );
     27                        }
     28
     29                        editor.getStylesSet( formatStyles, function( stylesDefinitions )
     30                        {
     31                                !styles && ( styles = editor.buildStylesList( stylesDefinitions ) );
     32                                callback && callback();
     33                        });
    2534                }
    2635
    2736                editor.ui.addRichCombo( 'Format',
     
    2938                                label : lang.label,
    3039                                title : lang.panelTitle,
    3140                                className : 'cke_format',
     41
    3242                                panel :
    3343                                {
    3444                                        css : editor.skin.editor.css.concat( config.contentsCss ),
     
    4050                                {
    4151                                        this.startGroup( lang.panelTitle );
    4252
    43                                         for ( var tag in styles )
    44                                         {
    45                                                 var label = lang[ 'tag_' + tag ];
     53                                        var combo = this;
     54                                        loadStylesSet( function()
     55                                                {
     56                                                        // Loop over the style list, adding all items to the combo.
     57                                                        var list = styles.list, style, styleName, label;
    4658
    47                                                 // Add the tag entry to the panel list.
    48                                                 this.add( tag, '<' + tag + '>' + label + '</' + tag + '>', label );
    49                                         }
     59                                                        for ( var i = 0, count = list.length ; i < count ; i++ )
     60                                                        {
     61                                                                style = list[ i ];
     62                                                                styleName = style._name;
     63                                                                label = lang[ 'tag_' + style.element ] || styleName;
     64                                                                combo.add( styleName, list[ i ].buildPreview( label ), label );
     65                                                        }
     66
     67                                                        combo.commit();
     68                                                });
    5069                                },
    5170
    5271                                onClick : function( value )
     
    5473                                        editor.focus();
    5574                                        editor.fire( 'saveSnapshot' );
    5675
    57                                         var style = styles[ value ],
     76                                        var style = styles.hash[ value ],
    5877                                                elementPath = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() );
    5978
    6079                                        style[ style.checkActive( elementPath ) ? 'remove' : 'apply' ]( editor.document );
    6180
    62                                         // Save the undo snapshot after all changes are affected. (#4899)
    63                                         setTimeout( function()
    64                                         {
    65                                                 editor.fire( 'saveSnapshot' );
    66                                         }, 0 );
     81                                        editor.fire( 'saveSnapshot' );
    6782                                },
    6883
    6984                                onRender : function()
    7085                                {
    7186                                        editor.on( 'selectionChange', function( ev )
    7287                                                {
    73                                                         var currentTag = this.getValue();
     88                                                        var currentValue = this.getValue(),
     89                                                                elementPath = ev.data.path;
    7490
    75                                                         var elementPath = ev.data.path;
    76 
    77                                                         for ( var tag in styles )
     91                                                        // Check if the element is removable by any of
     92                                                        // the styles.
     93                                                        for ( var name in styles.hash )
    7894                                                        {
    79                                                                 if ( styles[ tag ].checkActive( elementPath ) )
     95                                                                if ( styles.hash[ name ].checkActive( elementPath ) )
    8096                                                                {
    81                                                                         if ( tag != currentTag )
    82                                                                                 this.setValue( tag, editor.lang.format[ 'tag_' + tag ] );
     97                                                                        if ( name != currentValue )
     98                                                                                this.setValue( name );
    8399                                                                        return;
    84100                                                                }
    85101                                                        }
     
    90106                                                this);
    91107                                }
    92108                        });
     109
     110                editor.on( 'instanceReady', function() { loadStylesSet(); } );
    93111        }
    94112});
    95113
    96114/**
    97  * A list of semi colon separated style names (by default tags) representing
    98  * the style definition for each entry to be displayed in the Format combo in
    99  * the toolbar. Each entry must have its relative definition configuration in a
    100  * setting named "format_(tagName)". For example, the "p" entry has its
    101  * definition taken from config.format_p.
    102  * @type String
    103  * @default 'p;h1;h2;h3;h4;h5;h6;pre;address;div'
     115 * The "format styles definition set" to be used in the format combo. <br>
     116 * It will be by default loaded from a file named by "default.js" in "styles" folder within the format plugin.
     117 * Otherwise, this setting should have the "name:url" syntax, making it
     118 * possible to set the URL from which loading the styles file.<br>
     119 * @see CKEDITOR.config.stylesSet
     120 * @name CKEDITOR.config.formatStyles
     121 * @type String|Array
     122 * @default 'default'
     123 * @since 3.6
    104124 * @example
    105  * config.format_tags = 'p;h2;h3;pre'
    106  */
    107 CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
    108 
    109 /**
    110  * The style definition to be used to apply the "Normal" format.
    111  * @type Object
    112  * @default { element : 'p' }
     125 * // Load from a relative URL.
     126 * config.formatStyles = 'myformats:/editorformats/formats.js';
    113127 * @example
    114  * config.format_p = { element : 'p', attributes : { 'class' : 'normalPara' } };
    115  */
    116 CKEDITOR.config.format_p = { element : 'p' };
    117 
    118 /**
    119  * The style definition to be used to apply the "Normal (DIV)" format.
    120  * @type Object
    121  * @default { element : 'div' }
     128 * // Load from a full URL.
     129 * config.formatStyles = 'myformats:http://www.example.com/editorformat/formats.js';
    122130 * @example
    123  * config.format_div = { element : 'div', attributes : { 'class' : 'normalDiv' } };
     131 * // Load from a list of definitions.
     132 * config.formatStyles = [
     133 *  { name : 'Heading1', element : 'h1' },
     134 * { name : 'Preformatted', element : 'pre' }, ... ];
    124135 */
    125 CKEDITOR.config.format_div = { element : 'div' };
    126 
    127 /**
    128  * The style definition to be used to apply the "Formatted" format.
    129  * @type Object
    130  * @default { element : 'pre' }
    131  * @example
    132  * config.format_pre = { element : 'pre', attributes : { 'class' : 'code' } };
    133  */
    134 CKEDITOR.config.format_pre = { element : 'pre' };
    135 
    136 /**
    137  * The style definition to be used to apply the "Address" format.
    138  * @type Object
    139  * @default { element : 'address' }
    140  * @example
    141  * config.format_address = { element : 'address', attributes : { 'class' : 'styledAddress' } };
    142  */
    143 CKEDITOR.config.format_address = { element : 'address' };
    144 
    145 /**
    146  * The style definition to be used to apply the "Heading 1" format.
    147  * @type Object
    148  * @default { element : 'h1' }
    149  * @example
    150  * config.format_h1 = { element : 'h1', attributes : { 'class' : 'contentTitle1' } };
    151  */
    152 CKEDITOR.config.format_h1 = { element : 'h1' };
    153 
    154 /**
    155  * The style definition to be used to apply the "Heading 1" format.
    156  * @type Object
    157  * @default { element : 'h2' }
    158  * @example
    159  * config.format_h2 = { element : 'h2', attributes : { 'class' : 'contentTitle2' } };
    160  */
    161 CKEDITOR.config.format_h2 = { element : 'h2' };
    162 
    163 /**
    164  * The style definition to be used to apply the "Heading 1" format.
    165  * @type Object
    166  * @default { element : 'h3' }
    167  * @example
    168  * config.format_h3 = { element : 'h3', attributes : { 'class' : 'contentTitle3' } };
    169  */
    170 CKEDITOR.config.format_h3 = { element : 'h3' };
    171 
    172 /**
    173  * The style definition to be used to apply the "Heading 1" format.
    174  * @type Object
    175  * @default { element : 'h4' }
    176  * @example
    177  * config.format_h4 = { element : 'h4', attributes : { 'class' : 'contentTitle4' } };
    178  */
    179 CKEDITOR.config.format_h4 = { element : 'h4' };
    180 
    181 /**
    182  * The style definition to be used to apply the "Heading 1" format.
    183  * @type Object
    184  * @default { element : 'h5' }
    185  * @example
    186  * config.format_h5 = { element : 'h5', attributes : { 'class' : 'contentTitle5' } };
    187  */
    188 CKEDITOR.config.format_h5 = { element : 'h5' };
    189 
    190 /**
    191  * The style definition to be used to apply the "Heading 1" format.
    192  * @type Object
    193  * @default { element : 'h6' }
    194  * @example
    195  * config.format_h6 = { element : 'h6', attributes : { 'class' : 'contentTitle6' } };
    196  */
    197 CKEDITOR.config.format_h6 = { element : 'h6' };
  • _source/plugins/stylescombo/plugin.js

     
    1313                {
    1414                        var config = editor.config,
    1515                                lang = editor.lang.stylesCombo,
    16                                 styles = {},
    17                                 stylesList = [];
     16                                styles;
    1817
    1918                        function loadStylesSet( callback )
    2019                        {
    2120                                editor.getStylesSet( function( stylesDefinitions )
    2221                                {
    23                                         if ( !stylesList.length )
    24                                         {
    25                                                 var style,
    26                                                         styleName;
    27 
    28                                                 // Put all styles into an Array.
    29                                                 for ( var i = 0, count = stylesDefinitions.length ; i < count ; i++ )
    30                                                 {
    31                                                         var styleDefinition = stylesDefinitions[ i ];
    32 
    33                                                         styleName = styleDefinition.name;
    34 
    35                                                         style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
    36                                                         style._name = styleName;
    37                                                         style._.enterMode = config.enterMode;
    38 
    39                                                         stylesList.push( style );
    40                                                 }
    41 
    42                                                 // Sorts the Array, so the styles get grouped by type.
    43                                                 stylesList.sort( sortStyles );
    44                                         }
    45 
     22                                        !styles && ( styles = editor.buildStylesList( stylesDefinitions ) );
    4623                                        callback && callback();
    4724                                });
    4825                        }
     
    7552
    7653                                                                // Loop over the Array, adding all items to the
    7754                                                                // combo.
    78                                                                 for ( i = 0, count = stylesList.length ; i < count ; i++ )
     55                                                                var list = styles.list;
     56                                                                for ( i = 0, count = list.length ; i < count ; i++ )
    7957                                                                {
    80                                                                         style = stylesList[ i ];
     58                                                                        style = list[ i ];
    8159                                                                        styleName = style._name;
    8260                                                                        type = style.type;
    8361
     
    10482                                                editor.focus();
    10583                                                editor.fire( 'saveSnapshot' );
    10684
    107                                                 var style = styles[ value ],
     85                                                var style = styles.hash[ value ],
    10886                                                        selection = editor.getSelection(),
    10987                                                        elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
    11088
     
    128106
    129107                                                                        // Check if the element is removable by any of
    130108                                                                        // the styles.
    131                                                                         for ( var value in styles )
     109                                                                        for ( var value in styles.hash )
    132110                                                                        {
    133                                                                                 if ( styles[ value ].checkElementRemovable( element, true ) )
     111                                                                                if ( styles.hash[ value ].checkElementRemovable( element, true ) )
    134112                                                                                {
    135113                                                                                        if ( value != currentValue )
    136114                                                                                                this.setValue( value );
     
    157135
    158136                                                this.showAll();
    159137                                                this.unmarkAll();
    160                                                 for ( var name in styles )
     138                                                for ( var name in styles.hash )
    161139                                                {
    162                                                         var style = styles[ name ],
     140                                                        var style = styles.hash[ name ],
    163141                                                                type = style.type;
    164142
    165143                                                        if ( style.checkActive( elementPath ) )
     
    187165                        editor.on( 'instanceReady', function() { loadStylesSet(); } );
    188166                }
    189167        });
    190 
    191         function sortStyles( styleA, styleB )
    192         {
    193                 var typeA = styleA.type,
    194                         typeB = styleB.type;
    195 
    196                 return typeA == typeB ? 0 :
    197                         typeA == CKEDITOR.STYLE_OBJECT ? -1 :
    198                         typeB == CKEDITOR.STYLE_OBJECT ? 1 :
    199                         typeB == CKEDITOR.STYLE_BLOCK ? 1 :
    200                         -1;
    201         }
    202168})();
  • _source/plugins/styles/plugin.js

     
    288288                },
    289289
    290290                // Builds the preview HTML based on the styles definition.
    291                 buildPreview : function()
     291                buildPreview : function( label )
    292292                {
    293293                        var styleDefinition = this._.definition,
    294294                                html = [],
     
    315315                        if ( cssStyle )
    316316                                html.push( ' style="', cssStyle, '"' );
    317317
    318                         html.push( '>', styleDefinition.name, '</', elementName, '>' );
     318                        html.push( '>', label || styleDefinition.name, '</', elementName, '>' );
    319319
    320320                        return html.join( '' );
    321321                }
     
    15751575        };
    15761576
    15771577
    1578 /**
    1579  * Gets the current styleSet for this instance
    1580  * @param {Function} callback The function to be called with the styles data.
    1581  * @example
    1582  * editor.getStylesSet( function( stylesDefinitions ) {} );
    1583  */
    1584 CKEDITOR.editor.prototype.getStylesSet = function( callback )
    1585 {
    1586         if ( !this._.stylesDefinitions )
    1587         {
    1588                 var editor = this,
    1589                         // Respect the backwards compatible definition entry
    1590                         configStyleSet = editor.config.stylesCombo_stylesSet || editor.config.stylesSet || 'default';
     1578( function()
     1579{
     1580        function sortStyles( styleA, styleB )
     1581        {
     1582                var typeA = styleA.type,
     1583                                typeB = styleB.type;
     1584
     1585                return typeA == typeB ? 0 :
     1586                           typeA == CKEDITOR.STYLE_OBJECT ? -1 :
     1587                           typeB == CKEDITOR.STYLE_OBJECT ? 1 :
     1588                           typeB == CKEDITOR.STYLE_BLOCK ? 1 :
     1589                           -1;
     1590        }
     1591
     1592        /**
     1593         * Gets the current styleSet for this instance
     1594         * @param {Function} callback The function to be called with the styles data.
     1595         * @example
     1596         * editor.getStylesSet( function( stylesDefinitions ) {} );
     1597         */
     1598        CKEDITOR.editor.prototype.getStylesSet = function()
     1599        {
     1600                var customStyles = typeof arguments[ 0 ] != 'function' && arguments[ 0 ],
     1601                        callback = customStyles ? arguments[ 1 ] : arguments[ 0 ];
     1602
     1603                // Respect the backwards compatible definition entry
     1604                var stylesSet = customStyles || this.config.stylesCombo_stylesSet || this.config.stylesSet || 'default';
    15911605
    1592                 // #5352 Allow to define the styles directly in the config object
    1593                 if ( configStyleSet instanceof Array )
     1606                // #5352 Allow to define anonymous styles object directly.
     1607                if ( stylesSet instanceof Array )
    15941608                {
    1595                         editor._.stylesDefinitions = configStyleSet;
    1596                         callback( configStyleSet );
     1609                        callback( stylesSet );
    15971610                        return;
    15981611                }
    15991612
    1600                 var     partsStylesSet = configStyleSet.split( ':' ),
     1613                var partsStylesSet = stylesSet.split( ':' ),
    16011614                        styleSetName = partsStylesSet[ 0 ],
    16021615                        externalPath = partsStylesSet[ 1 ],
    16031616                        pluginPath = CKEDITOR.plugins.registered.styles.path;
    16041617
    1605                 CKEDITOR.stylesSet.addExternal( styleSetName,
    1606                                 externalPath ?
    1607                                         partsStylesSet.slice( 1 ).join( ':' ) :
    1608                                         pluginPath + 'styles/' + styleSetName + '.js', '' );
     1618                // Check cached copy.
     1619                var loaded = CKEDITOR.stylesSet.registered;
     1620                if ( loaded[ styleSetName ] )
     1621                        callback( loaded[ styleSetName ] );
     1622                else
     1623                {
     1624                        CKEDITOR.stylesSet.addExternal( styleSetName,
     1625                                                                                        externalPath ?
     1626                                                                                        partsStylesSet.slice( 1 ).join( ':' ) :
     1627                                                                                        pluginPath + 'styles/' + styleSetName + '.js', '' );
    16091628
    1610                 CKEDITOR.stylesSet.load( styleSetName, function( stylesSet )
     1629                        CKEDITOR.stylesSet.load( styleSetName, function( stylesSet )
    16111630                        {
    1612                                 editor._.stylesDefinitions = stylesSet[ styleSetName ];
    1613                                 callback( editor._.stylesDefinitions );
    1614                         } ) ;
    1615         }
    1616         else
    1617                 callback( this._.stylesDefinitions );
    1618 };
     1631                                callback( stylesSet[ styleSetName ] );
     1632                        } );
     1633                }
     1634        };
    16191635
    1620 /**
     1636        /**
     1637         * Turn a list of style definition into {@link CKEDITOR.style} instances.
     1638         * @param stylesSet
     1639         */
     1640        CKEDITOR.editor.prototype.buildStylesList = function( definitionList )
     1641        {
     1642                var stylesList = [], styles = {};
     1643
     1644                if ( !stylesList.length )
     1645                {
     1646                        var style,
     1647                                styleName;
     1648
     1649                        // Put all styles into an Array.
     1650                        for ( var i = 0, count = definitionList.length ; i < count ; i++ )
     1651                        {
     1652                                var styleDefinition = definitionList[ i ];
     1653
     1654                                styleName = styleDefinition.name;
     1655
     1656                                style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
     1657                                style._name = styleName;
     1658                                style._.enterMode = this.config.enterMode;
     1659
     1660                                stylesList.push( style );
     1661                        }
     1662                        // Sorts the Array, so the styles get grouped by type.
     1663                        stylesList.sort( sortStyles );
     1664                }
     1665
     1666                return { list : stylesList, hash : styles };
     1667        };
     1668
     1669} )();
     1670
     1671/**
    16211672 * Indicates that fully selected read-only elements will be included when
    16221673 * applying the style (for inline styles only).
    16231674 * @name CKEDITOR.style.includeReadonly
  • _source/plugins/format/styles/default.js

     
     1/*
     2Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6CKEDITOR.stylesSet.add( 'format',
     7[
     8        /* Block Styles */
     9
     10        // These styles are already available in the "Format" combo, so they are
     11        // not needed here by default. You may enable them to avoid placing the
     12        // "Format" combo in the toolbar, maintaining the same features.
     13        { name : 'Normal'               , element : 'p' },
     14        { name : 'Heading 1'            , element : 'h1' },
     15        { name : 'Heading 2'            , element : 'h2' },
     16        { name : 'Heading 3'            , element : 'h3' },
     17        { name : 'Heading 4'            , element : 'h4' },
     18        { name : 'Heading 5'            , element : 'h5' },
     19        { name : 'Heading 6'            , element : 'h6' },
     20        { name : 'Formatted', element : 'pre' },
     21        { name : 'Address'                      , element : 'address' },
     22        { name : 'Normal (DIV)'         , element : 'div' }
     23]);
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy