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