2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
7 * @file Clipboard support
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 )
16 var doc = editor.document,
20 var onExec = function()
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 );
31 // IE6/7: document.execCommand has problem to paste into positioned element.
32 ( CKEDITOR.env.version > 7 ? doc.$ : doc.$.selection.createRange() ) [ 'execCommand' ]( command );
34 body.removeListener( command, onExec );
39 // Attempts to execute the Cut and Copy operations.
42 function( editor, type )
44 return execIECommand( editor, type );
47 function( editor, type )
51 // Other browsers throw an error if the command is disabled.
52 return editor.document.$.execCommand( type, false, null );
60 // A class that represents one of the cut or copy commands.
61 var cutCopyCmd = function( type )
64 this.canUndo = this.type == 'cut'; // We can't undo copy to clipboard.
65 this.startDisabled = true;
68 cutCopyCmd.prototype =
70 exec : function( editor, data )
72 this.type == 'cut' && fixCut( editor );
74 var success = tryToCutCopy( editor, this.type );
77 alert( editor.lang.clipboard[ this.type + 'Error' ] ); // Show cutError or copyError.
92 // Prevent IE from pasting at the begining of the document.
95 if ( !editor.document.getBody().fire( 'beforepaste' )
96 && !execIECommand( editor, 'paste' ) )
98 editor.fire( 'pasteDialog' );
107 if ( !editor.document.getBody().fire( 'beforepaste' )
108 && !editor.document.$.execCommand( 'Paste', false, null ) )
115 setTimeout( function()
117 editor.fire( 'pasteDialog' );
124 // Listens for some clipboard related keystrokes, so they get customized.
125 var onKey = function( event )
127 if ( this.mode != 'wysiwyg' )
130 switch ( event.data.keyCode )
133 case CKEDITOR.CTRL + 86 : // CTRL+V
134 case CKEDITOR.SHIFT + 45 : // SHIFT+INS
136 var body = this.document.getBody();
138 // Simulate 'beforepaste' event for all none-IEs.
139 if ( !CKEDITOR.env.ie && body.fire( 'beforepaste' ) )
141 // Simulate 'paste' event for Opera/Firefox2.
142 else if ( CKEDITOR.env.opera
143 || CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 )
144 body.fire( 'paste' );
148 case CKEDITOR.CTRL + 88 : // CTRL+X
149 case CKEDITOR.SHIFT + 46 : // SHIFT+DEL
151 // Save Undo snapshot.
153 this.fire( 'saveSnapshot' ); // Save before paste
154 setTimeout( function()
156 editor.fire( 'saveSnapshot' ); // Save after paste
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 )
165 var doc = this.document;
167 // Avoid recursions on 'paste' event or consequent paste too fast. (#5730)
168 if ( doc.getById( 'cke_pastebin' ) )
171 // If the browser supports it, get the data directly
172 if ( mode == 'text' && evt.data && evt.data.$.clipboardData )
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' );
178 evt.data.preventDefault();
184 var sel = this.getSelection(),
185 range = new CKEDITOR.dom.range( doc );
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 );
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',
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' );
209 var bms = sel.createBookmarks();
211 // Turn off design mode temporarily before give focus to the paste bin.
212 if ( mode == 'text' )
214 if ( CKEDITOR.env.ie )
216 var ieRange = doc.getBody().$.createTextRange();
217 ieRange.moveToElementText( pastebin.$ );
218 ieRange.execCommand( 'Paste' );
219 evt.data.preventDefault();
226 range.setStartAt( pastebin, CKEDITOR.POSITION_AFTER_START );
227 range.setEndAt( pastebin, CKEDITOR.POSITION_BEFORE_END );
228 range.select( true );
232 // Wait a while and grab the pasted contents
233 window.setTimeout( function()
235 mode == 'text' && CKEDITOR.env.gecko && editor.focusGrabber.focus();
238 // Grab the HTML contents.
239 // We need to look for a apple style wrapper on webkit it also adds
240 // a div wrapper if you copy/paste the body of the editor.
241 // Remove hidden div and restore selection.
243 pastebin = ( CKEDITOR.env.webkit
244 && ( bogusSpan = pastebin.getFirst() )
245 && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) ?
246 bogusSpan : pastebin );
248 sel.selectBookmarks( bms );
249 callback( pastebin[ 'get' + ( mode == 'text' ? 'Value' : 'Html' ) ]() );
253 // Cutting off control type element in IE standards breaks the selection entirely. (#4881)
254 function fixCut( editor )
256 if ( !CKEDITOR.env.ie || CKEDITOR.env.quirks )
259 var sel = editor.getSelection();
261 if( ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && ( control = sel.getSelectedElement() ) )
263 var range = sel.getRanges()[ 0 ];
264 var dummy = editor.document.createText( '' );
265 dummy.insertBefore( control );
266 range.setStartBefore( dummy );
267 range.setEndAfter( control );
268 sel.selectRanges( [ range ] );
270 // Clear up the fix if the paste wasn't succeeded.
271 setTimeout( function()
273 // Element still online?
274 if ( control.getParent() )
277 sel.selectElement( control );
283 var depressBeforeEvent;
284 function stateFromNamedCommand( command, editor )
286 // IE Bug: queryCommandEnabled('paste') fires also 'beforepaste(copy/cut)',
287 // guard to distinguish from the ordinary sources( either
288 // keyboard paste or execCommand ) (#4874).
289 CKEDITOR.env.ie && ( depressBeforeEvent = 1 );
291 var retval = editor.document.$.queryCommandEnabled( command ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
292 depressBeforeEvent = 0;
297 function setToolbarStates()
299 if ( this.mode != 'wysiwyg' )
302 this.getCommand( 'cut' ).setState( inReadOnly ? CKEDITOR.TRISTATE_DISABLED : stateFromNamedCommand( 'Cut', this ) );
303 this.getCommand( 'copy' ).setState( stateFromNamedCommand( 'Copy', this ) );
304 var pasteState = inReadOnly ? CKEDITOR.TRISTATE_DISABLED :
305 CKEDITOR.env.webkit ? CKEDITOR.TRISTATE_OFF : stateFromNamedCommand( 'Paste', this );
306 this.fire( 'pasteState', pasteState );
309 // Register the plugin.
310 CKEDITOR.plugins.add( 'clipboard',
312 requires : [ 'dialog', 'htmldataprocessor' ],
313 init : function( editor )
315 // Inserts processed data into the editor at the end of the
317 editor.on( 'paste', function( evt )
320 if ( data[ 'html' ] )
321 editor.insertHtml( data[ 'html' ] );
322 else if ( data[ 'text' ] )
323 editor.insertText( data[ 'text' ] );
325 }, null, null, 1000 );
327 editor.on( 'pasteDialog', function( evt )
329 setTimeout( function()
331 // Open default paste dialog.
332 editor.openDialog( 'paste' );
336 editor.on( 'pasteState', function( evt )
338 editor.getCommand( 'paste' ).setState( evt.data );
341 function addButtonCommand( buttonName, commandName, command, ctxMenuOrder )
343 var lang = editor.lang[ commandName ];
345 editor.addCommand( commandName, command );
346 editor.ui.addButton( buttonName,
349 command : commandName
352 // If the "menu" plugin is loaded, register the menu item.
353 if ( editor.addMenuItems )
355 editor.addMenuItem( commandName,
358 command : commandName,
365 addButtonCommand( 'Cut', 'cut', new cutCopyCmd( 'cut' ), 1 );
366 addButtonCommand( 'Copy', 'copy', new cutCopyCmd( 'copy' ), 4 );
367 addButtonCommand( 'Paste', 'paste', pasteCmd, 8 );
369 CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) );
371 editor.on( 'key', onKey, editor );
373 var mode = editor.config.forcePasteAsPlainText ? 'text' : 'html';
375 // We'll be catching all pasted content in one line, regardless of whether the
376 // it's introduced by a document command execution (e.g. toolbar buttons) or
377 // user paste behaviors. (e.g. Ctrl-V)
378 editor.on( 'contentDom', function()
380 var body = editor.document.getBody();
381 body.on( ( ( mode == 'text' && CKEDITOR.env.ie ) || CKEDITOR.env.webkit ) ? 'paste' : 'beforepaste',
384 if ( depressBeforeEvent )
387 getClipboardData.call( editor, evt, mode, function ( data )
389 // The very last guard to make sure the
390 // paste has successfully happened.
394 var dataTransfer = {};
395 dataTransfer[ mode ] = data;
396 editor.fire( 'paste', dataTransfer );
400 body.on( 'beforecut', function() { !depressBeforeEvent && fixCut( editor ); } );
402 body.on( 'mouseup', function(){ setTimeout( function(){ setToolbarStates.call( editor ); }, 0 ); }, editor );
403 body.on( 'keyup', setToolbarStates, editor );
406 // For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that.
407 editor.on( 'selectionChange', function( evt )
409 inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly();
410 setToolbarStates.call( editor );
413 // If the "contextmenu" plugin is loaded, register the listeners.
414 if ( editor.contextMenu )
416 editor.contextMenu.addListener( function( element, selection )
418 var readOnly = selection.getRanges()[ 0 ].checkReadOnly();
420 cut : !readOnly && stateFromNamedCommand( 'Cut', editor ),
421 copy : stateFromNamedCommand( 'Copy', editor ),
422 paste : !readOnly && ( CKEDITOR.env.webkit ? CKEDITOR.TRISTATE_OFF : stateFromNamedCommand( 'Paste', editor ) )
431 * Fired when a clipboard operation is about to be taken into the editor.
432 * Listeners can manipulate the data to be pasted before having it effectively
433 * inserted into the document.
434 * @name CKEDITOR.editor#paste
437 * @param {String} [data.html] The HTML data to be pasted. If not available, e.data.text will be defined.
438 * @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.
442 * Internal event to open the Paste dialog
443 * @name CKEDITOR.editor#pasteDialog