2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @file Clipboard support
\r
12 // Tries to execute any of the paste, cut or copy commands in IE. Returns a
\r
13 // boolean indicating that the operation succeeded.
\r
14 var execIECommand = function( editor, command )
\r
16 var doc = editor.document,
\r
17 body = doc.getBody();
\r
19 var enabled = false;
\r
20 var onExec = function()
\r
25 // The following seems to be the only reliable way to detect that
\r
26 // clipboard commands are enabled in IE. It will fire the
\r
27 // onpaste/oncut/oncopy events only if the security settings allowed
\r
28 // the command to execute.
\r
29 body.on( command, onExec );
\r
31 // IE6/7: document.execCommand has problem to paste into positioned element.
\r
32 ( CKEDITOR.env.version > 7 ? doc.$ : doc.$.selection.createRange() ) [ 'execCommand' ]( command );
\r
34 body.removeListener( command, onExec );
\r
39 // Attempts to execute the Cut and Copy operations.
\r
42 function( editor, type )
\r
44 return execIECommand( editor, type );
\r
47 function( editor, type )
\r
51 // Other browsers throw an error if the command is disabled.
\r
52 return editor.document.$.execCommand( type, false, null );
\r
60 // A class that represents one of the cut or copy commands.
\r
61 var cutCopyCmd = function( type )
\r
64 this.canUndo = this.type == 'cut'; // We can't undo copy to clipboard.
\r
65 this.startDisabled = true;
\r
68 cutCopyCmd.prototype =
\r
70 exec : function( editor, data )
\r
72 this.type == 'cut' && fixCut( editor );
\r
74 var success = tryToCutCopy( editor, this.type );
\r
77 alert( editor.lang.clipboard[ this.type + 'Error' ] ); // Show cutError or copyError.
\r
92 // Prevent IE from pasting at the begining of the document.
\r
95 if ( !editor.document.getBody().fire( 'beforepaste' )
\r
96 && !execIECommand( editor, 'paste' ) )
\r
98 editor.fire( 'pasteDialog' );
\r
107 if ( !editor.document.getBody().fire( 'beforepaste' )
\r
108 && !editor.document.$.execCommand( 'Paste', false, null ) )
\r
115 setTimeout( function()
\r
117 editor.fire( 'pasteDialog' );
\r
124 // Listens for some clipboard related keystrokes, so they get customized.
\r
125 var onKey = function( event )
\r
127 if ( this.mode != 'wysiwyg' )
\r
130 switch ( event.data.keyCode )
\r
133 case CKEDITOR.CTRL + 86 : // CTRL+V
\r
134 case CKEDITOR.SHIFT + 45 : // SHIFT+INS
\r
136 var body = this.document.getBody();
\r
138 // 1. Opera just misses the "paste" event.
\r
139 // 2. Firefox's "paste" event comes too late to have the plain
\r
140 // text paste bin to work.
\r
141 if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )
\r
142 body.fire( 'paste' );
\r
146 case CKEDITOR.CTRL + 88 : // CTRL+X
\r
147 case CKEDITOR.SHIFT + 46 : // SHIFT+DEL
\r
149 // Save Undo snapshot.
\r
151 this.fire( 'saveSnapshot' ); // Save before paste
\r
152 setTimeout( function()
\r
154 editor.fire( 'saveSnapshot' ); // Save after paste
\r
159 function cancel( evt ) { evt.cancel(); }
\r
161 // Allow to peek clipboard content by redirecting the
\r
162 // pasting content into a temporary bin and grab the content of it.
\r
163 function getClipboardData( evt, mode, callback )
\r
165 var doc = this.document;
\r
167 // Avoid recursions on 'paste' event or consequent paste too fast. (#5730)
\r
168 if ( doc.getById( 'cke_pastebin' ) )
\r
171 // If the browser supports it, get the data directly
\r
172 if ( mode == 'text' && evt.data && evt.data.$.clipboardData )
\r
174 // evt.data.$.clipboardData.types contains all the flavours in Mac's Safari, but not on windows.
\r
175 var plain = evt.data.$.clipboardData.getData( 'text/plain' );
\r
178 evt.data.preventDefault();
\r
184 var sel = this.getSelection(),
\r
185 range = new CKEDITOR.dom.range( doc );
\r
187 // Create container to paste into
\r
188 var pastebin = new CKEDITOR.dom.element( mode == 'text' ? 'textarea' : CKEDITOR.env.webkit ? 'body' : 'div', doc );
\r
189 pastebin.setAttribute( 'id', 'cke_pastebin' );
\r
190 // Safari requires a filler node inside the div to have the content pasted into it. (#4882)
\r
191 CKEDITOR.env.webkit && pastebin.append( doc.createText( '\xa0' ) );
\r
192 doc.getBody().append( pastebin );
\r
194 pastebin.setStyles(
\r
196 position : 'absolute',
\r
197 // Position the bin exactly at the position of the selected element
\r
198 // to avoid any subsequent document scroll.
\r
199 top : sel.getStartElement().getDocumentPosition().y + 'px',
\r
202 overflow : 'hidden'
\r
205 // It's definitely a better user experience if we make the paste-bin pretty unnoticed
\r
206 // by pulling it off the screen.
\r
207 pastebin.setStyle( this.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-1000px' );
\r
209 var bms = sel.createBookmarks();
\r
211 this.on( 'selectionChange', cancel, null, null, 0 );
\r
213 // Turn off design mode temporarily before give focus to the paste bin.
\r
214 if ( mode == 'text' )
\r
215 pastebin.$.focus();
\r
218 range.setStartAt( pastebin, CKEDITOR.POSITION_AFTER_START );
\r
219 range.setEndAt( pastebin, CKEDITOR.POSITION_BEFORE_END );
\r
220 range.select( true );
\r
224 // Wait a while and grab the pasted contents
\r
225 window.setTimeout( function()
\r
227 // Restore properly the document focus. (#5684, #8849)
\r
228 editor.document.getBody().focus();
\r
230 editor.removeListener( 'selectionChange', cancel );
\r
232 // IE7: selection must go before removing paste bin. (#8691)
\r
233 if ( CKEDITOR.env.ie7Compat )
\r
235 sel.selectBookmarks( bms );
\r
238 // Webkit: selection must go after removing paste bin. (#8921)
\r
242 sel.selectBookmarks( bms );
\r
245 // Grab the HTML contents.
\r
246 // We need to look for a apple style wrapper on webkit it also adds
\r
247 // a div wrapper if you copy/paste the body of the editor.
\r
248 // Remove hidden div and restore selection.
\r
250 pastebin = ( CKEDITOR.env.webkit
\r
251 && ( bogusSpan = pastebin.getFirst() )
\r
252 && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) ?
\r
253 bogusSpan : pastebin );
\r
255 callback( pastebin[ 'get' + ( mode == 'text' ? 'Value' : 'Html' ) ]() );
\r
259 // Cutting off control type element in IE standards breaks the selection entirely. (#4881)
\r
260 function fixCut( editor )
\r
262 if ( !CKEDITOR.env.ie || CKEDITOR.env.quirks )
\r
265 var sel = editor.getSelection();
\r
267 if( ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && ( control = sel.getSelectedElement() ) )
\r
269 var range = sel.getRanges()[ 0 ];
\r
270 var dummy = editor.document.createText( '' );
\r
271 dummy.insertBefore( control );
\r
272 range.setStartBefore( dummy );
\r
273 range.setEndAfter( control );
\r
274 sel.selectRanges( [ range ] );
\r
276 // Clear up the fix if the paste wasn't succeeded.
\r
277 setTimeout( function()
\r
279 // Element still online?
\r
280 if ( control.getParent() )
\r
283 sel.selectElement( control );
\r
289 var depressBeforeEvent,
\r
291 function stateFromNamedCommand( command, editor )
\r
295 if ( inReadOnly && command in { Paste : 1, Cut : 1 } )
\r
296 return CKEDITOR.TRISTATE_DISABLED;
\r
298 if ( command == 'Paste' )
\r
300 // IE Bug: queryCommandEnabled('paste') fires also 'beforepaste(copy/cut)',
\r
301 // guard to distinguish from the ordinary sources (either
\r
302 // keyboard paste or execCommand) (#4874).
\r
303 CKEDITOR.env.ie && ( depressBeforeEvent = 1 );
\r
306 // Always return true for Webkit (which always returns false).
\r
307 retval = editor.document.$.queryCommandEnabled( command ) || CKEDITOR.env.webkit;
\r
310 depressBeforeEvent = 0;
\r
312 // Cut, Copy - check if the selection is not empty
\r
315 var sel = editor.getSelection(),
\r
316 ranges = sel && sel.getRanges();
\r
317 retval = sel && !( ranges.length == 1 && ranges[ 0 ].collapsed );
\r
320 return retval ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
\r
323 function setToolbarStates()
\r
325 if ( this.mode != 'wysiwyg' )
\r
328 var pasteState = stateFromNamedCommand( 'Paste', this );
\r
330 this.getCommand( 'cut' ).setState( stateFromNamedCommand( 'Cut', this ) );
\r
331 this.getCommand( 'copy' ).setState( stateFromNamedCommand( 'Copy', this ) );
\r
332 this.getCommand( 'paste' ).setState( pasteState );
\r
333 this.fire( 'pasteState', pasteState );
\r
336 // Register the plugin.
\r
337 CKEDITOR.plugins.add( 'clipboard',
\r
339 requires : [ 'dialog', 'htmldataprocessor' ],
\r
340 init : function( editor )
\r
342 // Inserts processed data into the editor at the end of the
\r
344 editor.on( 'paste', function( evt )
\r
346 var data = evt.data;
\r
347 if ( data[ 'html' ] )
\r
348 editor.insertHtml( data[ 'html' ] );
\r
349 else if ( data[ 'text' ] )
\r
350 editor.insertText( data[ 'text' ] );
\r
352 setTimeout( function () { editor.fire( 'afterPaste' ); }, 0 );
\r
354 }, null, null, 1000 );
\r
356 editor.on( 'pasteDialog', function( evt )
\r
358 setTimeout( function()
\r
360 // Open default paste dialog.
\r
361 editor.openDialog( 'paste' );
\r
365 editor.on( 'pasteState', function( evt )
\r
367 editor.getCommand( 'paste' ).setState( evt.data );
\r
370 function addButtonCommand( buttonName, commandName, command, ctxMenuOrder )
\r
372 var lang = editor.lang[ commandName ];
\r
374 editor.addCommand( commandName, command );
\r
375 editor.ui.addButton( buttonName,
\r
378 command : commandName
\r
381 // If the "menu" plugin is loaded, register the menu item.
\r
382 if ( editor.addMenuItems )
\r
384 editor.addMenuItem( commandName,
\r
387 command : commandName,
\r
388 group : 'clipboard',
\r
389 order : ctxMenuOrder
\r
394 addButtonCommand( 'Cut', 'cut', new cutCopyCmd( 'cut' ), 1 );
\r
395 addButtonCommand( 'Copy', 'copy', new cutCopyCmd( 'copy' ), 4 );
\r
396 addButtonCommand( 'Paste', 'paste', pasteCmd, 8 );
\r
398 CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) );
\r
400 editor.on( 'key', onKey, editor );
\r
402 // We'll be catching all pasted content in one line, regardless of whether the
\r
403 // it's introduced by a document command execution (e.g. toolbar buttons) or
\r
404 // user paste behaviors. (e.g. Ctrl-V)
\r
405 editor.on( 'contentDom', function()
\r
407 var body = editor.document.getBody();
\r
409 // Intercept the paste before it actually takes place.
\r
410 body.on( !CKEDITOR.env.ie ? 'paste' : 'beforepaste', function( evt )
\r
412 if ( depressBeforeEvent )
\r
415 // Dismiss the (wrong) 'beforepaste' event fired on toolbar menu open.
\r
416 var domEvent = evt.data && evt.data.$;
\r
417 if ( CKEDITOR.env.ie && domEvent && !domEvent.ctrlKey )
\r
420 // Fire 'beforePaste' event so clipboard flavor get customized
\r
421 // by other plugins.
\r
422 var eventData = { mode : 'html' };
\r
423 editor.fire( 'beforePaste', eventData );
\r
425 getClipboardData.call( editor, evt, eventData.mode, function ( data )
\r
427 // The very last guard to make sure the
\r
428 // paste has successfully happened.
\r
429 if ( !( data = CKEDITOR.tools.trim( data.replace( /<span[^>]+data-cke-bookmark[^<]*?<\/span>/ig,'' ) ) ) )
\r
432 var dataTransfer = {};
\r
433 dataTransfer[ eventData.mode ] = data;
\r
434 editor.fire( 'paste', dataTransfer );
\r
438 if ( CKEDITOR.env.ie )
\r
440 // Dismiss the (wrong) 'beforepaste' event fired on context menu open. (#7953)
\r
441 body.on( 'contextmenu', function()
\r
443 depressBeforeEvent = 1;
\r
444 // Important: The following timeout will be called only after menu closed.
\r
445 setTimeout( function() { depressBeforeEvent = 0; }, 0 );
\r
448 // Handle IE's late coming "paste" event when pasting from
\r
449 // browser toolbar/context menu.
\r
450 body.on( 'paste', function( evt )
\r
452 if ( !editor.document.getById( 'cke_pastebin' ) )
\r
454 // Prevent native paste.
\r
455 evt.data.preventDefault();
\r
457 depressBeforeEvent = 0;
\r
458 // Resort to the paste command.
\r
459 pasteCmd.exec( editor );
\r
464 body.on( 'beforecut', function() { !depressBeforeEvent && fixCut( editor ); } );
\r
466 body.on( 'mouseup', function(){ setTimeout( function(){ setToolbarStates.call( editor ); }, 0 ); }, editor );
\r
467 body.on( 'keyup', setToolbarStates, editor );
\r
470 // For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that.
\r
471 editor.on( 'selectionChange', function( evt )
\r
473 inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly();
\r
474 setToolbarStates.call( editor );
\r
477 // If the "contextmenu" plugin is loaded, register the listeners.
\r
478 if ( editor.contextMenu )
\r
480 editor.contextMenu.addListener( function( element, selection )
\r
482 var readOnly = selection.getRanges()[ 0 ].checkReadOnly();
\r
484 cut : stateFromNamedCommand( 'Cut', editor ),
\r
485 copy : stateFromNamedCommand( 'Copy', editor ),
\r
486 paste : stateFromNamedCommand( 'Paste', editor )
\r
495 * Fired when a clipboard operation is about to be taken into the editor.
\r
496 * Listeners can manipulate the data to be pasted before having it effectively
\r
497 * inserted into the document.
\r
498 * @name CKEDITOR.editor#paste
\r
501 * @param {String} [data.html] The HTML data to be pasted. If not available, e.data.text will be defined.
\r
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.
\r
506 * Internal event to open the Paste dialog
\r
507 * @name CKEDITOR.editor#pasteDialog
\r