_source/plugins/enterkey/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2010, 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                         var specialKeys = editor.specialKeys;\r
  15                         specialKeys[ 13 ] = enter;\r
  16                         specialKeys[ CKEDITOR.SHIFT + 13 ] = shiftEnter;\r
  17                 }\r
  18         });\r
  19 \r
  20         CKEDITOR.plugins.enterkey =\r
  21         {\r
  22                 enterBlock : function( editor, mode, range, forceMode )\r
  23                 {\r
  24                         // Get the range for the current selection.\r
  25                         range = range || getRange( editor );\r
  26 \r
  27                         var doc = range.document;\r
  28 \r
  29                         // Determine the block element to be used.\r
  30                         var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );\r
  31 \r
  32                         // Split the range.\r
  33                         var splitInfo = range.splitBlock( blockTag );\r
  34 \r
  35                         if ( !splitInfo )\r
  36                                 return;\r
  37 \r
  38                         // Get the current blocks.\r
  39                         var previousBlock       = splitInfo.previousBlock,\r
  40                                 nextBlock               = splitInfo.nextBlock;\r
  41 \r
  42                         var isStartOfBlock      = splitInfo.wasStartOfBlock,\r
  43                                 isEndOfBlock    = splitInfo.wasEndOfBlock;\r
  44 \r
  45                         var node;\r
  46 \r
  47                         // If this is a block under a list item, split it as well. (#1647)\r
  48                         if ( nextBlock )\r
  49                         {\r
  50                                 node = nextBlock.getParent();\r
  51                                 if ( node.is( 'li' ) )\r
  52                                 {\r
  53                                         nextBlock.breakParent( node );\r
  54                                         nextBlock.move( nextBlock.getNext(), true );\r
  55                                 }\r
  56                         }\r
  57                         else if ( previousBlock && ( node = previousBlock.getParent() ) && node.is( 'li' ) )\r
  58                         {\r
  59                                 previousBlock.breakParent( node );\r
  60                                 range.moveToElementEditStart( previousBlock.getNext() );\r
  61                                 previousBlock.move( previousBlock.getPrevious() );\r
  62                         }\r
  63 \r
  64                         // If we have both the previous and next blocks, it means that the\r
  65                         // boundaries were on separated blocks, or none of them where on the\r
  66                         // block limits (start/end).\r
  67                         if ( !isStartOfBlock && !isEndOfBlock )\r
  68                         {\r
  69                                 // If the next block is an <li> with another list tree as the first\r
  70                                 // child, we'll need to append a filler (<br>/NBSP) or the list item\r
  71                                 // wouldn't be editable. (#1420)\r
  72                                 if ( nextBlock.is( 'li' )\r
  73                                          && ( node = nextBlock.getFirst( CKEDITOR.dom.walker.invisible( true ) ) )\r
  74                                          && node.is && node.is( 'ul', 'ol' ) )\r
  75                                         ( CKEDITOR.env.ie ? doc.createText( '\xa0' ) : doc.createElement( 'br' ) ).insertBefore( node );\r
  76 \r
  77                                 // Move the selection to the end block.\r
  78                                 if ( nextBlock )\r
  79                                         range.moveToElementEditStart( nextBlock );\r
  80                         }\r
  81                         else\r
  82                         {\r
  83 \r
  84                                 if ( isStartOfBlock && isEndOfBlock && previousBlock.is( 'li' ) )\r
  85                                 {\r
  86                                         editor.execCommand( 'outdent' );\r
  87                                         return;\r
  88                                 }\r
  89 \r
  90                                 var newBlock;\r
  91 \r
  92                                 if ( previousBlock )\r
  93                                 {\r
  94                                         // Do not enter this block if it's a header tag, or we are in\r
  95                                         // a Shift+Enter (#77). Create a new block element instead\r
  96                                         // (later in the code).\r
  97                                         if ( !forceMode && !headerTagRegex.test( previousBlock.getName() ) )\r
  98                                         {\r
  99                                                 // Otherwise, duplicate the previous block.\r
 100                                                 newBlock = previousBlock.clone();\r
 101                                         }\r
 102                                 }\r
 103                                 else if ( nextBlock )\r
 104                                         newBlock = nextBlock.clone();\r
 105 \r
 106                                 if ( !newBlock )\r
 107                                         newBlock = doc.createElement( blockTag );\r
 108 \r
 109                                 // Recreate the inline elements tree, which was available\r
 110                                 // before hitting enter, so the same styles will be available in\r
 111                                 // the new block.\r
 112                                 var elementPath = splitInfo.elementPath;\r
 113                                 if ( elementPath )\r
 114                                 {\r
 115                                         for ( var i = 0, len = elementPath.elements.length ; i < len ; i++ )\r
 116                                         {\r
 117                                                 var element = elementPath.elements[ i ];\r
 118 \r
 119                                                 if ( element.equals( elementPath.block ) || element.equals( elementPath.blockLimit ) )\r
 120                                                         break;\r
 121 \r
 122                                                 if ( CKEDITOR.dtd.$removeEmpty[ element.getName() ] )\r
 123                                                 {\r
 124                                                         element = element.clone();\r
 125                                                         newBlock.moveChildren( element );\r
 126                                                         newBlock.append( element );\r
 127                                                 }\r
 128                                         }\r
 129                                 }\r
 130 \r
 131                                 if ( !CKEDITOR.env.ie )\r
 132                                         newBlock.appendBogus();\r
 133 \r
 134                                 range.insertNode( newBlock );\r
 135 \r
 136                                 // This is tricky, but to make the new block visible correctly\r
 137                                 // we must select it.\r
 138                                 // The previousBlock check has been included because it may be\r
 139                                 // empty if we have fixed a block-less space (like ENTER into an\r
 140                                 // empty table cell).\r
 141                                 if ( CKEDITOR.env.ie && isStartOfBlock && ( !isEndOfBlock || !previousBlock.getChildCount() ) )\r
 142                                 {\r
 143                                         // Move the selection to the new block.\r
 144                                         range.moveToElementEditStart( isEndOfBlock ? previousBlock : newBlock );\r
 145                                         range.select();\r
 146                                 }\r
 147 \r
 148                                 // Move the selection to the new block.\r
 149                                 range.moveToElementEditStart( isStartOfBlock && !isEndOfBlock ? nextBlock : newBlock );\r
 150                 }\r
 151 \r
 152                         if ( !CKEDITOR.env.ie )\r
 153                         {\r
 154                                 if ( nextBlock )\r
 155                                 {\r
 156                                         // If we have split the block, adds a temporary span at the\r
 157                                         // range position and scroll relatively to it.\r
 158                                         var tmpNode = doc.createElement( 'span' );\r
 159 \r
 160                                         // We need some content for Safari.\r
 161                                         tmpNode.setHtml( '&nbsp;' );\r
 162 \r
 163                                         range.insertNode( tmpNode );\r
 164                                         tmpNode.scrollIntoView();\r
 165                                         range.deleteContents();\r
 166                                 }\r
 167                                 else\r
 168                                 {\r
 169                                         // We may use the above scroll logic for the new block case\r
 170                                         // too, but it gives some weird result with Opera.\r
 171                                         newBlock.scrollIntoView();\r
 172                                 }\r
 173                         }\r
 174 \r
 175                         range.select();\r
 176                 },\r
 177 \r
 178                 enterBr : function( editor, mode, range, forceMode )\r
 179                 {\r
 180                         // Get the range for the current selection.\r
 181                         range = range || getRange( editor );\r
 182 \r
 183                         var doc = range.document;\r
 184 \r
 185                         // Determine the block element to be used.\r
 186                         var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );\r
 187 \r
 188                         var isEndOfBlock = range.checkEndOfBlock();\r
 189 \r
 190                         var elementPath = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() );\r
 191 \r
 192                         var startBlock = elementPath.block,\r
 193                                 startBlockTag = startBlock && elementPath.block.getName();\r
 194 \r
 195                         var isPre = false;\r
 196 \r
 197                         if ( !forceMode && startBlockTag == 'li' )\r
 198                         {\r
 199                                 enterBlock( editor, mode, range, forceMode );\r
 200                                 return;\r
 201                         }\r
 202 \r
 203                         // If we are at the end of a header block.\r
 204                         if ( !forceMode && isEndOfBlock && headerTagRegex.test( startBlockTag ) )\r
 205                         {\r
 206                                 // Insert a <br> after the current paragraph.\r
 207                                 doc.createElement( 'br' ).insertAfter( startBlock );\r
 208 \r
 209                                 // A text node is required by Gecko only to make the cursor blink.\r
 210                                 if ( CKEDITOR.env.gecko )\r
 211                                         doc.createText( '' ).insertAfter( startBlock );\r
 212 \r
 213                                 // IE has different behaviors regarding position.\r
 214                                 range.setStartAt( startBlock.getNext(), CKEDITOR.env.ie ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_START );\r
 215                         }\r
 216                         else\r
 217                         {\r
 218                                 var lineBreak;\r
 219 \r
 220                                 isPre = ( startBlockTag == 'pre' );\r
 221 \r
 222                                 if ( isPre )\r
 223                                         lineBreak = doc.createText( CKEDITOR.env.ie ? '\r' : '\n' );\r
 224                                 else\r
 225                                         lineBreak = doc.createElement( 'br' );\r
 226 \r
 227                                 range.deleteContents();\r
 228                                 range.insertNode( lineBreak );\r
 229 \r
 230                                 // A text node is required by Gecko only to make the cursor blink.\r
 231                                 // We need some text inside of it, so the bogus <br> is properly\r
 232                                 // created.\r
 233                                 if ( !CKEDITOR.env.ie )\r
 234                                         doc.createText( '\ufeff' ).insertAfter( lineBreak );\r
 235 \r
 236                                 // If we are at the end of a block, we must be sure the bogus node is available in that block.\r
 237                                 if ( isEndOfBlock && !CKEDITOR.env.ie )\r
 238                                         lineBreak.getParent().appendBogus();\r
 239 \r
 240                                 // Now we can remove the text node contents, so the caret doesn't\r
 241                                 // stop on it.\r
 242                                 if ( !CKEDITOR.env.ie )\r
 243                                         lineBreak.getNext().$.nodeValue = '';\r
 244                                 // IE has different behavior regarding position.\r
 245                                 if ( CKEDITOR.env.ie )\r
 246                                         range.setStartAt( lineBreak, CKEDITOR.POSITION_AFTER_END );\r
 247                                 else\r
 248                                         range.setStartAt( lineBreak.getNext(), CKEDITOR.POSITION_AFTER_START );\r
 249 \r
 250                                 // Scroll into view, for non IE.\r
 251                                 if ( !CKEDITOR.env.ie )\r
 252                                 {\r
 253                                         var dummy = null;\r
 254 \r
 255                                         // BR is not positioned in Opera and Webkit.\r
 256                                         if ( !CKEDITOR.env.gecko )\r
 257                                         {\r
 258                                                 dummy = doc.createElement( 'span' );\r
 259                                                 // We need have some contents for Webkit to position it\r
 260                                                 // under parent node. ( #3681)\r
 261                                                 dummy.setHtml('&nbsp;');\r
 262                                         }\r
 263                                         else\r
 264                                                 dummy = doc.createElement( 'br' );\r
 265 \r
 266                                         dummy.insertBefore( lineBreak.getNext() );\r
 267                                         dummy.scrollIntoView();\r
 268                                         dummy.remove();\r
 269                                 }\r
 270                         }\r
 271 \r
 272                         // This collapse guarantees the cursor will be blinking.\r
 273                         range.collapse( true );\r
 274 \r
 275                         range.select( isPre );\r
 276                 }\r
 277         };\r
 278 \r
 279         var plugin = CKEDITOR.plugins.enterkey,\r
 280                 enterBr = plugin.enterBr,\r
 281                 enterBlock = plugin.enterBlock,\r
 282                 headerTagRegex = /^h[1-6]$/;\r
 283 \r
 284         function shiftEnter( editor )\r
 285         {\r
 286                 // On SHIFT+ENTER we want to enforce the mode to be respected, instead\r
 287                 // of cloning the current block. (#77)\r
 288                 return enter( editor, editor.config.shiftEnterMode, true );\r
 289         }\r
 290 \r
 291         function enter( editor, mode, forceMode )\r
 292         {\r
 293                 // Only effective within document.\r
 294                 if ( editor.mode != 'wysiwyg' )\r
 295                         return false;\r
 296 \r
 297                 if ( !mode )\r
 298                         mode = editor.config.enterMode;\r
 299 \r
 300                 // Use setTimout so the keys get cancelled immediatelly.\r
 301                 setTimeout( function()\r
 302                         {\r
 303                                 editor.fire( 'saveSnapshot' );  // Save undo step.\r
 304                                 if ( mode == CKEDITOR.ENTER_BR || editor.getSelection().getStartElement().hasAscendant( 'pre', true ) )\r
 305                                         enterBr( editor, mode, null, forceMode );\r
 306                                 else\r
 307                                         enterBlock( editor, mode, null, forceMode );\r
 308 \r
 309                         }, 0 );\r
 310 \r
 311                 return true;\r
 312         }\r
 313 \r
 314 \r
 315         function getRange( editor )\r
 316         {\r
 317                 // Get the selection ranges.\r
 318                 var ranges = editor.getSelection().getRanges();\r
 319 \r
 320                 // Delete the contents of all ranges except the first one.\r
 321                 for ( var i = ranges.length - 1 ; i > 0 ; i-- )\r
 322                 {\r
 323                         ranges[ i ].deleteContents();\r
 324                 }\r
 325 \r
 326                 // Return the first range.\r
 327                 return ranges[ 0 ];\r
 328         }\r
 329 })();\r