2 * Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 * For licensing, see LICENSE.html or http://ckeditor.com/license
\r
10 * Add to collection with DUP examination.
\r
11 * @param {Object} collection
\r
12 * @param {Object} element
\r
13 * @param {Object} database
\r
15 function addSafely( collection, element, database )
\r
17 // 1. IE doesn't support customData on text nodes;
\r
18 // 2. Text nodes never get chance to appear twice;
\r
19 if ( !element.is || !element.getCustomData( 'block_processed' ) )
\r
21 element.is && CKEDITOR.dom.element.setMarker( database, element, 'block_processed', true );
\r
22 collection.push( element );
\r
26 function getNonEmptyChildren( element )
\r
29 var children = element.getChildren();
\r
30 for( var i = 0 ; i < children.count() ; i++ )
\r
32 var child = children.getItem( i );
\r
33 if( ! ( child.type === CKEDITOR.NODE_TEXT
\r
34 && ( /^[ \t\n\r]+$/ ).test( child.getText() ) ) )
\r
35 retval.push( child );
\r
42 * Dialog reused by both 'creatediv' and 'editdiv' commands.
\r
43 * @param {Object} editor
\r
44 * @param {String} command The command name which indicate what the current command is.
\r
46 function divDialog( editor, command )
\r
48 // Definition of elements at which div operation should stopped.
\r
49 var divLimitDefinition = ( function(){
\r
51 // Customzie from specialize blockLimit elements
\r
52 var definition = CKEDITOR.tools.extend( {}, CKEDITOR.dtd.$blockLimit );
\r
54 // Exclude 'div' itself.
\r
55 delete definition.div;
\r
57 // Exclude 'td' and 'th' when 'wrapping table'
\r
58 if( editor.config.div_wrapTable )
\r
60 delete definition.td;
\r
61 delete definition.th;
\r
66 // DTD of 'div' element
\r
67 var dtd = CKEDITOR.dtd.div;
\r
70 * Get the first div limit element on the element's path.
\r
71 * @param {Object} element
\r
73 function getDivLimitElement( element )
\r
75 var pathElements = new CKEDITOR.dom.elementPath( element ).elements;
\r
77 for ( var i = 0; i < pathElements.length ; i++ )
\r
79 if ( pathElements[ i ].getName() in divLimitDefinition )
\r
81 divLimit = pathElements[ i ];
\r
89 * Init all fields' setup/commit function.
\r
90 * @memberof divDialog
\r
92 function setupFields()
\r
94 this.foreach( function( field )
\r
96 // Exclude layout container elements
\r
97 if( /^(?!vbox|hbox)/.test( field.type ) )
\r
101 // Read the dialog fields values from the specified
\r
102 // element attributes.
\r
103 field.setup = function( element )
\r
105 field.setValue( element.getAttribute( field.id ) || '' );
\r
108 if ( !field.commit )
\r
110 // Set element attributes assigned by the dialog
\r
112 field.commit = function( element )
\r
114 var fieldValue = this.getValue();
\r
115 // ignore default element attribute values
\r
116 if ( 'dir' == field.id && element.getComputedStyle( 'direction' ) == fieldValue )
\r
120 element.setAttribute( field.id, fieldValue );
\r
122 element.removeAttribute( field.id );
\r
130 * Wrapping 'div' element around appropriate blocks among the selected ranges.
\r
131 * @param {Object} editor
\r
133 function createDiv( editor )
\r
135 // new adding containers OR detected pre-existed containers.
\r
136 var containers = [];
\r
137 // node markers store.
\r
139 // All block level elements which contained by the ranges.
\r
140 var containedBlocks = [], block;
\r
142 // Get all ranges from the selection.
\r
143 var selection = editor.document.getSelection();
\r
144 var ranges = selection.getRanges();
\r
145 var bookmarks = selection.createBookmarks();
\r
148 // Calcualte a default block tag if we need to create blocks.
\r
149 var blockTag = editor.config.enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p';
\r
151 // collect all included elements from dom-iterator
\r
152 for( i = 0 ; i < ranges.length ; i++ )
\r
154 iterator = ranges[ i ].createIterator();
\r
155 while( ( block = iterator.getNextParagraph() ) )
\r
157 // include contents of blockLimit elements.
\r
158 if( block.getName() in divLimitDefinition )
\r
160 var j, childNodes = block.getChildren();
\r
161 for ( j = 0 ; j < childNodes.count() ; j++ )
\r
162 addSafely( containedBlocks, childNodes.getItem( j ) , database );
\r
166 // Bypass dtd disallowed elements.
\r
167 while( !dtd[ block.getName() ] && block.getName() != 'body' )
\r
168 block = block.getParent();
\r
169 addSafely( containedBlocks, block, database );
\r
174 CKEDITOR.dom.element.clearAllMarkers( database );
\r
176 var blockGroups = groupByDivLimit( containedBlocks );
\r
177 var ancestor, blockEl, divElement;
\r
179 for( i = 0 ; i < blockGroups.length ; i++ )
\r
181 var currentNode = blockGroups[ i ][ 0 ];
\r
183 // Calculate the common parent node of all contained elements.
\r
184 ancestor = currentNode.getParent();
\r
185 for ( j = 1 ; j < blockGroups[ i ].length; j++ )
\r
186 ancestor = ancestor.getCommonAncestor( blockGroups[ i ][ j ] );
\r
188 divElement = new CKEDITOR.dom.element( 'div', editor.document );
\r
190 // Normalize the blocks in each group to a common parent.
\r
191 for( j = 0; j < blockGroups[ i ].length ; j++ )
\r
193 currentNode = blockGroups[ i ][ j ];
\r
195 while( !currentNode.getParent().equals( ancestor ) )
\r
196 currentNode = currentNode.getParent();
\r
198 // This could introduce some duplicated elements in array.
\r
199 blockGroups[ i ][ j ] = currentNode;
\r
202 // Wrapped blocks counting
\r
203 var fixedBlock = null;
\r
204 for ( j = 0 ; j < blockGroups[ i ].length ; j++ )
\r
206 currentNode = blockGroups[ i ][ j ];
\r
208 // Avoid DUP elements introduced by grouping.
\r
209 if ( !( currentNode.getCustomData && currentNode.getCustomData( 'block_processed' ) ) )
\r
211 currentNode.is && CKEDITOR.dom.element.setMarker( database, currentNode, 'block_processed', true );
\r
213 // Establish new container, wrapping all elements in this group.
\r
215 divElement.insertBefore( currentNode );
\r
217 divElement.append( currentNode );
\r
221 CKEDITOR.dom.element.clearAllMarkers( database );
\r
222 containers.push( divElement );
\r
225 selection.selectBookmarks( bookmarks );
\r
229 function getDiv( editor )
\r
231 var path = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() ),
\r
232 blockLimit = path.blockLimit,
\r
233 div = blockLimit && blockLimit.getAscendant( 'div', true );
\r
237 * Divide a set of nodes to different groups by their path's blocklimit element.
\r
238 * Note: the specified nodes should be in source order naturally, which mean they are supposed to producea by following class:
\r
239 * * CKEDITOR.dom.range.Iterator
\r
240 * * CKEDITOR.dom.domWalker
\r
241 * @return {Array []} the grouped nodes
\r
243 function groupByDivLimit( nodes )
\r
246 lastDivLimit = null,
\r
248 for ( var i = 0 ; i < nodes.length ; i++ )
\r
251 var limit = getDivLimitElement( block );
\r
252 if ( !limit.equals( lastDivLimit ) )
\r
254 lastDivLimit = limit ;
\r
255 groups.push( [] ) ;
\r
257 groups[ groups.length - 1 ].push( block ) ;
\r
263 * Hold a collection of created block container elements.
\r
265 var containers = [];
\r
270 title : editor.lang.div.title,
\r
277 label :editor.lang.common.generalTab,
\r
278 title :editor.lang.common.generalTab,
\r
283 widths : [ '50%', '50%' ],
\r
287 id :'elementStyle',
\r
289 style :'width: 100%;',
\r
290 label :editor.lang.div.styleSelectLabel,
\r
293 setup : function( element )
\r
295 this.setValue( element.$.style.cssText || '' );
\r
297 commit: function( element )
\r
299 if ( this.getValue() )
\r
300 element.$.style.cssText = this.getValue();
\r
302 element.removeAttribute( 'style' );
\r
308 label :editor.lang.common.cssClass,
\r
317 label :editor.lang.common.advancedTab,
\r
318 title :editor.lang.common.advancedTab,
\r
328 widths : [ '50%', '50%' ],
\r
334 label :editor.lang.common.id,
\r
340 label :editor.lang.link.langCode,
\r
352 style :'width: 100%;',
\r
353 label :editor.lang.common.cssStyle,
\r
365 style :'width: 100%;',
\r
366 label :editor.lang.common.advisoryTitle,
\r
374 style :'width: 100%;',
\r
375 label :editor.lang.common.langDir,
\r
380 editor.lang.common.langDirLtr,
\r
384 editor.lang.common.langDirRtl,
\r
394 onLoad : function()
\r
396 setupFields.call(this);
\r
398 onShow : function()
\r
400 // Whether always create new container regardless of existed
\r
402 if ( command == 'editdiv' )
\r
404 // Try to discover the containers that already existed in
\r
406 var div = getDiv( editor );
\r
407 // update dialog field values
\r
408 div && this.setupContent( this._element = div );
\r
413 if( command == 'editdiv' )
\r
414 containers = [ this._element ];
\r
416 containers = createDiv( editor, true );
\r
418 // Update elements attributes
\r
419 for( var i = 0 ; i < containers.length ; i++ )
\r
420 this.commitContent( containers[ i ] );
\r
426 CKEDITOR.dialog.add( 'creatediv', function( editor )
\r
428 return divDialog( editor, 'creatediv' );
\r
430 CKEDITOR.dialog.add( 'editdiv', function( editor )
\r
432 return divDialog( editor, 'editdiv' );
\r
437 * @name CKEDITOR.config.div_wrapTable
\r
438 * Whether to wrap the whole table instead of indivisual cells when created 'div' in table cell.
\r
441 * @example config.div_wrapTable = true;
\r