On prépare de quoi se concentrer sur les images incorporées.
[ckeditor.git] / skins / ckeditor / _source / plugins / clipboard / plugin.js
1 /*
2 Copyright (c) 2003-2011, 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 = 0;
20 var onExec = function()
21 {
22 enabled = 1;
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 // Simulate 'beforepaste' event for all none-IEs.
139 if ( !CKEDITOR.env.ie && body.fire( 'beforepaste' ) )
140 event.cancel();
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' );
145 return;
146
147 // Cut
148 case CKEDITOR.CTRL + 88 : // CTRL+X
149 case CKEDITOR.SHIFT + 46 : // SHIFT+DEL
150
151 // Save Undo snapshot.
152 var editor = this;
153 this.fire( 'saveSnapshot' ); // Save before paste
154 setTimeout( function()
155 {
156 editor.fire( 'saveSnapshot' ); // Save after paste
157 }, 0 );
158 }
159 };
160
161 function cancel( evt ) { evt.cancel(); }
162
163 // Allow to peek clipboard content by redirecting the
164 // pasting content into a temporary bin and grab the content of it.
165 function getClipboardData( evt, mode, callback )
166 {
167 var doc = this.document;
168
169 // Avoid recursions on 'paste' event or consequent paste too fast. (#5730)
170 if ( doc.getById( 'cke_pastebin' ) )
171 return;
172
173 // If the browser supports it, get the data directly
174 if ( mode == 'text' && evt.data && evt.data.$.clipboardData )
175 {
176 // evt.data.$.clipboardData.types contains all the flavours in Mac's Safari, but not on windows.
177 var plain = evt.data.$.clipboardData.getData( 'text/plain' );
178 if ( plain )
179 {
180 evt.data.preventDefault();
181 callback( plain );
182 return;
183 }
184 }
185
186 var sel = this.getSelection(),
187 range = new CKEDITOR.dom.range( doc );
188
189 // Create container to paste into
190 var pastebin = new CKEDITOR.dom.element( mode == 'text' ? 'textarea' : CKEDITOR.env.webkit ? 'body' : 'div', doc );
191 pastebin.setAttribute( 'id', 'cke_pastebin' );
192 // Safari requires a filler node inside the div to have the content pasted into it. (#4882)
193 CKEDITOR.env.webkit && pastebin.append( doc.createText( '\xa0' ) );
194 doc.getBody().append( pastebin );
195
196 pastebin.setStyles(
197 {
198 position : 'absolute',
199 // Position the bin exactly at the position of the selected element
200 // to avoid any subsequent document scroll.
201 top : sel.getStartElement().getDocumentPosition().y + 'px',
202 width : '1px',
203 height : '1px',
204 overflow : 'hidden'
205 });
206
207 // It's definitely a better user experience if we make the paste-bin pretty unnoticed
208 // by pulling it off the screen.
209 pastebin.setStyle( this.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-1000px' );
210
211 var bms = sel.createBookmarks();
212
213 this.on( 'selectionChange', cancel, null, null, 0 );
214
215 // Turn off design mode temporarily before give focus to the paste bin.
216 if ( mode == 'text' )
217 pastebin.$.focus();
218 else
219 {
220 range.setStartAt( pastebin, CKEDITOR.POSITION_AFTER_START );
221 range.setEndAt( pastebin, CKEDITOR.POSITION_BEFORE_END );
222 range.select( true );
223 }
224
225 var editor = this;
226 // Wait a while and grab the pasted contents
227 window.setTimeout( function()
228 {
229 mode == 'text' && CKEDITOR.env.gecko && editor.focusGrabber.focus();
230 pastebin.remove();
231 editor.removeListener( 'selectionChange', cancel );
232
233 // Grab the HTML contents.
234 // We need to look for a apple style wrapper on webkit it also adds
235 // a div wrapper if you copy/paste the body of the editor.
236 // Remove hidden div and restore selection.
237 var bogusSpan;
238 pastebin = ( CKEDITOR.env.webkit
239 && ( bogusSpan = pastebin.getFirst() )
240 && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) ?
241 bogusSpan : pastebin );
242
243 sel.selectBookmarks( bms );
244 callback( pastebin[ 'get' + ( mode == 'text' ? 'Value' : 'Html' ) ]() );
245 }, 0 );
246 }
247
248 // Cutting off control type element in IE standards breaks the selection entirely. (#4881)
249 function fixCut( editor )
250 {
251 if ( !CKEDITOR.env.ie || CKEDITOR.env.quirks )
252 return;
253
254 var sel = editor.getSelection();
255 var control;
256 if( ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && ( control = sel.getSelectedElement() ) )
257 {
258 var range = sel.getRanges()[ 0 ];
259 var dummy = editor.document.createText( '' );
260 dummy.insertBefore( control );
261 range.setStartBefore( dummy );
262 range.setEndAfter( control );
263 sel.selectRanges( [ range ] );
264
265 // Clear up the fix if the paste wasn't succeeded.
266 setTimeout( function()
267 {
268 // Element still online?
269 if ( control.getParent() )
270 {
271 dummy.remove();
272 sel.selectElement( control );
273 }
274 }, 0 );
275 }
276 }
277
278 var depressBeforeEvent;
279 function stateFromNamedCommand( command, editor )
280 {
281 // IE Bug: queryCommandEnabled('paste') fires also 'beforepaste(copy/cut)',
282 // guard to distinguish from the ordinary sources( either
283 // keyboard paste or execCommand ) (#4874).
284 CKEDITOR.env.ie && ( depressBeforeEvent = 1 );
285
286 var retval = CKEDITOR.TRISTATE_OFF;
287 try { retval = editor.document.$.queryCommandEnabled( command ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED; }catch( er ){}
288
289 depressBeforeEvent = 0;
290 return retval;
291 }
292
293 var inReadOnly;
294 function setToolbarStates()
295 {
296 if ( this.mode != 'wysiwyg' )
297 return;
298
299 this.getCommand( 'cut' ).setState( inReadOnly ? CKEDITOR.TRISTATE_DISABLED : stateFromNamedCommand( 'Cut', this ) );
300 this.getCommand( 'copy' ).setState( stateFromNamedCommand( 'Copy', this ) );
301 var pasteState = inReadOnly ? CKEDITOR.TRISTATE_DISABLED :
302 CKEDITOR.env.webkit ? CKEDITOR.TRISTATE_OFF : stateFromNamedCommand( 'Paste', this );
303 this.fire( 'pasteState', pasteState );
304 }
305
306 // Register the plugin.
307 CKEDITOR.plugins.add( 'clipboard',
308 {
309 requires : [ 'dialog', 'htmldataprocessor' ],
310 init : function( editor )
311 {
312 // Inserts processed data into the editor at the end of the
313 // events chain.
314 editor.on( 'paste', function( evt )
315 {
316 var data = evt.data;
317 if ( data[ 'html' ] )
318 editor.insertHtml( data[ 'html' ] );
319 else if ( data[ 'text' ] )
320 editor.insertText( data[ 'text' ] );
321
322 setTimeout( function () { editor.fire( 'afterPaste' ); }, 0 );
323
324 }, null, null, 1000 );
325
326 editor.on( 'pasteDialog', function( evt )
327 {
328 setTimeout( function()
329 {
330 // Open default paste dialog.
331 editor.openDialog( 'paste' );
332 }, 0 );
333 });
334
335 editor.on( 'pasteState', function( evt )
336 {
337 editor.getCommand( 'paste' ).setState( evt.data );
338 });
339
340 function addButtonCommand( buttonName, commandName, command, ctxMenuOrder )
341 {
342 var lang = editor.lang[ commandName ];
343
344 editor.addCommand( commandName, command );
345 editor.ui.addButton( buttonName,
346 {
347 label : lang,
348 command : commandName
349 });
350
351 // If the "menu" plugin is loaded, register the menu item.
352 if ( editor.addMenuItems )
353 {
354 editor.addMenuItem( commandName,
355 {
356 label : lang,
357 command : commandName,
358 group : 'clipboard',
359 order : ctxMenuOrder
360 });
361 }
362 }
363
364 addButtonCommand( 'Cut', 'cut', new cutCopyCmd( 'cut' ), 1 );
365 addButtonCommand( 'Copy', 'copy', new cutCopyCmd( 'copy' ), 4 );
366 addButtonCommand( 'Paste', 'paste', pasteCmd, 8 );
367
368 CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) );
369
370 editor.on( 'key', onKey, editor );
371
372 // We'll be catching all pasted content in one line, regardless of whether the
373 // it's introduced by a document command execution (e.g. toolbar buttons) or
374 // user paste behaviors. (e.g. Ctrl-V)
375 editor.on( 'contentDom', function()
376 {
377 var body = editor.document.getBody();
378 body.on( CKEDITOR.env.webkit ? 'paste' : 'beforepaste', function( evt )
379 {
380 if ( depressBeforeEvent )
381 return;
382
383 // Fire 'beforePaste' event so clipboard flavor get customized
384 // by other plugins.
385 var eventData = { mode : 'html' };
386 editor.fire( 'beforePaste', eventData );
387
388 getClipboardData.call( editor, evt, eventData.mode, function ( data )
389 {
390 // The very last guard to make sure the
391 // paste has successfully happened.
392 if ( !( data = CKEDITOR.tools.trim( data.replace( /<span[^>]+data-cke-bookmark[^<]*?<\/span>/ig,'' ) ) ) )
393 return;
394
395 var dataTransfer = {};
396 dataTransfer[ eventData.mode ] = data;
397 editor.fire( 'paste', dataTransfer );
398 } );
399 });
400
401 // Dismiss the (wrong) 'beforepaste' event fired on context menu open. (#7953)
402 body.on( 'contextmenu', function()
403 {
404 depressBeforeEvent = 1;
405 setTimeout( function() { depressBeforeEvent = 0; }, 10 );
406 });
407
408 body.on( 'beforecut', function() { !depressBeforeEvent && fixCut( editor ); } );
409
410 body.on( 'mouseup', function(){ setTimeout( function(){ setToolbarStates.call( editor ); }, 0 ); }, editor );
411 body.on( 'keyup', setToolbarStates, editor );
412 });
413
414 // For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that.
415 editor.on( 'selectionChange', function( evt )
416 {
417 inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly();
418 setToolbarStates.call( editor );
419 });
420
421 // If the "contextmenu" plugin is loaded, register the listeners.
422 if ( editor.contextMenu )
423 {
424 editor.contextMenu.addListener( function( element, selection )
425 {
426 var readOnly = selection.getRanges()[ 0 ].checkReadOnly();
427 return {
428 cut : !readOnly && stateFromNamedCommand( 'Cut', editor ),
429 copy : stateFromNamedCommand( 'Copy', editor ),
430 paste : !readOnly && ( CKEDITOR.env.webkit ? CKEDITOR.TRISTATE_OFF : stateFromNamedCommand( 'Paste', editor ) )
431 };
432 });
433 }
434 }
435 });
436 })();
437
438 /**
439 * Fired when a clipboard operation is about to be taken into the editor.
440 * Listeners can manipulate the data to be pasted before having it effectively
441 * inserted into the document.
442 * @name CKEDITOR.editor#paste
443 * @since 3.1
444 * @event
445 * @param {String} [data.html] The HTML data to be pasted. If not available, e.data.text will be defined.
446 * @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.
447 */
448
449 /**
450 * Internal event to open the Paste dialog
451 * @name CKEDITOR.editor#pasteDialog
452 * @event
453 */