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