plugin.js 13 KB

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