X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fstyles%2Fplugin.js;h=0850a66bbdd111b59762200c982b5a394a1969e7;hb=f0610347140239143439a511ee2bd48cb784f470;hp=278f532ed5bc143b78691e792a10f841a62c6527;hpb=941b0a9ba4e673e292510d80a5a86806994b8ea6;p=ckeditor.git diff --git a/_source/plugins/styles/plugin.js b/_source/plugins/styles/plugin.js index 278f532..0850a66 100644 --- a/_source/plugins/styles/plugin.js +++ b/_source/plugins/styles/plugin.js @@ -1,19 +1,29 @@ /* -Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.plugins.add( 'styles', { - requires : [ 'selection' ] + requires : [ 'selection' ], + init : function( editor ) + { + // This doesn't look like correct, but it's the safest way to proper + // pass the disableReadonlyStyling configuration to the style system + // without having to change any method signature in the API. (#6103) + editor.on( 'contentDom', function() + { + editor.document.setCustomData( 'cke_includeReadonly', !editor.config.disableReadonlyStyling ); + }); + } }); /** - * Registers a function to be called whenever a style changes its state in the + * Registers a function to be called whenever the selection position changes in the * editing area. The current state is passed to the function. The possible * states are {@link CKEDITOR.TRISTATE_ON} and {@link CKEDITOR.TRISTATE_OFF}. - * @param {CKEDITOR.style} The style to be watched. - * @param {Function} The function to be called when the style state changes. + * @param {CKEDITOR.style} style The style to be watched. + * @param {Function} callback The function to be called. * @example * // Create a style object for the <b> element. * var style = new CKEDITOR.style( { element : 'b' } ); @@ -51,22 +61,14 @@ CKEDITOR.editor.prototype.attachStyleStateChange = function( style, callback ) // callback. var currentState = callback.style.checkActive( ev.data.path ) ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF; - // If the state changed since the last check. - if ( callback.state !== currentState ) - { - // Call the callback function, passing the current - // state to it. - callback.fn.call( this, currentState ); - - // Save the current state, so it can be compared next - // time. - callback.state !== currentState; - } + // Call the callback function, passing the current + // state to it. + callback.fn.call( this, currentState ); } }); } - // Save the callback info, so it can be checked on the next occurence of + // Save the callback info, so it can be checked on the next occurrence of // selectionChange. styleStateChangeCallbacks.push( { style : style, fn : callback } ); }; @@ -77,10 +79,14 @@ CKEDITOR.STYLE_OBJECT = 3; (function() { - var blockElements = { address:1,div:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,p:1,pre:1 }; - var objectElements = { a:1,embed:1,hr:1,img:1,li:1,object:1,ol:1,table:1,td:1,tr:1,ul:1 }; + var blockElements = { address:1,div:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,p:1,pre:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,time:1,meter:1,menu:1,command:1,keygen:1,output:1,progress:1,details:1,datagrid:1,datalist:1 }, + objectElements = { a:1,embed:1,hr:1,img:1,li:1,object:1,ol:1,table:1,td:1,tr:1,th:1,ul:1,dl:1,dt:1,dd:1,form:1,audio:1,video:1 }; + + var semicolonFixRegex = /\s*(?:;\s*|$)/, + varRegex = /#\((.+?)\)/g; - var semicolonFixRegex = /\s*(?:;\s*|$)/; + var notBookmark = CKEDITOR.dom.walker.bookmark( 0, 1 ), + nonWhitespaces = CKEDITOR.dom.walker.whitespaces( 1 ); CKEDITOR.style = function( styleDefinition, variablesValues ) { @@ -92,16 +98,22 @@ CKEDITOR.STYLE_OBJECT = 3; replaceVariables( styleDefinition.styles, variablesValues ); } - var element = this.element = ( styleDefinition.element || '*' ).toLowerCase(); + var element = this.element = styleDefinition.element ? + ( typeof styleDefinition.element == 'string' ? styleDefinition.element.toLowerCase() : styleDefinition.element ) + : '*'; this.type = - ( element == '#' || blockElements[ element ] ) ? + blockElements[ element ] ? CKEDITOR.STYLE_BLOCK : objectElements[ element ] ? CKEDITOR.STYLE_OBJECT : CKEDITOR.STYLE_INLINE; + // If the 'element' property is an object with a set of possible element, it will be applied like an object style: only to existing elements + if ( typeof this.element == 'object' ) + this.type = CKEDITOR.STYLE_OBJECT; + this._ = { definition : styleDefinition @@ -127,6 +139,8 @@ CKEDITOR.STYLE_OBJECT = 3; applyInlineStyle : this.type == CKEDITOR.STYLE_BLOCK ? applyBlockStyle + : this.type == CKEDITOR.STYLE_OBJECT ? + applyObjectStyle : null ).call( this, range ); }, @@ -135,6 +149,10 @@ CKEDITOR.STYLE_OBJECT = 3; return ( this.removeFromRange = this.type == CKEDITOR.STYLE_INLINE ? removeInlineStyle + : this.type == CKEDITOR.STYLE_BLOCK ? + removeBlockStyle + : this.type == CKEDITOR.STYLE_OBJECT ? + removeObjectStyle : null ).call( this, range ); }, @@ -154,17 +172,26 @@ CKEDITOR.STYLE_OBJECT = 3; case CKEDITOR.STYLE_BLOCK : return this.checkElementRemovable( elementPath.block || elementPath.blockLimit, true ); + case CKEDITOR.STYLE_OBJECT : case CKEDITOR.STYLE_INLINE : var elements = elementPath.elements; for ( var i = 0, element ; i < elements.length ; i++ ) { - element = elements[i]; + element = elements[ i ]; - if ( element == elementPath.block || element == elementPath.blockLimit ) + if ( this.type == CKEDITOR.STYLE_INLINE + && ( element == elementPath.block || element == elementPath.blockLimit ) ) continue; + if( this.type == CKEDITOR.STYLE_OBJECT ) + { + var name = element.getName(); + if ( !( typeof this.element == 'string' ? name == this.element : name in this.element ) ) + continue; + } + if ( this.checkElementRemovable( element, true ) ) return true; } @@ -172,18 +199,38 @@ CKEDITOR.STYLE_OBJECT = 3; return false; }, + /** + * Whether this style can be applied at the element path. + * @param elementPath + */ + checkApplicable : function( elementPath ) + { + switch ( this.type ) + { + case CKEDITOR.STYLE_INLINE : + case CKEDITOR.STYLE_BLOCK : + break; + + case CKEDITOR.STYLE_OBJECT : + return elementPath.lastElement.getAscendant( this.element, true ); + } + + return true; + }, + // Checks if an element, or any of its attributes, is removable by the // current style definition. checkElementRemovable : function( element, fullMatch ) { - if ( !element ) + if ( !element || element.isReadOnly() ) return false; var def = this._.definition, - attribs; + attribs, + name = element.getName(); // If the element name is the same as the style name. - if ( element.getName() == this.element ) + if ( typeof this.element == 'string' ? name == this.element : name in this.element ) { // If no attributes are defined in the element. if ( !fullMatch && !element.hasAttributes() ) @@ -199,9 +246,11 @@ CKEDITOR.STYLE_OBJECT = 3; continue; var elementAttr = element.getAttribute( attName ) || ''; - if ( attribs[ attName ] == - ( attName == 'style' ? - normalizeCssText( elementAttr, false ) : elementAttr ) ) + + // Special treatment for 'style' attribute is required. + if ( attName == 'style' ? + compareCssText( attribs[ attName ], normalizeCssText( elementAttr, false ) ) + : attribs[ attName ] == elementAttr ) { if ( !fullMatch ) return true; @@ -209,7 +258,7 @@ CKEDITOR.STYLE_OBJECT = 3; else if ( fullMatch ) return false; } - if( fullMatch ) + if ( fullMatch ) return true; } else @@ -246,6 +295,39 @@ CKEDITOR.STYLE_OBJECT = 3; } } return false; + }, + + // Builds the preview HTML based on the styles definition. + buildPreview : function( label ) + { + var styleDefinition = this._.definition, + html = [], + elementName = styleDefinition.element; + + // Avoid in the preview. + if ( elementName == 'bdo' ) + elementName = 'span'; + + html = [ '<', elementName ]; + + // Assign all defined attributes. + var attribs = styleDefinition.attributes; + if ( attribs ) + { + for ( var att in attribs ) + { + html.push( ' ', att, '="', attribs[ att ], '"' ); + } + } + + // Assign the style attribute. + var cssStyle = CKEDITOR.style.getStyleText( styleDefinition ); + if ( cssStyle ) + html.push( ' style="', cssStyle, '"' ); + + html.push( '>', ( label || styleDefinition.name ), '' ); + + return html.join( '' ); } }; @@ -260,24 +342,64 @@ CKEDITOR.STYLE_OBJECT = 3; stylesDef = styleDefinition.styles; // Builds the StyleText. - - var stylesText = ( styleDefinition.attributes && styleDefinition.attributes[ 'style' ] ) || ''; + var stylesText = ( styleDefinition.attributes && styleDefinition.attributes[ 'style' ] ) || '', + specialStylesText = ''; if ( stylesText.length ) stylesText = stylesText.replace( semicolonFixRegex, ';' ); for ( var style in stylesDef ) - stylesText += ( style + ':' + stylesDef[ style ] ).replace( semicolonFixRegex, ';' ); + { + var styleVal = stylesDef[ style ], + text = ( style + ':' + styleVal ).replace( semicolonFixRegex, ';' ); + + // Some browsers don't support 'inherit' property value, leave them intact. (#5242) + if ( styleVal == 'inherit' ) + specialStylesText += text; + else + stylesText += text; + } // Browsers make some changes to the style when applying them. So, here // we normalize it to the browser format. if ( stylesText.length ) stylesText = normalizeCssText( stylesText ); + stylesText += specialStylesText; + // Return it, saving it to the next request. return ( styleDefinition._ST = stylesText ); }; + // Gets the parent element which blocks the styling for an element. This + // can be done through read-only elements (contenteditable=false) or + // elements with the "data-nostyle" attribute. + function getUnstylableParent( element ) + { + var unstylable, + editable; + + while ( ( element = element.getParent() ) ) + { + if ( element.getName() == 'body' ) + break; + + if ( element.getAttribute( 'data-nostyle' ) ) + unstylable = element; + else if ( !editable ) + { + var contentEditable = element.getAttribute( 'contentEditable' ); + + if ( contentEditable == 'false' ) + unstylable = element; + else if ( contentEditable == 'true' ) + editable = 1; + } + } + + return unstylable; + } + function applyInlineStyle( range ) { var document = range.document; @@ -300,59 +422,48 @@ CKEDITOR.STYLE_OBJECT = 3; var def = this._.definition; var isUnknownElement; + // Indicates that fully selected read-only elements are to be included in the styling range. + var includeReadonly = def.includeReadonly; + + // If the read-only inclusion is not available in the definition, try + // to get it from the document data. + if ( includeReadonly == undefined ) + includeReadonly = document.getCustomData( 'cke_includeReadonly' ); + // Get the DTD definition for the element. Defaults to "span". var dtd = CKEDITOR.dtd[ elementName ] || ( isUnknownElement = true, CKEDITOR.dtd.span ); - // Bookmark the range so we can re-select it after processing. - var bookmark = range.createBookmark(); - // Expand the range. - range.enlarge( CKEDITOR.ENLARGE_ELEMENT ); + range.enlarge( CKEDITOR.ENLARGE_ELEMENT, 1 ); range.trim(); // Get the first node to be processed and the last, which concludes the // processing. - var boundaryNodes = range.getBoundaryNodes(); - var firstNode = boundaryNodes.startNode; - var lastNode = boundaryNodes.endNode.getNextSourceNode( true ); - - // Probably the document end is reached, we need a marker node. - if ( !lastNode ) - { - var marker; - lastNode = marker = document.createText( '' ); - lastNode.insertAfter( range.endContainer ); - } - // The detection algorithm below skips the contents inside bookmark nodes, so - // we'll need to make sure lastNode isn't the   inside a bookmark node. - var lastParent = lastNode.getParent(); - if ( lastParent && lastParent.getAttribute( '_fck_bookmark' ) ) - lastNode = lastParent; - - if ( lastNode.equals( firstNode ) ) - { - // If the last node is the same as the the first one, we must move - // it to the next one, otherwise the first one will not be - // processed. - lastNode = lastNode.getNextSourceNode( true ); - - // It may happen that there are no more nodes after it (the end of - // the document), so we must add something there to make our code - // simpler. - if ( !lastNode ) - { - lastNode = marker = document.createText( '' ); - lastNode.insertAfter( firstNode ); - } - } + var boundaryNodes = range.createBookmark(), + firstNode = boundaryNodes.startNode, + lastNode = boundaryNodes.endNode; var currentNode = firstNode; var styleRange; - // Indicates that that some useful inline content has been found, so - // the style should be applied. - var hasContents; + // Check if the boundaries are inside non stylable elements. + var firstUnstylable = getUnstylableParent( firstNode ), + lastUnstylable = getUnstylableParent( lastNode ); + + // If the first element can't be styled, we'll start processing right + // after its unstylable root. + if ( firstUnstylable ) + currentNode = firstUnstylable.getNextSourceNode( true ); + + // If the last element can't be styled, we'll stop processing on its + // unstylable root. + if ( lastUnstylable ) + lastNode = lastUnstylable; + + // Do nothing if the current node now follows the last node to be processed. + if ( currentNode.getPosition( lastNode ) == CKEDITOR.POSITION_FOLLOWING ) + currentNode = 0; while ( currentNode ) { @@ -367,21 +478,29 @@ CKEDITOR.STYLE_OBJECT = 3; { var nodeType = currentNode.type; var nodeName = nodeType == CKEDITOR.NODE_ELEMENT ? currentNode.getName() : null; + var nodeIsReadonly = nodeName && ( currentNode.getAttribute( 'contentEditable' ) == 'false' ); + var nodeIsNoStyle = nodeName && currentNode.getAttribute( 'data-nostyle' ); - if ( nodeName && currentNode.getAttribute( '_fck_bookmark' ) ) + if ( nodeName && currentNode.data( 'cke-bookmark' ) ) { currentNode = currentNode.getNextSourceNode( true ); continue; } // Check if the current node can be a child of the style element. - if ( !nodeName || ( dtd[ nodeName ] && ( currentNode.getPosition( lastNode ) | CKEDITOR.POSITION_PRECEDING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED ) ) ) + if ( !nodeName || ( dtd[ nodeName ] + && !nodeIsNoStyle + && ( !nodeIsReadonly || includeReadonly ) + && ( currentNode.getPosition( lastNode ) | CKEDITOR.POSITION_PRECEDING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED ) + && ( !def.childRule || def.childRule( currentNode ) ) ) ) { var currentParent = currentNode.getParent(); // Check if the style element can be a child of the current // node parent or if the element is not defined in the DTD. - if ( currentParent && ( ( currentParent.getDtd() || CKEDITOR.dtd.span )[ elementName ] || isUnknownElement ) ) + if ( currentParent + && ( ( currentParent.getDtd() || CKEDITOR.dtd.span )[ elementName ] || isUnknownElement ) + && ( !def.parentRule || def.parentRule( currentParent ) ) ) { // This node will be part of our range, so if it has not // been started, place its start right before the node. @@ -393,9 +512,9 @@ CKEDITOR.STYLE_OBJECT = 3; styleRange.setStartBefore( currentNode ); } - // Non element nodes, or empty elements can be added - // completely to the range. - if ( nodeType == CKEDITOR.NODE_TEXT || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) ) + // Non element nodes, readonly elements, or empty + // elements can be added completely to the range. + if ( nodeType == CKEDITOR.NODE_TEXT || nodeIsReadonly || ( nodeType == CKEDITOR.NODE_ELEMENT && !currentNode.getChildCount() ) ) { var includedNode = currentNode; var parentNode; @@ -403,24 +522,17 @@ CKEDITOR.STYLE_OBJECT = 3; // This node is about to be included completelly, but, // if this is the last node in its parent, we must also // check if the parent itself can be added completelly - // to the range. - while ( !includedNode.$.nextSibling + // to the range, otherwise apply the style immediately. + while ( ( applyStyle = !includedNode.getNext( notBookmark ) ) && ( parentNode = includedNode.getParent(), dtd[ parentNode.getName() ] ) - && ( parentNode.getPosition( firstNode ) | CKEDITOR.POSITION_FOLLOWING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_FOLLOWING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED ) ) + && ( parentNode.getPosition( firstNode ) | CKEDITOR.POSITION_FOLLOWING | CKEDITOR.POSITION_IDENTICAL | CKEDITOR.POSITION_IS_CONTAINED ) == ( CKEDITOR.POSITION_FOLLOWING + CKEDITOR.POSITION_IDENTICAL + CKEDITOR.POSITION_IS_CONTAINED ) + && ( !def.childRule || def.childRule( parentNode ) ) ) { includedNode = parentNode; } styleRange.setEndAfter( includedNode ); - // If the included node still is the last node in its - // parent, it means that the parent can't be included - // in this style DTD, so apply the style immediately. - if ( !includedNode.$.nextSibling ) - applyStyle = true; - - if ( !hasContents ) - hasContents = ( nodeType != CKEDITOR.NODE_TEXT || (/[^\s\ufeff]/).test( currentNode.getText() ) ); } } else @@ -430,46 +542,71 @@ CKEDITOR.STYLE_OBJECT = 3; applyStyle = true; // Get the next node to be processed. - currentNode = currentNode.getNextSourceNode(); + currentNode = currentNode.getNextSourceNode( nodeIsNoStyle || nodeIsReadonly ); } // Apply the style if we have something to which apply it. - if ( applyStyle && hasContents && styleRange && !styleRange.collapsed ) + if ( applyStyle && styleRange && !styleRange.collapsed ) { // Build the style element, based on the style object definition. - var styleNode = getElement( this, document ); + var styleNode = getElement( this, document ), + styleHasAttrs = styleNode.hasAttributes(); // Get the element that holds the entire range. var parent = styleRange.getCommonAncestor(); + var removeList = { + styles : {}, + attrs : {}, + // Styles cannot be removed. + blockedStyles : {}, + // Attrs cannot be removed. + blockedAttrs : {} + }; + + var attName, styleName, value; + // Loop through the parents, removing the redundant attributes // from the element to be applied. while ( styleNode && parent ) { if ( parent.getName() == elementName ) { - for ( var attName in def.attributes ) + for ( attName in def.attributes ) { - if ( styleNode.getAttribute( attName ) == parent.getAttribute( attName ) ) - styleNode.removeAttribute( attName ); - } + if ( removeList.blockedAttrs[ attName ] || !( value = parent.getAttribute( styleName ) ) ) + continue; - for ( var styleName in def.styles ) - { - if ( styleNode.getStyle( styleName ) == parent.getStyle( styleName ) ) - styleNode.removeStyle( styleName ); + if ( styleNode.getAttribute( attName ) == value ) + removeList.attrs[ attName ] = 1; + else + removeList.blockedAttrs[ attName ] = 1; } - if ( !styleNode.hasAttributes() ) + for ( styleName in def.styles ) { - styleNode = null; - break; + if ( removeList.blockedStyles[ styleName ] || !( value = parent.getStyle( styleName ) ) ) + continue; + + if ( styleNode.getStyle( styleName ) == value ) + removeList.styles[ styleName ] = 1; + else + removeList.blockedStyles[ styleName ] = 1; } } parent = parent.getParent(); } + for ( attName in removeList.attrs ) + styleNode.removeAttribute( attName ); + + for ( styleName in removeList.styles ) + styleNode.removeStyle( styleName ); + + if ( styleHasAttrs && !styleNode.hasAttributes() ) + styleNode = null; + if ( styleNode ) { // Move the contents of the range to the style element. @@ -484,7 +621,7 @@ CKEDITOR.STYLE_OBJECT = 3; styleRange.insertNode( styleNode ); // Let's merge our new style with its neighbors, if possible. - mergeSiblings( styleNode ); + styleNode.mergeSiblings(); // As the style system breaks text nodes constantly, let's normalize // things for performance. @@ -495,6 +632,15 @@ CKEDITOR.STYLE_OBJECT = 3; if ( !CKEDITOR.env.ie ) styleNode.$.normalize(); } + // Style already inherit from parents, left just to clear up any internal overrides. (#5931) + else + { + styleNode = new CKEDITOR.dom.element( 'span' ); + styleRange.extractContents().appendTo( styleNode ); + styleRange.insertNode( styleNode ); + removeFromInsideElement( this, styleNode ); + styleNode.remove( true ); + } // Style applied, let's release the range, so it gets // re-initialization in the next loop. @@ -502,9 +648,11 @@ CKEDITOR.STYLE_OBJECT = 3; } } - // Remove the temporary marking node.(#4111) - marker && marker.remove(); - range.moveToBookmark( bookmark ); + // Remove the bookmark nodes. + range.moveToBookmark( boundaryNodes ); + + // Minimize the result range to exclude empty text nodes. (#5374) + range.shrink( CKEDITOR.SHRINK_TEXT ); } function removeInlineStyle( range ) @@ -513,7 +661,7 @@ CKEDITOR.STYLE_OBJECT = 3; * Make sure our range has included all "collpased" parent inline nodes so * that our operation logic can be simpler. */ - range.enlarge( CKEDITOR.ENLARGE_ELEMENT ); + range.enlarge( CKEDITOR.ENLARGE_ELEMENT, 1 ); var bookmark = range.createBookmark(), startNode = bookmark.startNode; @@ -541,12 +689,14 @@ CKEDITOR.STYLE_OBJECT = 3; if ( this.checkElementRemovable( element ) ) { - var endOfElement = range.checkBoundaryOfElement( element, CKEDITOR.END ), - startOfElement = !endOfElement && range.checkBoundaryOfElement( element, CKEDITOR.START ); - if ( startOfElement || endOfElement ) + var isStart; + + if ( range.collapsed && ( + range.checkBoundaryOfElement( element, CKEDITOR.END ) || + ( isStart = range.checkBoundaryOfElement( element, CKEDITOR.START ) ) ) ) { boundaryElement = element; - boundaryElement.match = startOfElement ? 'start' : 'end'; + boundaryElement.match = isStart ? 'start' : 'end'; } else { @@ -556,9 +706,11 @@ CKEDITOR.STYLE_OBJECT = 3; * no difference that they're separate entities in the DOM tree. So, merge * them before removal. */ - mergeSiblings( element ); - removeFromElement( this, element ); - + element.mergeSiblings(); + if ( element.getName() == this.element ) + removeFromElement( this, element ); + else + removeOverrides( element, getOverrides( this )[ element.getName() ] ); } } } @@ -575,7 +727,7 @@ CKEDITOR.STYLE_OBJECT = 3; if ( newElement.equals( boundaryElement ) ) break; // Avoid copying any matched element. - else if( newElement.match ) + else if ( newElement.match ) continue; else newElement = newElement.clone(); @@ -645,7 +797,7 @@ CKEDITOR.STYLE_OBJECT = 3; if ( currentNode.type == CKEDITOR.NODE_ELEMENT && this.checkElementRemovable( currentNode ) ) { // Remove style from element or overriding element. - if( currentNode.getName() == this.element ) + if ( currentNode.getName() == this.element ) removeFromElement( this, currentNode ); else removeOverrides( currentNode, getOverrides( this )[ currentNode.getName() ] ); @@ -667,7 +819,49 @@ CKEDITOR.STYLE_OBJECT = 3; } range.moveToBookmark( bookmark ); -} + } + + function applyObjectStyle( range ) + { + var root = range.getCommonAncestor( true, true ), + element = root.getAscendant( this.element, true ); + element && !element.isReadOnly() && setupElement( element, this ); + } + + function removeObjectStyle( range ) + { + var root = range.getCommonAncestor( true, true ), + element = root.getAscendant( this.element, true ); + + if ( !element ) + return; + + var style = this, + def = style._.definition, + attributes = def.attributes; + var styles = CKEDITOR.style.getStyleText( def ); + + // Remove all defined attributes. + if ( attributes ) + { + for ( var att in attributes ) + { + element.removeAttribute( att, attributes[ att ] ); + } + } + + // Assign all defined styles. + if ( def.styles ) + { + for ( var i in def.styles ) + { + if ( !def.styles.hasOwnProperty( i ) ) + continue; + + element.removeStyle( i ); + } + } + } function applyBlockStyle( range ) { @@ -678,14 +872,54 @@ CKEDITOR.STYLE_OBJECT = 3; var iterator = range.createIterator(); iterator.enforceRealBlocks = true; + // make recognize
tag as a separator in ENTER_BR mode (#5121) + if ( this._.enterMode ) + iterator.enlargeBr = ( this._.enterMode != CKEDITOR.ENTER_BR ); + var block; var doc = range.document; var previousPreBlock; - while( ( block = iterator.getNextParagraph() ) ) // Only one = + while ( ( block = iterator.getNextParagraph() ) ) // Only one = + { + if ( !block.isReadOnly() ) + { + var newBlock = getElement( this, doc, block ); + replaceBlock( block, newBlock ); + } + } + + range.moveToBookmark( bookmark ); + } + + function removeBlockStyle( range ) + { + // Serializible bookmarks is needed here since + // elements may be merged. + var bookmark = range.createBookmark( 1 ); + + var iterator = range.createIterator(); + iterator.enforceRealBlocks = true; + iterator.enlargeBr = this._.enterMode != CKEDITOR.ENTER_BR; + + var block; + while ( ( block = iterator.getNextParagraph() ) ) { - var newBlock = getElement( this, doc ); - replaceBlock( block, newBlock ); + if ( this.checkElementRemovable( block ) ) + { + //
 get special treatment.
+				if ( block.is( 'pre' ) )
+				{
+					var newBlock = this._.enterMode == CKEDITOR.ENTER_BR ?
+								null : range.document.createElement(
+									this._.enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' );
+
+					newBlock && block.copyAttributes( newBlock );
+					replaceBlock( block, newBlock );
+				}
+				else
+					 removeFromElement( this, block, 1 );
+			}
 		}
 
 		range.moveToBookmark( bookmark );
@@ -696,8 +930,17 @@ CKEDITOR.STYLE_OBJECT = 3;
 	// when necessary.(#3188)
 	function replaceBlock( block, newBlock )
 	{
-		var newBlockIsPre	= newBlock.is( 'pre' );
-		var blockIsPre		= block.is( 'pre' );
+		// Block is to be removed, create a temp element to
+		// save contents.
+		var removeBlock = !newBlock;
+		if ( removeBlock )
+		{
+			newBlock = block.getDocument().createElement( 'div' );
+			block.copyAttributes( newBlock );
+		}
+
+		var newBlockIsPre	= newBlock && newBlock.is( 'pre' );
+		var blockIsPre	= block.is( 'pre' );
 
 		var isToPre	= newBlockIsPre && !blockIsPre;
 		var isFromPre	= !newBlockIsPre && blockIsPre;
@@ -706,7 +949,8 @@ CKEDITOR.STYLE_OBJECT = 3;
 			newBlock = toPre( block, newBlock );
 		else if ( isFromPre )
 			// Split big 
 into pieces before start to convert.
-			newBlock = fromPres( splitIntoPres( block ), newBlock );
+			newBlock = fromPres( removeBlock ?
+						[ block.getHtml() ] : splitIntoPres( block ), newBlock );
 		else
 			block.moveChildren( newBlock );
 
@@ -717,6 +961,8 @@ CKEDITOR.STYLE_OBJECT = 3;
 			// Merge previous 
 blocks.
 			mergePre( newBlock );
 		}
+		else if ( removeBlock )
+			removeNoAttribsElement( newBlock );
 	}
 
 	/**
@@ -725,7 +971,7 @@ CKEDITOR.STYLE_OBJECT = 3;
 	function mergePre( preBlock )
 	{
 		var previousBlock;
-		if ( !( ( previousBlock = preBlock.getPreviousSourceNode( true, CKEDITOR.NODE_ELEMENT ) )
+		if ( !( ( previousBlock = preBlock.getPrevious( nonWhitespaces ) )
 				 && previousBlock.is
 				 && previousBlock.is( 'pre') ) )
 			return;
@@ -757,7 +1003,7 @@ CKEDITOR.STYLE_OBJECT = 3;
 	{
 		// Exclude the ones at header OR at tail,
 		// and ignore bookmark content between them.
-		var duoBrRegex = /(\S\s*)\n(?:\s|(]+_fck_bookmark.*?\/span>))*\n(?!$)/gi,
+		var duoBrRegex = /(\S\s*)\n(?:\s|(]+data-cke-bookmark.*?\/span>))*\n(?!$)/gi,
 			blockName = preBlock.getName(),
 			splitedHtml = replace( preBlock.getOuterHtml(),
 				duoBrRegex,
@@ -767,7 +1013,7 @@ CKEDITOR.STYLE_OBJECT = 3;
 				} );
 
 		var pres = [];
-		splitedHtml.replace( /
([\s\S]*?)<\/pre>/gi, function( match, preContent ){
+		splitedHtml.replace( /([\s\S]*?)<\/pre>/gi, function( match, preContent ){
 			pres.push( preContent );
 		} );
 		return pres;
@@ -779,7 +1025,7 @@ CKEDITOR.STYLE_OBJECT = 3;
 		var headBookmark = '',
 			tailBookmark = '';
 
-		str = str.replace( /(^]+_fck_bookmark.*?\/span>)|(]+_fck_bookmark.*?\/span>$)/gi,
+		str = str.replace( /(^]+data-cke-bookmark.*?\/span>)|(]+data-cke-bookmark.*?\/span>$)/gi,
 			function( str, m1, m2 ){
 					m1 && ( headBookmark = m1 );
 					m2 && ( tailBookmark = m2 );
@@ -787,12 +1033,16 @@ CKEDITOR.STYLE_OBJECT = 3;
 			} );
 		return headBookmark + str.replace( regexp, replacement ) + tailBookmark;
 	}
+
 	/**
 	 * Converting a list of 
 into blocks with format well preserved.
 	 */
 	function fromPres( preHtmls, newBlock )
 	{
-		var docFrag = new CKEDITOR.dom.documentFragment( newBlock.getDocument() );
+		var docFrag;
+		if ( preHtmls.length > 1 )
+			docFrag = new CKEDITOR.dom.documentFragment( newBlock.getDocument() );
+
 		for ( var i = 0 ; i < preHtmls.length ; i++ )
 		{
 			var blockHtml = preHtmls[ i ];
@@ -822,11 +1072,17 @@ CKEDITOR.STYLE_OBJECT = 3;
 						return CKEDITOR.tools.repeat( ' ', match.length - 1 ) + ' ' ;
 					} ) ;
 
-			var newBlockClone = newBlock.clone();
-			newBlockClone.setHtml(  blockHtml );
-			docFrag.append( newBlockClone );
+			if ( docFrag )
+			{
+				var newBlockClone = newBlock.clone();
+				newBlockClone.setHtml(  blockHtml );
+				docFrag.append( newBlockClone );
+			}
+			else
+				newBlock.setHtml( blockHtml );
 		}
-		return docFrag;
+
+		return docFrag || newBlock;
 	}
 
 	/**
@@ -834,6 +1090,9 @@ CKEDITOR.STYLE_OBJECT = 3;
 	 */
 	function toPre( block, newBlock )
 	{
+		var bogus = block.getBogus();
+		bogus && bogus.remove();
+
 		// First trim the block content.
 		var preHtml = block.getHtml();
 
@@ -856,6 +1115,7 @@ CKEDITOR.STYLE_OBJECT = 3;
 			var temp = block.getDocument().createElement( 'div' );
 			temp.append( newBlock );
 			newBlock.$.outerHTML =  '
' + preHtml + '
'; + newBlock.copyAttributes( temp.getFirst() ); newBlock = temp.getFirst().remove(); } else @@ -868,31 +1128,39 @@ CKEDITOR.STYLE_OBJECT = 3; function removeFromElement( style, element ) { var def = style._.definition, - attributes = def.attributes, + attributes = CKEDITOR.tools.extend( {}, def.attributes, getOverrides( style )[ element.getName() ] ), styles = def.styles, - overrides = getOverrides( style ); + // If the style is only about the element itself, we have to remove the element. + removeEmpty = CKEDITOR.tools.isEmpty( attributes ) && CKEDITOR.tools.isEmpty( styles ); - function removeAttrs() + // Remove definition attributes/style from the elemnt. + for ( var attName in attributes ) { - for ( var attName in attributes ) - { - // The 'class' element value must match (#1318). - if ( attName == 'class' && element.getAttribute( attName ) != attributes[ attName ] ) - continue; - element.removeAttribute( attName ); - } + // The 'class' element value must match (#1318). + if ( ( attName == 'class' || style._.definition.fullMatch ) + && element.getAttribute( attName ) != normalizeProperty( attName, attributes[ attName ] ) ) + continue; + removeEmpty = element.hasAttribute( attName ); + element.removeAttribute( attName ); } - // Remove definition attributes/style from the elemnt. - removeAttrs(); for ( var styleName in styles ) + { + // Full match style insist on having fully equivalence. (#5018) + if ( style._.definition.fullMatch + && element.getStyle( styleName ) != normalizeProperty( styleName, styles[ styleName ], true ) ) + continue; + + removeEmpty = removeEmpty || !!element.getStyle( styleName ); element.removeStyle( styleName ); + } - // Now remove override styles on the element. - attributes = overrides[ element.getName() ]; - if( attributes ) - removeAttrs(); - removeNoAttribsElement( element ); + if ( removeEmpty ) + { + !CKEDITOR.dtd.$block[ element.getName() ] || style._.enterMode == CKEDITOR.ENTER_BR && !element.hasAttributes() ? + removeNoAttribsElement( element ) : + element.renameNode( style._.enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ); + } } // Removes a style from inside an element. @@ -901,9 +1169,8 @@ CKEDITOR.STYLE_OBJECT = 3; var def = style._.definition, attribs = def.attributes, styles = def.styles, - overrides = getOverrides( style ); - - var innerElements = element.getElementsByTag( style.element ); + overrides = getOverrides( style ), + innerElements = element.getElementsByTag( style.element ); for ( var i = innerElements.count(); --i >= 0 ; ) removeFromElement( style, innerElements.getItem( i ) ); @@ -922,7 +1189,6 @@ CKEDITOR.STYLE_OBJECT = 3; } } } - } /** @@ -969,68 +1235,46 @@ CKEDITOR.STYLE_OBJECT = 3; // leaving its children. if ( !element.hasAttributes() ) { - // Removing elements may open points where merging is possible, - // so let's cache the first and last nodes for later checking. - var firstChild = element.getFirst(); - var lastChild = element.getLast(); - - element.remove( true ); - - if ( firstChild ) + if ( CKEDITOR.dtd.$block[ element.getName() ] ) { - // Check the cached nodes for merging. - mergeSiblings( firstChild ); - - if ( lastChild && !firstChild.equals( lastChild ) ) - mergeSiblings( lastChild ); - } - } - } - - function mergeSiblings( element ) - { - if ( !element || element.type != CKEDITOR.NODE_ELEMENT || !CKEDITOR.dtd.$removeEmpty[ element.getName() ] ) - return; + var previous = element.getPrevious( nonWhitespaces ), + next = element.getNext( nonWhitespaces ); - mergeElements( element, element.getNext(), true ); - mergeElements( element, element.getPrevious() ); - } + if ( previous && ( previous.type == CKEDITOR.NODE_TEXT || !previous.isBlockBoundary( { br : 1 } ) ) ) + element.append( 'br', 1 ); + if ( next && ( next.type == CKEDITOR.NODE_TEXT || !next.isBlockBoundary( { br : 1 } ) ) ) + element.append( 'br' ); - function mergeElements( element, sibling, isNext ) - { - if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT ) - { - var hasBookmark = sibling.getAttribute( '_fck_bookmark' ); - - if ( hasBookmark ) - sibling = isNext ? sibling.getNext() : sibling.getPrevious(); - - if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT && element.isIdentical( sibling ) ) + element.remove( true ); + } + else { - // Save the last child to be checked too, to merge things like - // => - var innerSibling = isNext ? element.getLast() : element.getFirst(); + // Removing elements may open points where merging is possible, + // so let's cache the first and last nodes for later checking. + var firstChild = element.getFirst(); + var lastChild = element.getLast(); + + element.remove( true ); - if ( hasBookmark ) - ( isNext ? sibling.getPrevious() : sibling.getNext() ).move( element, !isNext ); + if ( firstChild ) + { + // Check the cached nodes for merging. + firstChild.type == CKEDITOR.NODE_ELEMENT && firstChild.mergeSiblings(); - sibling.moveChildren( element, !isNext ); - sibling.remove(); + if ( lastChild && !firstChild.equals( lastChild ) + && lastChild.type == CKEDITOR.NODE_ELEMENT ) + lastChild.mergeSiblings(); + } - // Now check the last inner child (see two comments above). - if ( innerSibling ) - mergeSiblings( innerSibling ); } } } - function getElement( style, targetDocument ) + function getElement( style, targetDocument, element ) { - var el; - - var def = style._.definition; - - var elementName = style.element; + var el, + def = style._.definition, + elementName = style.element; // The "*" element name will always be a span for this function. if ( elementName == '*' ) @@ -1039,14 +1283,26 @@ CKEDITOR.STYLE_OBJECT = 3; // Create the element. el = new CKEDITOR.dom.element( elementName, targetDocument ); - return setupElement( el, style ); + // #6226: attributes should be copied before the new ones are applied + if ( element ) + element.copyAttributes( el ); + + el = setupElement( el, style ); + + // Avoid ID duplication. + if ( targetDocument.getCustomData( 'doc_processing_style' ) && el.hasAttribute( 'id' ) ) + el.removeAttribute( 'id' ); + else + targetDocument.setCustomData( 'doc_processing_style', 1 ); + + return el; } function setupElement( el, style ) { - var def = style._.definition; - var attributes = def.attributes; - var styles = CKEDITOR.style.getStyleText( def ); + var def = style._.definition, + attributes = def.attributes, + styles = CKEDITOR.style.getStyleText( def ); // Assign all defined attributes. if ( attributes ) @@ -1058,13 +1314,12 @@ CKEDITOR.STYLE_OBJECT = 3; } // Assign all defined styles. - if ( styles ) + if( styles ) el.setAttribute( 'style', styles ); return el; } - var varRegex = /#\((.+?)\)/g; function replaceVariables( list, variablesValues ) { for ( var item in list ) @@ -1076,7 +1331,6 @@ CKEDITOR.STYLE_OBJECT = 3; } } - // Returns an object that can be used for style matching comparison. // Attributes names and values are all lowercased, and the styles get // merged with the style attribute. @@ -1126,7 +1380,7 @@ CKEDITOR.STYLE_OBJECT = 3; */ function getOverrides( style ) { - if( style._.overrides ) + if ( style._.overrides ) return style._.overrides; var overrides = ( style._.overrides = {} ), @@ -1182,6 +1436,15 @@ CKEDITOR.STYLE_OBJECT = 3; return overrides; } + // Make the comparison of attribute value easier by standardizing it. + function normalizeProperty( name, value, isStyle ) + { + var temp = new CKEDITOR.dom.element( 'span' ); + temp [ isStyle ? 'setStyle' : 'setAttribute' ]( name, value ); + return temp[ isStyle ? 'getStyle' : 'getAttribute' ]( name ); + } + + // Make the comparison of style text easier by standardizing it. function normalizeCssText( unparsedCssText, nativeNormalize ) { var styleText; @@ -1191,32 +1454,91 @@ CKEDITOR.STYLE_OBJECT = 3; // retrieving its final format. var temp = new CKEDITOR.dom.element( 'span' ); temp.setAttribute( 'style', unparsedCssText ); - styleText = temp.getAttribute( 'style' ); + styleText = temp.getAttribute( 'style' ) || ''; } else styleText = unparsedCssText; + // Normalize font-family property, ignore quotes and being case insensitive. (#7322) + // http://www.w3.org/TR/css3-fonts/#font-family-the-font-family-property + styleText = styleText.replace( /(font-family:)(.*?)(?=;|$)/, function ( match, prop, val ) + { + var names = val.split( ',' ); + for ( var i = 0; i < names.length; i++ ) + names[ i ] = CKEDITOR.tools.trim( names[ i ].replace( /["']/g, '' ) ); + return prop + names.join( ',' ); + }); + // Shrinking white-spaces around colon and semi-colon (#4147). // Compensate tail semi-colon. return styleText.replace( /\s*([;:])\s*/, '$1' ) .replace( /([^\s;])$/, '$1;') - .replace( /,\s+/g, ',' ) // Trimming spaces after comma (e.g. font-family name)(#4107). + // Trimming spaces after comma(#4107), + // remove quotations(#6403), + // mostly for differences on "font-family". + .replace( /,\s+/g, ',' ) + .replace( /\"/g,'' ) .toLowerCase(); } - function applyStyle( document, remove ) + // Turn inline style text properties into one hash. + function parseStyleText( styleText ) + { + var retval = {}; + styleText + .replace( /"/g, '"' ) + .replace( /\s*([^ :;]+)\s*:\s*([^;]+)\s*(?=;|$)/g, function( match, name, value ) + { + retval[ name ] = value; + } ); + return retval; + } + + /** + * Compare two bunch of styles, with the speciality that value 'inherit' + * is treated as a wildcard which will match any value. + * @param {Object|String} source + * @param {Object|String} target + */ + function compareCssText( source, target ) { - // Get all ranges from the selection. - var selection = document.getSelection(); - var ranges = selection.getRanges(); - var func = remove ? this.removeFromRange : this.applyToRange; + typeof source == 'string' && ( source = parseStyleText( source ) ); + typeof target == 'string' && ( target = parseStyleText( target ) ); + for( var name in source ) + { + if ( !( name in target && + ( target[ name ] == source[ name ] + || source[ name ] == 'inherit' + || target[ name ] == 'inherit' ) ) ) + { + return false; + } + } + return true; + } - // Apply the style to the ranges. - for ( var i = 0 ; i < ranges.length ; i++ ) - func.call( this, ranges[ i ] ); + function applyStyle( document, remove ) + { + var selection = document.getSelection(), + // Bookmark the range so we can re-select it after processing. + bookmarks = selection.createBookmarks( 1 ), + ranges = selection.getRanges(), + func = remove ? this.removeFromRange : this.applyToRange, + range; + + var iterator = ranges.createIterator(); + while ( ( range = iterator.getNextRange() ) ) + func.call( this, range ); + + if ( bookmarks.length == 1 && bookmarks[ 0 ].collapsed ) + { + selection.selectRanges( ranges ); + document.getById( bookmarks[ 0 ].startNode ).remove(); + } + else + selection.selectBookmarks( bookmarks ); - // Select the ranges again. - selection.selectRanges( ranges ); + document.removeCustomData( 'doc_processing_style' ); } })(); @@ -1241,3 +1563,134 @@ CKEDITOR.styleCommand.prototype.exec = function( editor ) return !!doc; }; + +/** + * Manages styles registration and loading. See also {@link CKEDITOR.config.stylesSet}. + * @namespace + * @augments CKEDITOR.resourceManager + * @constructor + * @since 3.2 + * @example + * // The set of styles for the Styles combo + * CKEDITOR.stylesSet.add( 'default', + * [ + * // Block Styles + * { name : 'Blue Title' , element : 'h3', styles : { 'color' : 'Blue' } }, + * { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } }, + * + * // Inline Styles + * { name : 'Marker: Yellow' , element : 'span', styles : { 'background-color' : 'Yellow' } }, + * { name : 'Marker: Green' , element : 'span', styles : { 'background-color' : 'Lime' } }, + * + * // Object Styles + * { + * name : 'Image on Left', + * element : 'img', + * attributes : + * { + * 'style' : 'padding: 5px; margin-right: 5px', + * 'border' : '2', + * 'align' : 'left' + * } + * } + * ]); + */ +CKEDITOR.stylesSet = new CKEDITOR.resourceManager( '', 'stylesSet' ); + +// Backward compatibility (#5025). +CKEDITOR.addStylesSet = CKEDITOR.tools.bind( CKEDITOR.stylesSet.add, CKEDITOR.stylesSet ); +CKEDITOR.loadStylesSet = function( name, url, callback ) + { + CKEDITOR.stylesSet.addExternal( name, url, '' ); + CKEDITOR.stylesSet.load( name, callback ); + }; + + +/** + * Gets the current styleSet for this instance + * @param {Function} callback The function to be called with the styles data. + * @example + * editor.getStylesSet( function( stylesDefinitions ) {} ); + */ +CKEDITOR.editor.prototype.getStylesSet = function( callback ) +{ + if ( !this._.stylesDefinitions ) + { + var editor = this, + // Respect the backwards compatible definition entry + configStyleSet = editor.config.stylesCombo_stylesSet || editor.config.stylesSet || 'default'; + + // #5352 Allow to define the styles directly in the config object + if ( configStyleSet instanceof Array ) + { + editor._.stylesDefinitions = configStyleSet; + callback( configStyleSet ); + return; + } + + var partsStylesSet = configStyleSet.split( ':' ), + styleSetName = partsStylesSet[ 0 ], + externalPath = partsStylesSet[ 1 ], + pluginPath = CKEDITOR.plugins.registered.styles.path; + + CKEDITOR.stylesSet.addExternal( styleSetName, + externalPath ? + partsStylesSet.slice( 1 ).join( ':' ) : + pluginPath + 'styles/' + styleSetName + '.js', '' ); + + CKEDITOR.stylesSet.load( styleSetName, function( stylesSet ) + { + editor._.stylesDefinitions = stylesSet[ styleSetName ]; + callback( editor._.stylesDefinitions ); + } ) ; + } + else + callback( this._.stylesDefinitions ); +}; + +/** + * Indicates that fully selected read-only elements will be included when + * applying the style (for inline styles only). + * @name CKEDITOR.style.includeReadonly + * @type Boolean + * @default false + * @since 3.5 + */ + + /** + * Disables inline styling on read-only elements. + * @name CKEDITOR.config.disableReadonlyStyling + * @type Boolean + * @default false + * @since 3.5 + */ + +/** + * The "styles definition set" to use in the editor. They will be used in the + * styles combo and the Style selector of the div container.
+ * The styles may be defined in the page containing the editor, or can be + * loaded on demand from an external file. In the second case, if this setting + * contains only a name, the styles definition file will be loaded from the + * "styles" folder inside the styles plugin folder. + * Otherwise, this setting has the "name:url" syntax, making it + * possible to set the URL from which loading the styles file.
+ * Previously this setting was available as config.stylesCombo_stylesSet
+ * @name CKEDITOR.config.stylesSet + * @type String|Array + * @default 'default' + * @since 3.3 + * @example + * // Load from the styles' styles folder (mystyles.js file). + * config.stylesSet = 'mystyles'; + * @example + * // Load from a relative URL. + * config.stylesSet = 'mystyles:/editorstyles/styles.js'; + * @example + * // Load from a full URL. + * config.stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js'; + * @example + * // Load from a list of definitions. + * config.stylesSet = [ + * { name : 'Strong Emphasis', element : 'strong' }, + * { name : 'Emphasis', element : 'em' }, ... ]; + */