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 /** 7 * @file Clipboard support 8 */ 9 10 (function() 11 { 12 // Tries to execute any of the paste, cut or copy commands in IE. Returns a 13 // boolean indicating that the operation succeeded. 14 var execIECommand = function( editor, command ) 15 { 16 var doc = editor.document, 17 body = doc.getBody(); 18 19 var enabled = false; 20 var onExec = function() 21 { 22 enabled = true; 23 }; 24 25 // The following seems to be the only reliable way to detect that 26 // clipboard commands are enabled in IE. It will fire the 27 // onpaste/oncut/oncopy events only if the security settings allowed 28 // the command to execute. 29 body.on( command, onExec ); 30 31 // IE6/7: document.execCommand has problem to paste into positioned element. 32 ( CKEDITOR.env.version > 7 ? doc.$ : doc.$.selection.createRange() ) [ 'execCommand' ]( command ); 33 34 body.removeListener( command, onExec ); 35 36 return enabled; 37 }; 38 39 // Attempts to execute the Cut and Copy operations. 40 var tryToCutCopy = 41 CKEDITOR.env.ie ? 42 function( editor, type ) 43 { 44 return execIECommand( editor, type ); 45 } 46 : // !IE. 47 function( editor, type ) 48 { 49 try 50 { 51 // Other browsers throw an error if the command is disabled. 52 return editor.document.$.execCommand( type, false, null ); 53 } 54 catch( e ) 55 { 56 return false; 57 } 58 }; 59 60 // A class that represents one of the cut or copy commands. 61 var cutCopyCmd = function( type ) 62 { 63 this.type = type; 64 this.canUndo = this.type == 'cut'; // We can't undo copy to clipboard. 65 this.startDisabled = true; 66 }; 67 68 cutCopyCmd.prototype = 69 { 70 exec : function( editor, data ) 71 { 72 this.type == 'cut' && fixCut( editor ); 73 74 var success = tryToCutCopy( editor, this.type ); 75 76 if ( !success ) 77 alert( editor.lang.clipboard[ this.type + 'Error' ] ); // Show cutError or copyError. 78 79 return success; 80 } 81 }; 82 83 // Paste command. 84 var pasteCmd = 85 { 86 canUndo : false, 87 88 exec : 89 CKEDITOR.env.ie ? 90 function( editor ) 91 { 92 // Prevent IE from pasting at the begining of the document. 93 editor.focus(); 94 95 if ( !editor.document.getBody().fire( 'beforepaste' ) 96 && !execIECommand( editor, 'paste' ) ) 97 { 98 editor.fire( 'pasteDialog' ); 99 return false; 100 } 101 } 102 : 103 function( editor ) 104 { 105 try 106 { 107 if ( !editor.document.getBody().fire( 'beforepaste' ) 108 && !editor.document.$.execCommand( 'Paste', false, null ) ) 109 { 110 throw 0; 111 } 112 } 113 catch ( e ) 114 { 115 setTimeout( function() 116 { 117 editor.fire( 'pasteDialog' ); 118 }, 0 ); 119 return false; 120 } 121 } 122 }; 123 124 // Listens for some clipboard related keystrokes, so they get customized. 125 var onKey = function( event ) 126 { 127 if ( this.mode != 'wysiwyg' ) 128 return; 129 130 switch ( event.data.keyCode ) 131 { 132 // Paste 133 case CKEDITOR.CTRL + 86 : // CTRL+V 134 case CKEDITOR.SHIFT + 45 : // SHIFT+INS 135 136 var body = this.document.getBody(); 137 138 // 1. Opera just misses the "paste" event. 139 // 2. Firefox's "paste" event comes too late to have the plain 140 // text paste bin to work. 141 if ( CKEDITOR.env.opera || CKEDITOR.env.gecko ) 142 body.fire( 'paste' ); 143 return; 144 145 // Cut 146 case CKEDITOR.CTRL + 88 : // CTRL+X 147 case CKEDITOR.SHIFT + 46 : // SHIFT+DEL 148 149 // Save Undo snapshot. 150 var editor = this; 151 this.fire( 'saveSnapshot' ); // Save before paste 152 setTimeout( function() 153 { 154 editor.fire( 'saveSnapshot' ); // Save after paste 155 }, 0 ); 156 } 157 }; 158 159 function cancel( evt ) { evt.cancel(); } 160 161 // Allow to peek clipboard content by redirecting the 162 // pasting content into a temporary bin and grab the content of it. 163 function getClipboardData( evt, mode, callback ) 164 { 165 var doc = this.document; 166 167 // Avoid recursions on 'paste' event or consequent paste too fast. (#5730) 168 if ( doc.getById( 'cke_pastebin' ) ) 169 return; 170 171 // If the browser supports it, get the data directly 172 if ( mode == 'text' && evt.data && evt.data.$.clipboardData ) 173 { 174 // evt.data.$.clipboardData.types contains all the flavours in Mac's Safari, but not on windows. 175 var plain = evt.data.$.clipboardData.getData( 'text/plain' ); 176 if ( plain ) 177 { 178 evt.data.preventDefault(); 179 callback( plain ); 180 return; 181 } 182 } 183 184 var sel = this.getSelection(), 185 range = new CKEDITOR.dom.range( doc ); 186 187 // Create container to paste into 188 var pastebin = new CKEDITOR.dom.element( mode == 'text' ? 'textarea' : CKEDITOR.env.webkit ? 'body' : 'div', doc ); 189 pastebin.setAttribute( 'id', 'cke_pastebin' ); 190 // Safari requires a filler node inside the div to have the content pasted into it. (#4882) 191 CKEDITOR.env.webkit && pastebin.append( doc.createText( '\xa0' ) ); 192 doc.getBody().append( pastebin ); 193 194 pastebin.setStyles( 195 { 196 position : 'absolute', 197 // Position the bin exactly at the position of the selected element 198 // to avoid any subsequent document scroll. 199 top : sel.getStartElement().getDocumentPosition().y + 'px', 200 width : '1px', 201 height : '1px', 202 overflow : 'hidden' 203 }); 204 205 // It's definitely a better user experience if we make the paste-bin pretty unnoticed 206 // by pulling it off the screen. 207 pastebin.setStyle( this.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-1000px' ); 208 209 var bms = sel.createBookmarks(); 210 211 this.on( 'selectionChange', cancel, null, null, 0 ); 212 213 // Turn off design mode temporarily before give focus to the paste bin. 214 if ( mode == 'text' ) 215 pastebin.$.focus(); 216 else 217 { 218 range.setStartAt( pastebin, CKEDITOR.POSITION_AFTER_START ); 219 range.setEndAt( pastebin, CKEDITOR.POSITION_BEFORE_END ); 220 range.select( true ); 221 } 222 223 var editor = this; 224 // Wait a while and grab the pasted contents 225 window.setTimeout( function() 226 { 227 // Restore properly the document focus. (#5684, #8849) 228 editor.document.getBody().focus(); 229 230 editor.removeListener( 'selectionChange', cancel ); 231 232 // IE7: selection must go before removing paste bin. (#8691) 233 if ( CKEDITOR.env.ie7Compat ) 234 { 235 sel.selectBookmarks( bms ); 236 pastebin.remove(); 237 } 238 // Webkit: selection must go after removing paste bin. (#8921) 239 else 240 { 241 pastebin.remove(); 242 sel.selectBookmarks( bms ); 243 } 244 245 // Grab the HTML contents. 246 // We need to look for a apple style wrapper on webkit it also adds 247 // a div wrapper if you copy/paste the body of the editor. 248 // Remove hidden div and restore selection. 249 var bogusSpan; 250 pastebin = ( CKEDITOR.env.webkit 251 && ( bogusSpan = pastebin.getFirst() ) 252 && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) ? 253 bogusSpan : pastebin ); 254 255 callback( pastebin[ 'get' + ( mode == 'text' ? 'Value' : 'Html' ) ]() ); 256 }, 0 ); 257 } 258 259 // Cutting off control type element in IE standards breaks the selection entirely. (#4881) 260 function fixCut( editor ) 261 { 262 if ( !CKEDITOR.env.ie || CKEDITOR.env.quirks ) 263 return; 264 265 var sel = editor.getSelection(); 266 var control; 267 if( ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && ( control = sel.getSelectedElement() ) ) 268 { 269 var range = sel.getRanges()[ 0 ]; 270 var dummy = editor.document.createText( '' ); 271 dummy.insertBefore( control ); 272 range.setStartBefore( dummy ); 273 range.setEndAfter( control ); 274 sel.selectRanges( [ range ] ); 275 276 // Clear up the fix if the paste wasn't succeeded. 277 setTimeout( function() 278 { 279 // Element still online? 280 if ( control.getParent() ) 281 { 282 dummy.remove(); 283 sel.selectElement( control ); 284 } 285 }, 0 ); 286 } 287 } 288 289 var depressBeforeEvent, 290 inReadOnly; 291 function stateFromNamedCommand( command, editor ) 292 { 293 var retval; 294 295 if ( inReadOnly && command in { Paste : 1, Cut : 1 } ) 296 return CKEDITOR.TRISTATE_DISABLED; 297 298 if ( command == 'Paste' ) 299 { 300 // IE Bug: queryCommandEnabled('paste') fires also 'beforepaste(copy/cut)', 301 // guard to distinguish from the ordinary sources (either 302 // keyboard paste or execCommand) (#4874). 303 CKEDITOR.env.ie && ( depressBeforeEvent = 1 ); 304 try 305 { 306 // Always return true for Webkit (which always returns false). 307 retval = editor.document.$.queryCommandEnabled( command ) || CKEDITOR.env.webkit; 308 } 309 catch( er ) {} 310 depressBeforeEvent = 0; 311 } 312 // Cut, Copy - check if the selection is not empty 313 else 314 { 315 var sel = editor.getSelection(), 316 ranges = sel && sel.getRanges(); 317 retval = sel && !( ranges.length == 1 && ranges[ 0 ].collapsed ); 318 } 319 320 return retval ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED; 321 } 322 323 function setToolbarStates() 324 { 325 if ( this.mode != 'wysiwyg' ) 326 return; 327 328 var pasteState = stateFromNamedCommand( 'Paste', this ); 329 330 this.getCommand( 'cut' ).setState( stateFromNamedCommand( 'Cut', this ) ); 331 this.getCommand( 'copy' ).setState( stateFromNamedCommand( 'Copy', this ) ); 332 this.getCommand( 'paste' ).setState( pasteState ); 333 this.fire( 'pasteState', pasteState ); 334 } 335 336 // Register the plugin. 337 CKEDITOR.plugins.add( 'clipboard', 338 { 339 requires : [ 'dialog', 'htmldataprocessor' ], 340 init : function( editor ) 341 { 342 // Inserts processed data into the editor at the end of the 343 // events chain. 344 editor.on( 'paste', function( evt ) 345 { 346 var data = evt.data; 347 if ( data[ 'html' ] ) 348 editor.insertHtml( data[ 'html' ] ); 349 else if ( data[ 'text' ] ) 350 editor.insertText( data[ 'text' ] ); 351 352 setTimeout( function () { editor.fire( 'afterPaste' ); }, 0 ); 353 354 }, null, null, 1000 ); 355 356 editor.on( 'pasteDialog', function( evt ) 357 { 358 setTimeout( function() 359 { 360 // Open default paste dialog. 361 editor.openDialog( 'paste' ); 362 }, 0 ); 363 }); 364 365 editor.on( 'pasteState', function( evt ) 366 { 367 editor.getCommand( 'paste' ).setState( evt.data ); 368 }); 369 370 function addButtonCommand( buttonName, commandName, command, ctxMenuOrder ) 371 { 372 var lang = editor.lang[ commandName ]; 373 374 editor.addCommand( commandName, command ); 375 editor.ui.addButton( buttonName, 376 { 377 label : lang, 378 command : commandName 379 }); 380 381 // If the "menu" plugin is loaded, register the menu item. 382 if ( editor.addMenuItems ) 383 { 384 editor.addMenuItem( commandName, 385 { 386 label : lang, 387 command : commandName, 388 group : 'clipboard', 389 order : ctxMenuOrder 390 }); 391 } 392 } 393 394 addButtonCommand( 'Cut', 'cut', new cutCopyCmd( 'cut' ), 1 ); 395 addButtonCommand( 'Copy', 'copy', new cutCopyCmd( 'copy' ), 4 ); 396 addButtonCommand( 'Paste', 'paste', pasteCmd, 8 ); 397 398 CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) ); 399 400 editor.on( 'key', onKey, editor ); 401 402 // We'll be catching all pasted content in one line, regardless of whether the 403 // it's introduced by a document command execution (e.g. toolbar buttons) or 404 // user paste behaviors. (e.g. Ctrl-V) 405 editor.on( 'contentDom', function() 406 { 407 var body = editor.document.getBody(); 408 409 // Intercept the paste before it actually takes place. 410 body.on( !CKEDITOR.env.ie ? 'paste' : 'beforepaste', function( evt ) 411 { 412 if ( depressBeforeEvent ) 413 return; 414 415 // Dismiss the (wrong) 'beforepaste' event fired on toolbar menu open. 416 var domEvent = evt.data && evt.data.$; 417 if ( CKEDITOR.env.ie && domEvent && !domEvent.ctrlKey ) 418 return; 419 420 // Fire 'beforePaste' event so clipboard flavor get customized 421 // by other plugins. 422 var eventData = { mode : 'html' }; 423 editor.fire( 'beforePaste', eventData ); 424 425 getClipboardData.call( editor, evt, eventData.mode, function ( data ) 426 { 427 // The very last guard to make sure the 428 // paste has successfully happened. 429 if ( !( data = CKEDITOR.tools.trim( data.replace( /<span[^>]+data-cke-bookmark[^<]*?<\/span>/ig,'' ) ) ) ) 430 return; 431 432 var dataTransfer = {}; 433 dataTransfer[ eventData.mode ] = data; 434 editor.fire( 'paste', dataTransfer ); 435 } ); 436 }); 437 438 if ( CKEDITOR.env.ie ) 439 { 440 // Dismiss the (wrong) 'beforepaste' event fired on context menu open. (#7953) 441 body.on( 'contextmenu', function() 442 { 443 depressBeforeEvent = 1; 444 // Important: The following timeout will be called only after menu closed. 445 setTimeout( function() { depressBeforeEvent = 0; }, 0 ); 446 } ); 447 448 // Handle IE's late coming "paste" event when pasting from 449 // browser toolbar/context menu. 450 body.on( 'paste', function( evt ) 451 { 452 if ( !editor.document.getById( 'cke_pastebin' ) ) 453 { 454 // Prevent native paste. 455 evt.data.preventDefault(); 456 457 depressBeforeEvent = 0; 458 // Resort to the paste command. 459 pasteCmd.exec( editor ); 460 } 461 } ); 462 } 463 464 body.on( 'beforecut', function() { !depressBeforeEvent && fixCut( editor ); } ); 465 466 body.on( 'mouseup', function(){ setTimeout( function(){ setToolbarStates.call( editor ); }, 0 ); }, editor ); 467 body.on( 'keyup', setToolbarStates, editor ); 468 }); 469 470 // For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that. 471 editor.on( 'selectionChange', function( evt ) 472 { 473 inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly(); 474 setToolbarStates.call( editor ); 475 }); 476 477 // If the "contextmenu" plugin is loaded, register the listeners. 478 if ( editor.contextMenu ) 479 { 480 editor.contextMenu.addListener( function( element, selection ) 481 { 482 var readOnly = selection.getRanges()[ 0 ].checkReadOnly(); 483 return { 484 cut : stateFromNamedCommand( 'Cut', editor ), 485 copy : stateFromNamedCommand( 'Copy', editor ), 486 paste : stateFromNamedCommand( 'Paste', editor ) 487 }; 488 }); 489 } 490 } 491 }); 492 })(); 493 494 /** 495 * Fired when a clipboard operation is about to be taken into the editor. 496 * Listeners can manipulate the data to be pasted before having it effectively 497 * inserted into the document. 498 * @name CKEDITOR.editor#paste 499 * @since 3.1 500 * @event 501 * @param {String} [data.html] The HTML data to be pasted. If not available, e.data.text will be defined. 502 * @param {String} [data.text] The plain text data to be pasted, available when plain text operations are to used. If not available, e.data.html will be defined. 503 */ 504 505 /** 506 * Internal event to open the Paste dialog 507 * @name CKEDITOR.editor#pasteDialog 508 * @event 509 */ 510