Changeset 6128


Ignore:
Timestamp:
11/28/10 02:54:42 (5 years ago)
Author:
fredck
Message:

#6103 : It's now possible to control the styling of inline read-only elements with the disableReadonlyStyling setting. It's also possible to avoid inline-styling any element by setting its data-cke-nostyle attribute to "1".

Location:
CKEditor/branches/versions/3.5.x
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/branches/versions/3.5.x/CHANGES.html

    r6127 r6128  
    4545                <li><a href="http://dev.ckeditor.com/ticket/5654">#5654</a> : Added the new placeholder plugin.</li>
    4646                <li><a href="http://dev.ckeditor.com/ticket/6334">#6334</a> : CKEditor now uses <a href="http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes">HTML5's data-* attributes</a> for its internal attributes.</li>
     47                <li><a href="http://dev.ckeditor.com/ticket/6103">#6103</a> : It's now possible to control the styling of inline read-only elements with the disableReadonlyStyling setting. It's also possible to avoid inline-styling any element by setting its data-cke-nostyle attribute to "1".</li>
    4748        </ul>
    4849        <p>
  • CKEditor/branches/versions/3.5.x/_source/plugins/colorbutton/plugin.js

    r6050 r6128  
    127127
    128128                                                colorStyle.childRule = type == 'back' ?
    129                                                         // It's better to apply background color as the innermost style. (#3599)
    130                                                         function(){ return false; } :
    131                                                         // Fore color style must be applied inside links instead of around it.
    132                                                         function( element ){ return element.getName() != 'a'; };
     129                                                        function( element )
     130                                                        {
     131                                                                // It's better to apply background color as the innermost style. (#3599)
     132                                                                // Except for "unstylable elements". (#6103)
     133                                                                return isUnstylable( element );
     134                                                        }
     135                                                        :
     136                                                        function( element )
     137                                                        {
     138                                                                // Fore color style must be applied inside links instead of around it.
     139                                                                return element.getName() != 'a' || isUnstylable( element );
     140                                                        };
    133141
    134142                                                new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
     
    208216                        return output.join( '' );
    209217                }
     218
     219                function isUnstylable( ele )
     220                {
     221                        return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-cke-nostyle' );
     222                }
    210223        }
    211224});
  • CKEditor/branches/versions/3.5.x/_source/plugins/styles/plugin.js

    r6126 r6128  
    66CKEDITOR.plugins.add( 'styles',
    77{
    8         requires : [ 'selection' ]
     8        requires : [ 'selection' ],
     9        init : function( editor )
     10        {
     11                // This doesn't look like correct, but it's the safest way to proper
     12                // pass the disableReadonlyStyling configuration to the style system
     13                // without having to change any method signature in the API. (#6103)
     14                editor.on( 'contentDom', function()
     15                        {
     16                                editor.document.setCustomData( 'cke_includeReadonly', !editor.config.disableReadonlyStyling );
     17                        });
     18        }
    919});
    1020
     
    354364        };
    355365
     366        // Gets the parent element which blocks the styling for an element. This
     367        // can be done through read-only elements (contenteditable=false) or
     368        // elements with the "data-cke-nostyle" attribute.
     369        function getUnstylableParent( element )
     370        {
     371                var unstylable,
     372                        editable;
     373               
     374                while ( ( element = element.getParent() ) )
     375                {
     376                        if ( element.getName() == 'body' )
     377                                break;
     378
     379                        if ( element.getAttribute( 'data-cke-nostyle' ) )
     380                                unstylable = element;
     381                        else if ( !editable )
     382                        {
     383                                var contentEditable = element.getAttribute( 'contentEditable' );
     384
     385                                if ( contentEditable == 'false' )
     386                                        unstylable = element;
     387                                else if ( contentEditable == 'true' )
     388                                        editable = 1;
     389                        }
     390                }
     391
     392                return unstylable;
     393        }
     394
    356395        function applyInlineStyle( range )
    357396        {
     
    375414                var def = this._.definition;
    376415                var isUnknownElement;
     416
     417                // Indicates that fully selected read-only elements are to be included in the styling range.
     418                var includeReadonly = def.includeReadonly;
     419               
     420                // If the read-only inclusion is not available in the definition, try
     421                // to get it from the document data.
     422                if ( includeReadonly == undefined )
     423                        includeReadonly = document.getCustomData( 'cke_includeReadonly' );
    377424
    378425                // Get the DTD definition for the element. Defaults to "span".
     
    393440                var styleRange;
    394441
     442                // Check if the boundaries are inside non stylable elements.
     443                var firstUnstylable = getUnstylableParent( firstNode ),
     444                        lastUnstylable = getUnstylableParent( lastNode );
     445
     446                // If the first element can't be styled, we'll start processing right
     447                // after its unstylable root.
     448                if ( firstUnstylable )
     449                        currentNode = firstUnstylable.getNextSourceNode( true );                       
     450
     451                // If the last element can't be styled, we'll stop processing on its
     452                // unstylable root.
     453                if ( lastUnstylable )
     454                        lastNode = lastUnstylable;
     455
     456                // Do nothing if the current node now follows the last node to be processed.
     457                if ( currentNode.getPosition( lastNode ) == CKEDITOR.POSITION_FOLLOWING )
     458                        currentNode = 0;
     459
    395460                while ( currentNode )
    396461                {
     
    406471                                var nodeType = currentNode.type;
    407472                                var nodeName = nodeType == CKEDITOR.NODE_ELEMENT ? currentNode.getName() : null;
     473                                var nodeIsReadonly = nodeName && ( currentNode.getAttribute( 'contentEditable' ) == 'false' );
     474                                var nodeIsNoStyle = nodeName && currentNode.getAttribute( 'data-cke-nostyle' );
    408475
    409476                                if ( nodeName && currentNode.data( 'cke-bookmark' ) )
     
    415482                                // Check if the current node can be a child of the style element.
    416483                                if ( !nodeName || ( dtd[ nodeName ]
     484                                        && !nodeIsNoStyle
     485                                        && ( !nodeIsReadonly || includeReadonly )
    417486                                        && ( currentNode.getPosition( lastNode ) | CKEDITOR.POSITION_PRECEDING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED )
    418487                                        && ( !def.childRule || def.childRule( currentNode ) ) ) )
     
    436505                                                }
    437506
    438                                                 // Non element nodes, or empty elements can be added
    439                                                 // completely to the range.
    440                                                 if ( nodeType == CKEDITOR.NODE_TEXT || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) )
     507                                                // Non element nodes, readonly elements, or empty
     508                                                // elements can be added completely to the range.
     509                                                if ( nodeType == CKEDITOR.NODE_TEXT || nodeIsReadonly || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) )
    441510                                                {
    442511                                                        var includedNode = currentNode;
     
    462531                                                        if ( !includedNode.$.nextSibling )
    463532                                                                applyStyle = true;
    464 
    465533                                                }
    466534                                        }
     
    472540
    473541                                // Get the next node to be processed.
    474                                 currentNode = currentNode.getNextSourceNode();
     542                                currentNode = currentNode.getNextSourceNode( nodeIsNoStyle || nodeIsReadonly );
    475543                        }
    476544
     
    13561424                        // Bookmark the range so we can re-select it after processing.
    13571425                        bookmarks = selection.createBookmarks( 1 ),
    1358                         ranges = selection.getRanges( 1 ),
     1426                        ranges = selection.getRanges(),
    13591427                        func = remove ? this.removeFromRange : this.applyToRange,
    13601428                        range;
     
    14481516                callback( this._.stylesDefinitions );
    14491517};
     1518
     1519/**
     1520 * Indicates that fully selected read-only elements will be included when
     1521 * applying the style (for inline styles only).
     1522 * @name CKEDITOR.style.includeReadonly
     1523 * @type Boolean
     1524 * @default false
     1525 * @since 3.5
     1526 */
     1527
     1528 /**
     1529  * Disables inline styling on read-only elements.
     1530  * @name CKEDITOR.config.disableReadonlyStyling
     1531  * @type Boolean
     1532  * @default false
     1533  * @since 3.5
     1534  */
    14501535
    14511536/**
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2015 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy