_source/plugins/enterkey/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         CKEDITOR.plugins.add( 'enterkey',\r
   9         {\r
  10                 requires : [ 'keystrokes', 'indent' ],\r
  11 \r
  12                 init : function( editor )\r
  13                 {\r
  14                         editor.addCommand( 'enter', {\r
  15                                 modes : { wysiwyg:1 },\r
  16                                 editorFocus : false,\r
  17                                 exec : function( editor ){ enter( editor ); }\r
  18                         });\r
  19 \r
  20                         editor.addCommand( 'shiftEnter', {\r
  21                                 modes : { wysiwyg:1 },\r
  22                                 editorFocus : false,\r
  23                                 exec : function( editor ){ shiftEnter( editor ); }\r
  24                         });\r
  25 \r
  26                         var keystrokes = editor.keystrokeHandler.keystrokes;\r
  27                         keystrokes[ 13 ] = 'enter';\r
  28                         keystrokes[ CKEDITOR.SHIFT + 13 ] = 'shiftEnter';\r
  29                 }\r
  30         });\r
  31 \r
  32         CKEDITOR.plugins.enterkey =\r
  33         {\r
  34                 enterBlock : function( editor, mode, range, forceMode )\r
  35                 {\r
  36                         // Get the range for the current selection.\r
  37                         range = range || getRange( editor );\r
  38 \r
  39                         // We may not have valid ranges to work on, like when inside a\r
  40                         // contenteditable=false element.\r
  41                         if ( !range )\r
  42                                 return;\r
  43 \r
  44                         var doc = range.document;\r
  45 \r
  46                         var atBlockStart = range.checkStartOfBlock(),\r
  47                                 atBlockEnd = range.checkEndOfBlock(),\r
  48                                 path = new CKEDITOR.dom.elementPath( range.startContainer ),\r
  49                                 block = path.block;\r
  50 \r
  51                         if ( atBlockStart && atBlockEnd )\r
  52                         {\r
  53                                 // Exit the list when we're inside an empty list item block. (#5376)\r
  54                                 if ( block && ( block.is( 'li' ) || block.getParent().is( 'li' ) ) )\r
  55                                 {\r
  56                                         editor.execCommand( 'outdent' );\r
  57                                         return;\r
  58                                 }\r
  59 \r
  60                                 if ( block && block.getParent().is( 'blockquote' ) )\r
  61                                 {\r
  62                                         block.breakParent( block.getParent() );\r
  63 \r
  64                                         // If we were at the start of <blockquote>, there will be an empty element before it now.\r
  65                                         if ( !block.getPrevious().getFirst( CKEDITOR.dom.walker.invisible(1) ) )\r
  66                                                 block.getPrevious().remove();\r
  67 \r
  68                                         // If we were at the end of <blockquote>, there will be an empty element after it now.\r
  69                                         if ( !block.getNext().getFirst( CKEDITOR.dom.walker.invisible(1) ) )\r
  70                                                 block.getNext().remove();\r
  71 \r
  72                                         range.moveToElementEditStart( block );\r
  73                                         range.select();\r
  74                                         return;\r
  75                                 }\r
  76                         }\r
  77                         // Don't split <pre> if we're in the middle of it, act as shift enter key.\r
  78                         else if ( block && block.is( 'pre' ) )\r
  79                         {\r
  80                                 if ( !atBlockEnd )\r
  81                                 {\r
  82                                         enterBr( editor, mode, range, forceMode );\r
  83                                         return;\r
  84                                 }\r
  85                         }\r
  86                         // Don't split caption blocks. (#7944)\r
  87                         else if ( block && CKEDITOR.dtd.$captionBlock[ block.getName() ] )\r
  88                         {\r
  89                                 enterBr( editor, mode, range, forceMode );\r
  90                                 return;\r
  91                         }\r
  92 \r
  93                         // Determine the block element to be used.\r
  94                         var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );\r
  95 \r
  96                         // Split the range.\r
  97                         var splitInfo = range.splitBlock( blockTag );\r
  98 \r
  99                         if ( !splitInfo )\r
 100                                 return;\r
 101 \r
 102                         // Get the current blocks.\r
 103                         var previousBlock       = splitInfo.previousBlock,\r
 104                                 nextBlock               = splitInfo.nextBlock;\r
 105 \r
 106                         var isStartOfBlock      = splitInfo.wasStartOfBlock,\r
 107                                 isEndOfBlock    = splitInfo.wasEndOfBlock;\r
 108 \r
 109                         var node;\r
 110 \r
 111                         // If this is a block under a list item, split it as well. (#1647)\r
 112                         if ( nextBlock )\r
 113                         {\r
 114                                 node = nextBlock.getParent();\r
 115                                 if ( node.is( 'li' ) )\r
 116                                 {\r
 117                                         nextBlock.breakParent( node );\r
 118                                         nextBlock.move( nextBlock.getNext(), 1 );\r
 119                                 }\r
 120                         }\r
 121                         else if ( previousBlock && ( node = previousBlock.getParent() ) && node.is( 'li' ) )\r
 122                         {\r
 123                                 previousBlock.breakParent( node );\r
 124                                 node = previousBlock.getNext();\r
 125                                 range.moveToElementEditStart( node );\r
 126                                 previousBlock.move( previousBlock.getPrevious() );\r
 127                         }\r
 128 \r
 129                         // If we have both the previous and next blocks, it means that the\r
 130                         // boundaries were on separated blocks, or none of them where on the\r
 131                         // block limits (start/end).\r
 132                         if ( !isStartOfBlock && !isEndOfBlock )\r
 133                         {\r
 134                                 // If the next block is an <li> with another list tree as the first\r
 135                                 // child, we'll need to append a filler (<br>/NBSP) or the list item\r
 136                                 // wouldn't be editable. (#1420)\r
 137                                 if ( nextBlock.is( 'li' )\r
 138                                          && ( node = nextBlock.getFirst( CKEDITOR.dom.walker.invisible( true ) ) )\r
 139                                          && node.is && node.is( 'ul', 'ol' ) )\r
 140                                         ( CKEDITOR.env.ie ? doc.createText( '\xa0' ) : doc.createElement( 'br' ) ).insertBefore( node );\r
 141 \r
 142                                 // Move the selection to the end block.\r
 143                                 if ( nextBlock )\r
 144                                         range.moveToElementEditStart( nextBlock );\r
 145                         }\r
 146                         else\r
 147                         {\r
 148                                 var newBlock,\r
 149                                         newBlockDir;\r
 150 \r
 151                                 if ( previousBlock )\r
 152                                 {\r
 153                                         // Do not enter this block if it's a header tag, or we are in\r
 154                                         // a Shift+Enter (#77). Create a new block element instead\r
 155                                         // (later in the code).\r
 156                                         if ( previousBlock.is( 'li' ) ||\r
 157                                                         ! ( headerTagRegex.test( previousBlock.getName() ) || previousBlock.is( 'pre' ) ) )\r
 158                                         {\r
 159                                                 // Otherwise, duplicate the previous block.\r
 160                                                 newBlock = previousBlock.clone();\r
 161                                         }\r
 162                                 }\r
 163                                 else if ( nextBlock )\r
 164                                         newBlock = nextBlock.clone();\r
 165 \r
 166                                 if ( !newBlock )\r
 167                                 {\r
 168                                         // We have already created a new list item. (#6849)\r
 169                                         if ( node && node.is( 'li' ) )\r
 170                                                 newBlock = node;\r
 171                                         else\r
 172                                         {\r
 173                                                 newBlock = doc.createElement( blockTag );\r
 174                                                 if ( previousBlock && ( newBlockDir = previousBlock.getDirection() ) )\r
 175                                                         newBlock.setAttribute( 'dir', newBlockDir );\r
 176                                         }\r
 177                                 }\r
 178                                 // Force the enter block unless we're talking of a list item.\r
 179                                 else if ( forceMode && !newBlock.is( 'li' ) )\r
 180                                         newBlock.renameNode( blockTag );\r
 181 \r
 182                                 // Recreate the inline elements tree, which was available\r
 183                                 // before hitting enter, so the same styles will be available in\r
 184                                 // the new block.\r
 185                                 var elementPath = splitInfo.elementPath;\r
 186                                 if ( elementPath )\r
 187                                 {\r
 188                                         for ( var i = 0, len = elementPath.elements.length ; i < len ; i++ )\r
 189                                         {\r
 190                                                 var element = elementPath.elements[ i ];\r
 191 \r
 192                                                 if ( element.equals( elementPath.block ) || element.equals( elementPath.blockLimit ) )\r
 193                                                         break;\r
 194 \r
 195                                                 if ( CKEDITOR.dtd.$removeEmpty[ element.getName() ] )\r
 196                                                 {\r
 197                                                         element = element.clone();\r
 198                                                         newBlock.moveChildren( element );\r
 199                                                         newBlock.append( element );\r
 200                                                 }\r
 201                                         }\r
 202                                 }\r
 203 \r
 204                                 if ( !CKEDITOR.env.ie )\r
 205                                         newBlock.appendBogus();\r
 206 \r
 207                                 if ( !newBlock.getParent() )\r
 208                                         range.insertNode( newBlock );\r
 209 \r
 210                                 // list item start number should not be duplicated (#7330), but we need\r
 211                                 // to remove the attribute after it's onto the DOM tree because of old IEs (#7581).\r
 212                                 newBlock.is( 'li' ) && newBlock.removeAttribute( 'value' );\r
 213 \r
 214                                 // This is tricky, but to make the new block visible correctly\r
 215                                 // we must select it.\r
 216                                 // The previousBlock check has been included because it may be\r
 217                                 // empty if we have fixed a block-less space (like ENTER into an\r
 218                                 // empty table cell).\r
 219                                 if ( CKEDITOR.env.ie && isStartOfBlock && ( !isEndOfBlock || !previousBlock.getChildCount() ) )\r
 220                                 {\r
 221                                         // Move the selection to the new block.\r
 222                                         range.moveToElementEditStart( isEndOfBlock ? previousBlock : newBlock );\r
 223                                         range.select();\r
 224                                 }\r
 225 \r
 226                                 // Move the selection to the new block.\r
 227                                 range.moveToElementEditStart( isStartOfBlock && !isEndOfBlock ? nextBlock : newBlock );\r
 228                 }\r
 229 \r
 230                         if ( !CKEDITOR.env.ie )\r
 231                         {\r
 232                                 if ( nextBlock )\r
 233                                 {\r
 234                                         // If we have split the block, adds a temporary span at the\r
 235                                         // range position and scroll relatively to it.\r
 236                                         var tmpNode = doc.createElement( 'span' );\r
 237 \r
 238                                         // We need some content for Safari.\r
 239                                         tmpNode.setHtml( '&nbsp;' );\r
 240 \r
 241                                         range.insertNode( tmpNode );\r
 242                                         tmpNode.scrollIntoView();\r
 243                                         range.deleteContents();\r
 244                                 }\r
 245                                 else\r
 246                                 {\r
 247                                         // We may use the above scroll logic for the new block case\r
 248                                         // too, but it gives some weird result with Opera.\r
 249                                         newBlock.scrollIntoView();\r
 250                                 }\r
 251                         }\r
 252 \r
 253                         range.select();\r
 254                 },\r
 255 \r
 256                 enterBr : function( editor, mode, range, forceMode )\r
 257                 {\r
 258                         // Get the range for the current selection.\r
 259                         range = range || getRange( editor );\r
 260 \r
 261                         // We may not have valid ranges to work on, like when inside a\r
 262                         // contenteditable=false element.\r
 263                         if ( !range )\r
 264                                 return;\r
 265 \r
 266                         var doc = range.document;\r
 267 \r
 268                         // Determine the block element to be used.\r
 269                         var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );\r
 270 \r
 271                         var isEndOfBlock = range.checkEndOfBlock();\r
 272 \r
 273                         var elementPath = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() );\r
 274 \r
 275                         var startBlock = elementPath.block,\r
 276                                 startBlockTag = startBlock && elementPath.block.getName();\r
 277 \r
 278                         var isPre = false;\r
 279 \r
 280                         if ( !forceMode && startBlockTag == 'li' )\r
 281                         {\r
 282                                 enterBlock( editor, mode, range, forceMode );\r
 283                                 return;\r
 284                         }\r
 285 \r
 286                         // If we are at the end of a header block.\r
 287                         if ( !forceMode && isEndOfBlock && headerTagRegex.test( startBlockTag ) )\r
 288                         {\r
 289                                 var newBlock,\r
 290                                         newBlockDir;\r
 291 \r
 292                                 if ( ( newBlockDir = startBlock.getDirection() ) )\r
 293                                 {\r
 294                                         newBlock = doc.createElement( 'div' );\r
 295                                         newBlock.setAttribute( 'dir', newBlockDir );\r
 296                                         newBlock.insertAfter( startBlock );\r
 297                                         range.setStart( newBlock, 0 );\r
 298                                 }\r
 299                                 else\r
 300                                 {\r
 301                                         // Insert a <br> after the current paragraph.\r
 302                                         doc.createElement( 'br' ).insertAfter( startBlock );\r
 303 \r
 304                                         // A text node is required by Gecko only to make the cursor blink.\r
 305                                         if ( CKEDITOR.env.gecko )\r
 306                                                 doc.createText( '' ).insertAfter( startBlock );\r
 307 \r
 308                                         // IE has different behaviors regarding position.\r
 309                                         range.setStartAt( startBlock.getNext(), CKEDITOR.env.ie ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_START );\r
 310                                 }\r
 311                         }\r
 312                         else\r
 313                         {\r
 314                                 var lineBreak;\r
 315 \r
 316                                 isPre = ( startBlockTag == 'pre' );\r
 317 \r
 318                                 // Gecko prefers <br> as line-break inside <pre> (#4711).\r
 319                                 if ( isPre && !CKEDITOR.env.gecko )\r
 320                                         lineBreak = doc.createText( CKEDITOR.env.ie ? '\r' : '\n' );\r
 321                                 else\r
 322                                         lineBreak = doc.createElement( 'br' );\r
 323 \r
 324                                 range.deleteContents();\r
 325                                 range.insertNode( lineBreak );\r
 326 \r
 327                                 // IE has different behavior regarding position.\r
 328                                 if ( CKEDITOR.env.ie )\r
 329                                         range.setStartAt( lineBreak, CKEDITOR.POSITION_AFTER_END );\r
 330                                 else\r
 331                                 {\r
 332                                         // A text node is required by Gecko only to make the cursor blink.\r
 333                                         // We need some text inside of it, so the bogus <br> is properly\r
 334                                         // created.\r
 335                                         doc.createText( '\ufeff' ).insertAfter( lineBreak );\r
 336 \r
 337                                         // If we are at the end of a block, we must be sure the bogus node is available in that block.\r
 338                                         if ( isEndOfBlock )\r
 339                                                 lineBreak.getParent().appendBogus();\r
 340 \r
 341                                         // Now we can remove the text node contents, so the caret doesn't\r
 342                                         // stop on it.\r
 343                                         lineBreak.getNext().$.nodeValue = '';\r
 344 \r
 345                                         range.setStartAt( lineBreak.getNext(), CKEDITOR.POSITION_AFTER_START );\r
 346 \r
 347                                         // Scroll into view, for non IE.\r
 348                                         var dummy = null;\r
 349 \r
 350                                         // BR is not positioned in Opera and Webkit.\r
 351                                         if ( !CKEDITOR.env.gecko )\r
 352                                         {\r
 353                                                 dummy = doc.createElement( 'span' );\r
 354                                                 // We need have some contents for Webkit to position it\r
 355                                                 // under parent node. ( #3681)\r
 356                                                 dummy.setHtml('&nbsp;');\r
 357                                         }\r
 358                                         else\r
 359                                                 dummy = doc.createElement( 'br' );\r
 360 \r
 361                                         dummy.insertBefore( lineBreak.getNext() );\r
 362                                         dummy.scrollIntoView();\r
 363                                         dummy.remove();\r
 364                                 }\r
 365                         }\r
 366 \r
 367                         // This collapse guarantees the cursor will be blinking.\r
 368                         range.collapse( true );\r
 369 \r
 370                         range.select( isPre );\r
 371                 }\r
 372         };\r
 373 \r
 374         var plugin = CKEDITOR.plugins.enterkey,\r
 375                 enterBr = plugin.enterBr,\r
 376                 enterBlock = plugin.enterBlock,\r
 377                 headerTagRegex = /^h[1-6]$/;\r
 378 \r
 379         function shiftEnter( editor )\r
 380         {\r
 381                 // Only effective within document.\r
 382                 if ( editor.mode != 'wysiwyg' )\r
 383                         return false;\r
 384 \r
 385                 // On SHIFT+ENTER:\r
 386                 // 1. We want to enforce the mode to be respected, instead\r
 387                 // of cloning the current block. (#77)\r
 388                 return enter( editor, editor.config.shiftEnterMode, 1 );\r
 389         }\r
 390 \r
 391         function enter( editor, mode, forceMode )\r
 392         {\r
 393                 forceMode = editor.config.forceEnterMode || forceMode;\r
 394 \r
 395                 // Only effective within document.\r
 396                 if ( editor.mode != 'wysiwyg' )\r
 397                         return false;\r
 398 \r
 399                 if ( !mode )\r
 400                         mode = editor.config.enterMode;\r
 401 \r
 402                 // Use setTimout so the keys get cancelled immediatelly.\r
 403                 setTimeout( function()\r
 404                         {\r
 405                                 editor.fire( 'saveSnapshot' );  // Save undo step.\r
 406 \r
 407                                 if ( mode == CKEDITOR.ENTER_BR )\r
 408                                         enterBr( editor, mode, null, forceMode );\r
 409                                 else\r
 410                                         enterBlock( editor, mode, null, forceMode );\r
 411 \r
 412                                 editor.fire( 'saveSnapshot' );\r
 413 \r
 414                         }, 0 );\r
 415 \r
 416                 return true;\r
 417         }\r
 418 \r
 419         function getRange( editor )\r
 420         {\r
 421                 // Get the selection ranges.\r
 422                 var ranges = editor.getSelection().getRanges( true );\r
 423 \r
 424                 // Delete the contents of all ranges except the first one.\r
 425                 for ( var i = ranges.length - 1 ; i > 0 ; i-- )\r
 426                 {\r
 427                         ranges[ i ].deleteContents();\r
 428                 }\r
 429 \r
 430                 // Return the first range.\r
 431                 return ranges[ 0 ];\r
 432         }\r
 433 })();\r