1 /* 2 * Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. 3 * For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 (function() 7 { 8 9 /** 10 * Add to collection with DUP examination. 11 * @param {Object} collection 12 * @param {Object} element 13 * @param {Object} database 14 */ 15 function addSafely( collection, element, database ) 16 { 17 // 1. IE doesn't support customData on text nodes; 18 // 2. Text nodes never get chance to appear twice; 19 if ( !element.is || !element.getCustomData( 'block_processed' ) ) 20 { 21 element.is && CKEDITOR.dom.element.setMarker( database, element, 'block_processed', true ); 22 collection.push( element ); 23 } 24 } 25 26 function getNonEmptyChildren( element ) 27 { 28 var retval = []; 29 var children = element.getChildren(); 30 for ( var i = 0 ; i < children.count() ; i++ ) 31 { 32 var child = children.getItem( i ); 33 if ( ! ( child.type === CKEDITOR.NODE_TEXT 34 && ( /^[ \t\n\r]+$/ ).test( child.getText() ) ) ) 35 retval.push( child ); 36 } 37 return retval; 38 } 39 40 41 /** 42 * Dialog reused by both 'creatediv' and 'editdiv' commands. 43 * @param {Object} editor 44 * @param {String} command The command name which indicate what the current command is. 45 */ 46 function divDialog( editor, command ) 47 { 48 // Definition of elements at which div operation should stopped. 49 var divLimitDefinition = ( function(){ 50 51 // Customzie from specialize blockLimit elements 52 var definition = CKEDITOR.tools.extend( {}, CKEDITOR.dtd.$blockLimit ); 53 54 // Exclude 'div' itself. 55 delete definition.div; 56 57 // Exclude 'td' and 'th' when 'wrapping table' 58 if ( editor.config.div_wrapTable ) 59 { 60 delete definition.td; 61 delete definition.th; 62 } 63 return definition; 64 })(); 65 66 // DTD of 'div' element 67 var dtd = CKEDITOR.dtd.div; 68 69 /** 70 * Get the first div limit element on the element's path. 71 * @param {Object} element 72 */ 73 function getDivLimitElement( element ) 74 { 75 var pathElements = new CKEDITOR.dom.elementPath( element ).elements; 76 var divLimit; 77 for ( var i = 0; i < pathElements.length ; i++ ) 78 { 79 if ( pathElements[ i ].getName() in divLimitDefinition ) 80 { 81 divLimit = pathElements[ i ]; 82 break; 83 } 84 } 85 return divLimit; 86 } 87 88 /** 89 * Init all fields' setup/commit function. 90 * @memberof divDialog 91 */ 92 function setupFields() 93 { 94 this.foreach( function( field ) 95 { 96 // Exclude layout container elements 97 if ( /^(?!vbox|hbox)/.test( field.type ) ) 98 { 99 if ( !field.setup ) 100 { 101 // Read the dialog fields values from the specified 102 // element attributes. 103 field.setup = function( element ) 104 { 105 field.setValue( element.getAttribute( field.id ) || '' ); 106 }; 107 } 108 if ( !field.commit ) 109 { 110 // Set element attributes assigned by the dialog 111 // fields. 112 field.commit = function( element ) 113 { 114 var fieldValue = this.getValue(); 115 // ignore default element attribute values 116 if ( 'dir' == field.id && element.getComputedStyle( 'direction' ) == fieldValue ) 117 return; 118 119 if ( fieldValue ) 120 element.setAttribute( field.id, fieldValue ); 121 else 122 element.removeAttribute( field.id ); 123 }; 124 } 125 } 126 } ); 127 } 128 129 /** 130 * Wrapping 'div' element around appropriate blocks among the selected ranges. 131 * @param {Object} editor 132 */ 133 function createDiv( editor ) 134 { 135 // new adding containers OR detected pre-existed containers. 136 var containers = []; 137 // node markers store. 138 var database = {}; 139 // All block level elements which contained by the ranges. 140 var containedBlocks = [], block; 141 142 // Get all ranges from the selection. 143 var selection = editor.document.getSelection(), 144 ranges = selection.getRanges(); 145 var bookmarks = selection.createBookmarks(); 146 var i, iterator; 147 148 // Calcualte a default block tag if we need to create blocks. 149 var blockTag = editor.config.enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p'; 150 151 // collect all included elements from dom-iterator 152 for ( i = 0 ; i < ranges.length ; i++ ) 153 { 154 iterator = ranges[ i ].createIterator(); 155 while ( ( block = iterator.getNextParagraph() ) ) 156 { 157 // include contents of blockLimit elements. 158 if ( block.getName() in divLimitDefinition ) 159 { 160 var j, childNodes = block.getChildren(); 161 for ( j = 0 ; j < childNodes.count() ; j++ ) 162 addSafely( containedBlocks, childNodes.getItem( j ) , database ); 163 } 164 else 165 { 166 // Bypass dtd disallowed elements. 167 while ( !dtd[ block.getName() ] && block.getName() != 'body' ) 168 block = block.getParent(); 169 addSafely( containedBlocks, block, database ); 170 } 171 } 172 } 173 174 CKEDITOR.dom.element.clearAllMarkers( database ); 175 176 var blockGroups = groupByDivLimit( containedBlocks ); 177 var ancestor, blockEl, divElement; 178 179 for ( i = 0 ; i < blockGroups.length ; i++ ) 180 { 181 var currentNode = blockGroups[ i ][ 0 ]; 182 183 // Calculate the common parent node of all contained elements. 184 ancestor = currentNode.getParent(); 185 for ( j = 1 ; j < blockGroups[ i ].length; j++ ) 186 ancestor = ancestor.getCommonAncestor( blockGroups[ i ][ j ] ); 187 188 divElement = new CKEDITOR.dom.element( 'div', editor.document ); 189 190 // Normalize the blocks in each group to a common parent. 191 for ( j = 0; j < blockGroups[ i ].length ; j++ ) 192 { 193 currentNode = blockGroups[ i ][ j ]; 194 195 while ( !currentNode.getParent().equals( ancestor ) ) 196 currentNode = currentNode.getParent(); 197 198 // This could introduce some duplicated elements in array. 199 blockGroups[ i ][ j ] = currentNode; 200 } 201 202 // Wrapped blocks counting 203 var fixedBlock = null; 204 for ( j = 0 ; j < blockGroups[ i ].length ; j++ ) 205 { 206 currentNode = blockGroups[ i ][ j ]; 207 208 // Avoid DUP elements introduced by grouping. 209 if ( !( currentNode.getCustomData && currentNode.getCustomData( 'block_processed' ) ) ) 210 { 211 currentNode.is && CKEDITOR.dom.element.setMarker( database, currentNode, 'block_processed', true ); 212 213 // Establish new container, wrapping all elements in this group. 214 if ( !j ) 215 divElement.insertBefore( currentNode ); 216 217 divElement.append( currentNode ); 218 } 219 } 220 221 CKEDITOR.dom.element.clearAllMarkers( database ); 222 containers.push( divElement ); 223 } 224 225 selection.selectBookmarks( bookmarks ); 226 return containers; 227 } 228 229 function getDiv( editor ) 230 { 231 var path = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() ), 232 blockLimit = path.blockLimit, 233 div = blockLimit && blockLimit.getAscendant( 'div', true ); 234 return div; 235 } 236 /** 237 * Divide a set of nodes to different groups by their path's blocklimit element. 238 * Note: the specified nodes should be in source order naturally, which mean they are supposed to producea by following class: 239 * * CKEDITOR.dom.range.Iterator 240 * * CKEDITOR.dom.domWalker 241 * @return {Array []} the grouped nodes 242 */ 243 function groupByDivLimit( nodes ) 244 { 245 var groups = [], 246 lastDivLimit = null, 247 path, block; 248 for ( var i = 0 ; i < nodes.length ; i++ ) 249 { 250 block = nodes[i]; 251 var limit = getDivLimitElement( block ); 252 if ( !limit.equals( lastDivLimit ) ) 253 { 254 lastDivLimit = limit ; 255 groups.push( [] ) ; 256 } 257 groups[ groups.length - 1 ].push( block ) ; 258 } 259 return groups; 260 } 261 262 // Synchronous field values to other impacted fields is required, e.g. div styles 263 // change should also alter inline-style text. 264 function commitInternally( targetFields ) 265 { 266 var dialog = this.getDialog(), 267 element = dialog._element && dialog._element.clone() 268 || new CKEDITOR.dom.element( 'div', editor.document ); 269 270 // Commit this field and broadcast to target fields. 271 this.commit( element, true ); 272 273 targetFields = [].concat( targetFields ); 274 var length = targetFields.length, field; 275 for ( var i = 0; i < length; i++ ) 276 { 277 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); 278 field && field.setup && field.setup( element, true ); 279 } 280 } 281 282 283 // Registered 'CKEDITOR.style' instances. 284 var styles = {} ; 285 /** 286 * Hold a collection of created block container elements. 287 */ 288 var containers = []; 289 /** 290 * @type divDialog 291 */ 292 return { 293 title : editor.lang.div.title, 294 minWidth : 400, 295 minHeight : 165, 296 contents : 297 [ 298 { 299 id :'info', 300 label :editor.lang.common.generalTab, 301 title :editor.lang.common.generalTab, 302 elements : 303 [ 304 { 305 type :'hbox', 306 widths : [ '50%', '50%' ], 307 children : 308 [ 309 { 310 id :'elementStyle', 311 type :'select', 312 style :'width: 100%;', 313 label :editor.lang.div.styleSelectLabel, 314 'default' : '', 315 // Options are loaded dynamically. 316 items : 317 [ 318 [ editor.lang.common.notSet , '' ] 319 ], 320 onChange : function() 321 { 322 commitInternally.call( this, [ 'info:class', 'advanced:dir', 'advanced:style' ] ); 323 }, 324 setup : function( element ) 325 { 326 for ( var name in styles ) 327 styles[ name ].checkElementRemovable( element, true ) && this.setValue( name ); 328 }, 329 commit: function( element ) 330 { 331 var styleName; 332 if ( ( styleName = this.getValue() ) ) 333 { 334 var style = styles[ styleName ]; 335 var customData = element.getCustomData( 'elementStyle' ) || ''; 336 337 style.applyToObject( element ); 338 element.setCustomData( 'elementStyle', customData + style._.definition.attributes.style ); 339 } 340 } 341 }, 342 { 343 id :'class', 344 type :'text', 345 label :editor.lang.common.cssClass, 346 'default' : '' 347 } 348 ] 349 } 350 ] 351 }, 352 { 353 id :'advanced', 354 label :editor.lang.common.advancedTab, 355 title :editor.lang.common.advancedTab, 356 elements : 357 [ 358 { 359 type :'vbox', 360 padding :1, 361 children : 362 [ 363 { 364 type :'hbox', 365 widths : [ '50%', '50%' ], 366 children : 367 [ 368 { 369 type :'text', 370 id :'id', 371 label :editor.lang.common.id, 372 'default' : '' 373 }, 374 { 375 type :'text', 376 id :'lang', 377 label :editor.lang.link.langCode, 378 'default' : '' 379 } 380 ] 381 }, 382 { 383 type :'hbox', 384 children : 385 [ 386 { 387 type :'text', 388 id :'style', 389 style :'width: 100%;', 390 label :editor.lang.common.cssStyle, 391 'default' : '', 392 commit : function( element ) 393 { 394 // Merge with 'elementStyle', which is of higher priority. 395 var merged = this.getValue() + ( element.getCustomData( 'elementStyle' ) || '' ); 396 element.setAttribute( 'style', merged ); 397 } 398 } 399 ] 400 }, 401 { 402 type :'hbox', 403 children : 404 [ 405 { 406 type :'text', 407 id :'title', 408 style :'width: 100%;', 409 label :editor.lang.common.advisoryTitle, 410 'default' : '' 411 } 412 ] 413 }, 414 { 415 type :'select', 416 id :'dir', 417 style :'width: 100%;', 418 label :editor.lang.common.langDir, 419 'default' : '', 420 items : 421 [ 422 [ editor.lang.common.notSet , '' ], 423 [ 424 editor.lang.common.langDirLtr, 425 'ltr' 426 ], 427 [ 428 editor.lang.common.langDirRtl, 429 'rtl' 430 ] 431 ] 432 } 433 ] 434 } 435 ] 436 } 437 ], 438 onLoad : function() 439 { 440 setupFields.call( this ); 441 442 // Preparing for the 'elementStyle' field. 443 var dialog = this, 444 stylesField = this.getContentElement( 'info', 'elementStyle' ); 445 446 // Reuse the 'stylescombo' plugin's styles definition. 447 editor.getStylesSet( function( stylesDefinitions ) 448 { 449 var styleName; 450 451 if ( stylesDefinitions ) 452 { 453 // Digg only those styles that apply to 'div'. 454 for ( var i = 0 ; i < stylesDefinitions.length ; i++ ) 455 { 456 var styleDefinition = stylesDefinitions[ i ]; 457 if ( styleDefinition.element && styleDefinition.element == 'div' ) 458 { 459 styleName = styleDefinition.name; 460 styles[ styleName ] = new CKEDITOR.style( styleDefinition ); 461 462 // Populate the styles field options with style name. 463 stylesField.items.push( [ styleName, styleName ] ); 464 stylesField.add( styleName, styleName ); 465 } 466 } 467 } 468 469 // We should disable the content element 470 // it if no options are available at all. 471 stylesField[ stylesField.items.length > 1 ? 'enable' : 'disable' ](); 472 473 // Now setup the field value manually. 474 setTimeout( function() { stylesField.setup( dialog._element ); }, 0 ); 475 } ); 476 }, 477 onShow : function() 478 { 479 // Whether always create new container regardless of existed 480 // ones. 481 if ( command == 'editdiv' ) 482 { 483 // Try to discover the containers that already existed in 484 // ranges 485 var div = getDiv( editor ); 486 // update dialog field values 487 div && this.setupContent( this._element = div ); 488 } 489 }, 490 onOk : function() 491 { 492 if ( command == 'editdiv' ) 493 containers = [ this._element ]; 494 else 495 containers = createDiv( editor, true ); 496 497 // Update elements attributes 498 var size = containers.length; 499 for ( var i = 0; i < size; i++ ) 500 { 501 this.commitContent( containers[ i ] ); 502 503 // Remove empty 'style' attribute. 504 !containers[ i ].getAttribute( 'style' ) && containers[ i ].removeAttribute( 'style' ); 505 } 506 507 this.hide(); 508 }, 509 onHide : function() 510 { 511 // Remove style only when editing existing DIV. (#6315) 512 if ( command == 'editdiv' ) 513 this._element.removeCustomData( 'elementStyle' ); 514 delete this._element; 515 } 516 }; 517 } 518 519 CKEDITOR.dialog.add( 'creatediv', function( editor ) 520 { 521 return divDialog( editor, 'creatediv' ); 522 } ); 523 CKEDITOR.dialog.add( 'editdiv', function( editor ) 524 { 525 return divDialog( editor, 'editdiv' ); 526 } ); 527 } )(); 528 529 /* 530 * @name CKEDITOR.config.div_wrapTable 531 * Whether to wrap the whole table instead of indivisual cells when created 'div' in table cell. 532 * @type Boolean 533 * @default false 534 * @example config.div_wrapTable = true; 535 */ 536