[239] | 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 | */
|
---|