-
Notifications
You must be signed in to change notification settings - Fork 2.5k
/
plugin.js
2520 lines (2196 loc) · 87.5 KB
/
plugin.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/**
* @ignore
* File overview: Clipboard support.
*/
//
// COPY & PASTE EXECUTION FLOWS:
// -- CTRL+C
// * if ( isCustomCopyCutSupported )
// * dataTransfer.setData( 'text/html', getSelectedHtml )
// * else
// * browser's default behavior
// -- CTRL+X
// * listen onKey (onkeydown)
// * fire 'saveSnapshot' on editor
// * if ( isCustomCopyCutSupported )
// * dataTransfer.setData( 'text/html', getSelectedHtml )
// * extractSelectedHtml // remove selected contents
// * else
// * browser's default behavior
// * deferred second 'saveSnapshot' event
// -- CTRL+V
// * listen onKey (onkeydown)
// * simulate 'beforepaste' for non-IEs on editable
// * listen 'onpaste' on editable ('onbeforepaste' for IE)
// * fire 'beforePaste' on editor
// * if ( !canceled && !dataTransfer.getData( 'text/html' ) && !htmlAlwaysInDataTransfer ) getClipboardDataByPastebin
// * fire 'paste' on editor
// * !canceled && fire 'afterPaste' on editor
// -- Copy command
// * tryToCutCopy
// * execCommand
// * !success && notification
// -- Cut command
// * fixCut
// * tryToCutCopy
// * execCommand
// * !success && notification
// -- Paste command
// * fire 'paste' on editable ('beforepaste' for IE)
// * !canceled && execCommand 'paste'
// * !success && fire 'pasteDialog' on editor
// -- Paste from native context menu & menubar
// (Fx & Webkits are handled in 'paste' default listner.
// Opera cannot be handled at all because it doesn't fire any events
// Special treatment is needed for IE, for which is this part of doc)
// * listen 'onpaste'
// * cancel native event
// * fire 'beforePaste' on editor
// * if ( !canceled && !dataTransfer.getData( 'text/html' ) && !htmlAlwaysInDataTransfer ) getClipboardDataByPastebin
// * execIECommand( 'paste' ) -> this fires another 'paste' event, so cancel it
// * fire 'paste' on editor
// * !canceled && fire 'afterPaste' on editor
//
//
// PASTE EVENT - PREPROCESSING:
// -- Possible dataValue types: auto, text, html.
// -- Possible dataValue contents:
// * text (possible \n\r)
// * htmlified text (text + br,div,p - no presentional markup & attrs - depends on browser)
// * html
// -- Possible flags:
// * htmlified - if true then content is a HTML even if no markup inside. This flag is set
// for content from editable pastebins, because they 'htmlify' pasted content.
//
// -- Type: auto:
// * content: htmlified text -> filter, unify text markup (brs, ps, divs), set type: text
// * content: html -> filter, set type: html
// -- Type: text:
// * content: htmlified text -> filter, unify text markup
// * content: html -> filter, strip presentional markup, unify text markup
// -- Type: html:
// * content: htmlified text -> filter, unify text markup
// * content: html -> filter
//
// -- Phases:
// * if dataValue is empty copy data from dataTransfer to dataValue (priority 1)
// * filtering (priorities 3-5) - e.g. pastefromword filters
// * content type sniffing (priority 6)
// * markup transformations for text (priority 6)
//
// DRAG & DROP EXECUTION FLOWS:
// -- Drag
// * save to the global object:
// * drag timestamp (with 'cke-' prefix),
// * selected html,
// * drag range,
// * editor instance.
// * put drag timestamp into event.dataTransfer.text
// -- Drop
// * if events text == saved timestamp && editor == saved editor
// internal drag & drop occurred
// * getRangeAtDropPosition
// * create bookmarks for drag and drop ranges starting from the end of the document
// * dragRange.deleteContents()
// * fire 'paste' with saved html and drop range
// * if events text == saved timestamp && editor != saved editor
// cross editor drag & drop occurred
// * getRangeAtDropPosition
// * fire 'paste' with saved html
// * dragRange.deleteContents()
// * FF: refreshCursor on afterPaste
// * if events text != saved timestamp
// drop form external source occurred
// * getRangeAtDropPosition
// * if event contains html data then fire 'paste' with html
// * else if event contains text data then fire 'paste' with encoded text
// * FF: refreshCursor on afterPaste
'use strict';
( function() {
// Register the plugin.
CKEDITOR.plugins.add( 'clipboard', {
requires: 'dialog',
// jscs:disable maximumLineLength
lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
// jscs:enable maximumLineLength
icons: 'copy,copy-rtl,cut,cut-rtl,paste,paste-rtl', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
init: function( editor ) {
var filterType,
filtersFactory = filtersFactoryFactory();
if ( editor.config.forcePasteAsPlainText ) {
filterType = 'plain-text';
} else if ( editor.config.pasteFilter ) {
filterType = editor.config.pasteFilter;
}
// On Webkit the pasteFilter defaults 'semantic-content' because pasted data is so terrible
// that it must be always filtered.
else if ( CKEDITOR.env.webkit && !( 'pasteFilter' in editor.config ) ) {
filterType = 'semantic-content';
}
editor.pasteFilter = filtersFactory.get( filterType );
initPasteClipboard( editor );
initDragDrop( editor );
CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) );
editor.on( 'paste', function( evt ) {
// Init `dataTransfer` if `paste` event was fired without it, so it will be always available.
if ( !evt.data.dataTransfer ) {
evt.data.dataTransfer = new CKEDITOR.plugins.clipboard.dataTransfer();
}
// If dataValue is already set do not override it.
if ( evt.data.dataValue ) {
return;
}
var dataTransfer = evt.data.dataTransfer,
// IE support only text data and throws exception if we try to get html data.
// This html data object may also be empty if we drag content of the textarea.
value = dataTransfer.getData( 'text/html' );
if ( value ) {
evt.data.dataValue = value;
evt.data.type = 'html';
} else {
// Try to get text data otherwise.
value = dataTransfer.getData( 'text/plain' );
if ( value ) {
evt.data.dataValue = editor.editable().transformPlainTextToHtml( value );
evt.data.type = 'text';
}
}
}, null, null, 1 );
editor.on( 'paste', function( evt ) {
var data = evt.data.dataValue,
blockElements = CKEDITOR.dtd.$block;
// Filter webkit garbage.
if ( data.indexOf( 'Apple-' ) > -1 ) {
// Replace special webkit's with simple space, because webkit
// produces them even for normal spaces.
data = data.replace( /<span class="Apple-converted-space"> <\/span>/gi, ' ' );
// Strip <span> around white-spaces when not in forced 'html' content type.
// This spans are created only when pasting plain text into Webkit,
// but for safety reasons remove them always.
if ( evt.data.type != 'html' ) {
data = data.replace( /<span class="Apple-tab-span"[^>]*>([^<]*)<\/span>/gi, function( all, spaces ) {
// Replace tabs with 4 spaces like Fx does.
return spaces.replace( /\t/g, ' ' );
} );
}
// This br is produced only when copying & pasting HTML content.
if ( data.indexOf( '<br class="Apple-interchange-newline">' ) > -1 ) {
evt.data.startsWithEOL = 1;
evt.data.preSniffing = 'html'; // Mark as not text.
data = data.replace( /<br class="Apple-interchange-newline">/, '' );
}
// Remove all other classes.
data = data.replace( /(<[^>]+) class="Apple-[^"]*"/gi, '$1' );
}
// Strip editable that was copied from inside. (#9534)
if ( data.match( /^<[^<]+cke_(editable|contents)/i ) ) {
var tmp,
editable_wrapper,
wrapper = new CKEDITOR.dom.element( 'div' );
wrapper.setHtml( data );
// Verify for sure and check for nested editor UI parts. (#9675)
while ( wrapper.getChildCount() == 1 &&
( tmp = wrapper.getFirst() ) &&
tmp.type == CKEDITOR.NODE_ELEMENT && // Make sure first-child is element.
( tmp.hasClass( 'cke_editable' ) || tmp.hasClass( 'cke_contents' ) ) ) {
wrapper = editable_wrapper = tmp;
}
// If editable wrapper was found strip it and bogus <br> (added on FF).
if ( editable_wrapper )
data = editable_wrapper.getHtml().replace( /<br>$/i, '' );
}
if ( CKEDITOR.env.ie ) {
// <p> -> <p> (br.cke-pasted-remove will be removed later)
data = data.replace( /^ (?: |\r\n)?<(\w+)/g, function( match, elementName ) {
if ( elementName.toLowerCase() in blockElements ) {
evt.data.preSniffing = 'html'; // Mark as not a text.
return '<' + elementName;
}
return match;
} );
} else if ( CKEDITOR.env.webkit ) {
// </p><div><br></div> -> </p><br>
// We don't mark br, because this situation can happen for htmlified text too.
data = data.replace( /<\/(\w+)><div><br><\/div>$/, function( match, elementName ) {
if ( elementName in blockElements ) {
evt.data.endsWithEOL = 1;
return '</' + elementName + '>';
}
return match;
} );
} else if ( CKEDITOR.env.gecko ) {
// Firefox adds bogus <br> when user pasted text followed by space(s).
data = data.replace( /(\s)<br>$/, '$1' );
}
evt.data.dataValue = data;
}, null, null, 3 );
editor.on( 'paste', function( evt ) {
var dataObj = evt.data,
type = dataObj.type,
data = dataObj.dataValue,
trueType,
// Default is 'html'.
defaultType = editor.config.clipboard_defaultContentType || 'html',
transferType = dataObj.dataTransfer.getTransferType( editor );
// If forced type is 'html' we don't need to know true data type.
if ( type == 'html' || dataObj.preSniffing == 'html' ) {
trueType = 'html';
} else {
trueType = recogniseContentType( data );
}
// Unify text markup.
if ( trueType == 'htmlifiedtext' ) {
data = htmlifiedTextHtmlification( editor.config, data );
}
// Strip presentional markup & unify text markup.
// Forced plain text (dialog or forcePAPT).
// Note: we do not check dontFilter option in this case, because forcePAPT was implemented
// before pasteFilter and pasteFilter is automatically used on Webkit&Blink since 4.5.0, so
// forcePAPT should have priority as it had before 4.5.0.
if ( type == 'text' && trueType == 'html' ) {
data = filterContent( editor, data, filtersFactory.get( 'plain-text' ) );
}
// External paste and pasteFilter exists and filtering isn't disabled.
else if ( transferType == CKEDITOR.DATA_TRANSFER_EXTERNAL && editor.pasteFilter && !dataObj.dontFilter ) {
data = filterContent( editor, data, editor.pasteFilter );
}
if ( dataObj.startsWithEOL ) {
data = '<br data-cke-eol="1">' + data;
}
if ( dataObj.endsWithEOL ) {
data += '<br data-cke-eol="1">';
}
if ( type == 'auto' ) {
type = ( trueType == 'html' || defaultType == 'html' ) ? 'html' : 'text';
}
dataObj.type = type;
dataObj.dataValue = data;
delete dataObj.preSniffing;
delete dataObj.startsWithEOL;
delete dataObj.endsWithEOL;
}, null, null, 6 );
// Inserts processed data into the editor at the end of the
// events chain.
editor.on( 'paste', function( evt ) {
var data = evt.data;
if ( data.dataValue ) {
editor.insertHtml( data.dataValue, data.type, data.range );
// Deffer 'afterPaste' so all other listeners for 'paste' will be fired first.
// Fire afterPaste only if paste inserted some HTML.
setTimeout( function() {
editor.fire( 'afterPaste' );
}, 0 );
}
}, null, null, 1000 );
editor.on( 'pasteDialog', function( evt ) {
// TODO it's possible that this setTimeout is not needed any more,
// because of changes introduced in the same commit as this comment.
// Editor.getClipboardData adds listener to the dialog's events which are
// fired after a while (not like 'showDialog').
setTimeout( function() {
// Open default paste dialog.
editor.openDialog( 'paste', evt.data );
}, 0 );
} );
}
} );
function firePasteEvents( editor, data, withBeforePaste ) {
if ( !data.type ) {
data.type = 'auto';
}
if ( withBeforePaste ) {
// Fire 'beforePaste' event so clipboard flavor get customized
// by other plugins.
if ( editor.fire( 'beforePaste', data ) === false )
return false; // Event canceled
}
// Do not fire paste if there is no data (dataValue and dataTranfser are empty).
// This check should be done after firing 'beforePaste' because for native paste
// 'beforePaste' is by default fired even for empty clipboard.
if ( !data.dataValue && data.dataTransfer.isEmpty() ) {
return false;
}
if ( !data.dataValue ) {
data.dataValue = '';
}
// Because of FF bug we need to use this hack, otherwise cursor is hidden
// or it is not possible to move it (#12420).
// Also, check that editor.toolbox exists, because the toolbar plugin might not be loaded (#13305).
if ( CKEDITOR.env.gecko && data.method == 'drop' && editor.toolbox ) {
editor.once( 'afterPaste', function() {
editor.toolbox.focus();
} );
}
return editor.fire( 'paste', data );
}
function initPasteClipboard( editor ) {
var clipboard = CKEDITOR.plugins.clipboard,
preventBeforePasteEvent = 0,
preventPasteEvent = 0,
inReadOnly = 0,
// Safari doesn't like 'beforepaste' event - it sometimes doesn't
// properly handles ctrl+c. Probably some race-condition between events.
// Chrome and Firefox works well with both events, so better to use 'paste'
// which will handle pasting from e.g. browsers' menu bars.
// IE7/8 doesn't like 'paste' event for which it's throwing random errors.
mainPasteEvent = CKEDITOR.env.ie ? 'beforepaste' : 'paste';
addListeners();
addButtonsCommands();
/**
* Gets clipboard data by directly accessing the clipboard (IE only) or opening paste dialog.
*
* editor.getClipboardData( { title: 'Get my data' }, function( data ) {
* if ( data )
* alert( data.type + ' ' + data.dataValue );
* } );
*
* @member CKEDITOR.editor
* @param {Object} options
* @param {String} [options.title] Title of paste dialog.
* @param {Function} callback Function that will be executed with `data.type` and `data.dataValue`
* or `null` if none of the capturing method succeeded.
*/
editor.getClipboardData = function( options, callback ) {
var beforePasteNotCanceled = false,
dataType = 'auto',
dialogCommited = false;
// Options are optional - args shift.
if ( !callback ) {
callback = options;
options = null;
}
// Listen with maximum priority to handle content before everyone else.
// This callback will handle paste event that will be fired if direct
// access to the clipboard succeed in IE.
editor.on( 'paste', onPaste, null, null, 0 );
// Listen at the end of listeners chain to see if event wasn't canceled
// and to retrieve modified data.type.
editor.on( 'beforePaste', onBeforePaste, null, null, 1000 );
// getClipboardDataDirectly() will fire 'beforePaste' synchronously, so we can
// check if it was canceled and if any listener modified data.type.
// If command didn't succeed (only IE allows to access clipboard and only if
// user agrees) open and handle paste dialog.
if ( getClipboardDataDirectly() === false ) {
// Direct access to the clipboard wasn't successful so remove listener.
editor.removeListener( 'paste', onPaste );
// If beforePaste was canceled do not open dialog.
// Add listeners only if dialog really opened. 'pasteDialog' can be canceled.
if ( beforePasteNotCanceled && editor.fire( 'pasteDialog', onDialogOpen ) ) {
editor.on( 'pasteDialogCommit', onDialogCommit );
// 'dialogHide' will be fired after 'pasteDialogCommit'.
editor.on( 'dialogHide', function( evt ) {
evt.removeListener();
evt.data.removeListener( 'pasteDialogCommit', onDialogCommit );
// Because Opera has to wait a while in pasteDialog we have to wait here.
setTimeout( function() {
// Notify even if user canceled dialog (clicked 'cancel', ESC, etc).
if ( !dialogCommited )
callback( null );
}, 10 );
} );
} else {
callback( null );
}
}
function onPaste( evt ) {
evt.removeListener();
evt.cancel();
callback( evt.data );
}
function onBeforePaste( evt ) {
evt.removeListener();
beforePasteNotCanceled = true;
dataType = evt.data.type;
}
function onDialogCommit( evt ) {
evt.removeListener();
// Cancel pasteDialogCommit so paste dialog won't automatically fire
// 'paste' evt by itself.
evt.cancel();
dialogCommited = true;
callback( { type: dataType, dataValue: evt.data, method: 'paste' } );
}
function onDialogOpen() {
this.customTitle = ( options && options.title );
}
};
function addButtonsCommands() {
addButtonCommand( 'Cut', 'cut', createCutCopyCmd( 'cut' ), 10, 1 );
addButtonCommand( 'Copy', 'copy', createCutCopyCmd( 'copy' ), 20, 4 );
addButtonCommand( 'Paste', 'paste', createPasteCmd(), 30, 8 );
function addButtonCommand( buttonName, commandName, command, toolbarOrder, ctxMenuOrder ) {
var lang = editor.lang.clipboard[ commandName ];
editor.addCommand( commandName, command );
editor.ui.addButton && editor.ui.addButton( buttonName, {
label: lang,
command: commandName,
toolbar: 'clipboard,' + toolbarOrder
} );
// If the "menu" plugin is loaded, register the menu item.
if ( editor.addMenuItems ) {
editor.addMenuItem( commandName, {
label: lang,
command: commandName,
group: 'clipboard',
order: ctxMenuOrder
} );
}
}
}
function addListeners() {
editor.on( 'key', onKey );
editor.on( 'contentDom', addPasteListenersToEditable );
// For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that.
editor.on( 'selectionChange', function( evt ) {
inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly();
setToolbarStates();
} );
// If the "contextmenu" plugin is loaded, register the listeners.
if ( editor.contextMenu ) {
editor.contextMenu.addListener( function( element, selection ) {
inReadOnly = selection.getRanges()[ 0 ].checkReadOnly();
return {
cut: stateFromNamedCommand( 'cut' ),
copy: stateFromNamedCommand( 'copy' ),
paste: stateFromNamedCommand( 'paste' )
};
} );
}
}
// Add events listeners to editable.
function addPasteListenersToEditable() {
var editable = editor.editable();
if ( CKEDITOR.plugins.clipboard.isCustomCopyCutSupported ) {
var initOnCopyCut = function( evt ) {
clipboard.initPasteDataTransfer( evt, editor );
evt.data.preventDefault();
};
editable.on( 'copy', initOnCopyCut );
editable.on( 'cut', initOnCopyCut );
// Delete content with the low priority so one can overwrite cut data.
editable.on( 'cut', function() {
editor.extractSelectedHtml();
}, null, null, 999 );
}
// We'll be catching all pasted content in one line, regardless of whether
// it's introduced by a document command execution (e.g. toolbar buttons) or
// user paste behaviors (e.g. CTRL+V).
editable.on( mainPasteEvent, function( evt ) {
if ( CKEDITOR.env.ie && preventBeforePasteEvent )
return;
// If you've just asked yourself why preventPasteEventNow() is not here, but
// in listener for CTRL+V and exec method of 'paste' command
// you've asked the same question we did.
//
// THE ANSWER:
//
// First thing to notice - this answer makes sense only for IE,
// because other browsers don't listen for 'paste' event.
//
// What would happen if we move preventPasteEventNow() here?
// For:
// * CTRL+V - IE fires 'beforepaste', so we prevent 'paste' and pasteDataFromClipboard(). OK.
// * editor.execCommand( 'paste' ) - we fire 'beforepaste', so we prevent
// 'paste' and pasteDataFromClipboard() and doc.execCommand( 'Paste' ). OK.
// * native context menu - IE fires 'beforepaste', so we prevent 'paste', but unfortunately
// on IE we fail with pasteDataFromClipboard() here, because of... we don't know why, but
// we just fail, so... we paste nothing. FAIL.
// * native menu bar - the same as for native context menu.
//
// But don't you know any way to distinguish first two cases from last two?
// Only one - special flag set in CTRL+V handler and exec method of 'paste'
// command. And that's what we did using preventPasteEventNow().
pasteDataFromClipboard( evt );
} );
// It's not possible to clearly handle all four paste methods (ctrl+v, native menu bar
// native context menu, editor's command) in one 'paste/beforepaste' event in IE.
//
// For ctrl+v & editor's command it's easy to handle pasting in 'beforepaste' listener,
// so we do this. For another two methods it's better to use 'paste' event.
//
// 'paste' is always being fired after 'beforepaste' (except of weird one on opening native
// context menu), so for two methods handled in 'beforepaste' we're canceling 'paste'
// using preventPasteEvent state.
//
// 'paste' event in IE is being fired before getClipboardDataByPastebin executes its callback.
//
// QUESTION: Why didn't you handle all 4 paste methods in handler for 'paste'?
// Wouldn't this just be simpler?
// ANSWER: Then we would have to evt.data.preventDefault() only for native
// context menu and menu bar pastes. The same with execIECommand().
// That would force us to mark CTRL+V and editor's paste command with
// special flag, other than preventPasteEvent. But we still would have to
// have preventPasteEvent for the second event fired by execIECommand.
// Code would be longer and not cleaner.
CKEDITOR.env.ie && editable.on( 'paste', function( evt ) {
if ( preventPasteEvent )
return;
// Cancel next 'paste' event fired by execIECommand( 'paste' )
// at the end of this callback.
preventPasteEventNow();
// Prevent native paste.
evt.data.preventDefault();
pasteDataFromClipboard( evt );
// Force IE to paste content into pastebin so pasteDataFromClipboard will work.
if ( !execIECommand( 'paste' ) )
editor.openDialog( 'paste' );
} );
// [IE] Dismiss the (wrong) 'beforepaste' event fired on context/toolbar menu open. (#7953)
if ( CKEDITOR.env.ie ) {
editable.on( 'contextmenu', preventBeforePasteEventNow, null, null, 0 );
editable.on( 'beforepaste', function( evt ) {
// Do not prevent event on CTRL+V and SHIFT+INS because it blocks paste (#11970).
if ( evt.data && !evt.data.$.ctrlKey && !evt.data.$.shiftKey )
preventBeforePasteEventNow();
}, null, null, 0 );
}
editable.on( 'beforecut', function() {
!preventBeforePasteEvent && fixCut( editor );
} );
var mouseupTimeout;
// Use editor.document instead of editable in non-IEs for observing mouseup
// since editable won't fire the event if selection process started within
// iframe and ended out of the editor (#9851).
editable.attachListener( CKEDITOR.env.ie ? editable : editor.document.getDocumentElement(), 'mouseup', function() {
mouseupTimeout = setTimeout( function() {
setToolbarStates();
}, 0 );
} );
// Make sure that deferred mouseup callback isn't executed after editor instance
// had been destroyed. This may happen when editor.destroy() is called in parallel
// with mouseup event (i.e. a button with onclick callback) (#10219).
editor.on( 'destroy', function() {
clearTimeout( mouseupTimeout );
} );
editable.on( 'keyup', setToolbarStates );
}
// Create object representing Cut or Copy commands.
function createCutCopyCmd( type ) {
return {
type: type,
canUndo: type == 'cut', // We can't undo copy to clipboard.
startDisabled: true,
exec: function() {
// Attempts to execute the Cut and Copy operations.
function tryToCutCopy( type ) {
if ( CKEDITOR.env.ie )
return execIECommand( type );
// non-IEs part
try {
// Other browsers throw an error if the command is disabled.
return editor.document.$.execCommand( type, false, null );
} catch ( e ) {
return false;
}
}
this.type == 'cut' && fixCut();
var success = tryToCutCopy( this.type );
if ( !success ) {
// Show cutError or copyError.
editor.showNotification( editor.lang.clipboard[ this.type + 'Error' ] ); // jshint ignore:line
}
return success;
}
};
}
function createPasteCmd() {
return {
// Snapshots are done manually by editable.insertXXX methods.
canUndo: false,
async: true,
exec: function( editor, data ) {
var fire = function( data, withBeforePaste ) {
data && firePasteEvents( editor, data, !!withBeforePaste );
editor.fire( 'afterCommandExec', {
name: 'paste',
command: cmd,
returnValue: !!data
} );
},
cmd = this;
// Check data precisely - don't open dialog on empty string.
if ( typeof data == 'string' )
fire( {
dataValue: data,
method: 'paste',
dataTransfer: clipboard.initPasteDataTransfer()
}, 1 );
else
editor.getClipboardData( fire );
}
};
}
function preventPasteEventNow() {
preventPasteEvent = 1;
// For safety reason we should wait longer than 0/1ms.
// We don't know how long execution of quite complex getClipboardData will take
// and in for example 'paste' listner execCommand() (which fires 'paste') is called
// after getClipboardData finishes.
// Luckily, it's impossible to immediately fire another 'paste' event we want to handle,
// because we only handle there native context menu and menu bar.
setTimeout( function() {
preventPasteEvent = 0;
}, 100 );
}
function preventBeforePasteEventNow() {
preventBeforePasteEvent = 1;
setTimeout( function() {
preventBeforePasteEvent = 0;
}, 10 );
}
// Tries to execute any of the paste, cut or copy commands in IE. Returns a
// boolean indicating that the operation succeeded.
// @param {String} command *LOWER CASED* name of command ('paste', 'cut', 'copy').
function execIECommand( command ) {
var doc = editor.document,
body = doc.getBody(),
enabled = false,
onExec = function() {
enabled = true;
};
// The following seems to be the only reliable way to detect that
// clipboard commands are enabled in IE. It will fire the
// onpaste/oncut/oncopy events only if the security settings allowed
// the command to execute.
body.on( command, onExec );
// IE7: document.execCommand has problem to paste into positioned element.
if ( CKEDITOR.env.version > 7 ) {
doc.$.execCommand( command );
} else {
doc.$.selection.createRange().execCommand( command );
}
body.removeListener( command, onExec );
return enabled;
}
// Cutting off control type element in IE standards breaks the selection entirely. (#4881)
function fixCut() {
if ( !CKEDITOR.env.ie || CKEDITOR.env.quirks )
return;
var sel = editor.getSelection(),
control, range, dummy;
if ( ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && ( control = sel.getSelectedElement() ) ) {
range = sel.getRanges()[ 0 ];
dummy = editor.document.createText( '' );
dummy.insertBefore( control );
range.setStartBefore( dummy );
range.setEndAfter( control );
sel.selectRanges( [ range ] );
// Clear up the fix if the paste wasn't succeeded.
setTimeout( function() {
// Element still online?
if ( control.getParent() ) {
dummy.remove();
sel.selectElement( control );
}
}, 0 );
}
}
// Allow to peek clipboard content by redirecting the
// pasting content into a temporary bin and grab the content of it.
function getClipboardDataByPastebin( evt, callback ) {
var doc = editor.document,
editable = editor.editable(),
cancel = function( evt ) {
evt.cancel();
},
blurListener;
// Avoid recursions on 'paste' event or consequent paste too fast. (#5730)
if ( doc.getById( 'cke_pastebin' ) )
return;
var sel = editor.getSelection();
var bms = sel.createBookmarks();
// #11384. On IE9+ we use native selectionchange (i.e. editor#selectionCheck) to cache the most
// recent selection which we then lock on editable blur. See selection.js for more info.
// selectionchange fired before getClipboardDataByPastebin() cached selection
// before creating bookmark (cached selection will be invalid, because bookmarks modified the DOM),
// so we need to fire selectionchange one more time, to store current seleciton.
// Selection will be locked when we focus pastebin.
if ( CKEDITOR.env.ie )
sel.root.fire( 'selectionchange' );
// Create container to paste into.
// For rich content we prefer to use "body" since it holds
// the least possibility to be splitted by pasted content, while this may
// breaks the text selection on a frame-less editable, "div" would be
// the best one in that case.
// In another case on old IEs moving the selection into a "body" paste bin causes error panic.
// Body can't be also used for Opera which fills it with <br>
// what is indistinguishable from pasted <br> (copying <br> in Opera isn't possible,
// but it can be copied from other browser).
var pastebin = new CKEDITOR.dom.element(
( CKEDITOR.env.webkit || editable.is( 'body' ) ) && !CKEDITOR.env.ie ? 'body' : 'div', doc );
pastebin.setAttributes( {
id: 'cke_pastebin',
'data-cke-temp': '1'
} );
var containerOffset = 0,
offsetParent,
win = doc.getWindow();
if ( CKEDITOR.env.webkit ) {
// It's better to paste close to the real paste destination, so inherited styles
// (which Webkits will try to compensate by styling span) differs less from the destination's one.
editable.append( pastebin );
// Style pastebin like .cke_editable, to minimize differences between origin and destination. (#9754)
pastebin.addClass( 'cke_editable' );
// Compensate position of offsetParent.
if ( !editable.is( 'body' ) ) {
// We're not able to get offsetParent from pastebin (body element), so check whether
// its parent (editable) is positioned.
if ( editable.getComputedStyle( 'position' ) != 'static' )
offsetParent = editable;
// And if not - safely get offsetParent from editable.
else
offsetParent = CKEDITOR.dom.element.get( editable.$.offsetParent );
containerOffset = offsetParent.getDocumentPosition().y;
}
} else {
// Opera and IE doesn't allow to append to html element.
editable.getAscendant( CKEDITOR.env.ie ? 'body' : 'html', 1 ).append( pastebin );
}
pastebin.setStyles( {
position: 'absolute',
// Position the bin at the top (+10 for safety) of viewport to avoid any subsequent document scroll.
top: ( win.getScrollPosition().y - containerOffset + 10 ) + 'px',
width: '1px',
// Caret has to fit in that height, otherwise browsers like Chrome & Opera will scroll window to show it.
// Set height equal to viewport's height - 20px (safety gaps), minimum 1px.
height: Math.max( 1, win.getViewPaneSize().height - 20 ) + 'px',
overflow: 'hidden',
// Reset styles that can mess up pastebin position.
margin: 0,
padding: 0
} );
// Paste fails in Safari when the body tag has 'user-select: none'. (#12506)
if ( CKEDITOR.env.safari )
pastebin.setStyles( CKEDITOR.tools.cssVendorPrefix( 'user-select', 'text' ) );
// Check if the paste bin now establishes new editing host.
var isEditingHost = pastebin.getParent().isReadOnly();
if ( isEditingHost ) {
// Hide the paste bin.
pastebin.setOpacity( 0 );
// And make it editable.
pastebin.setAttribute( 'contenteditable', true );
}
// Transparency is not enough since positioned non-editing host always shows
// resize handler, pull it off the screen instead.
else {
pastebin.setStyle( editor.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-1000px' );
}
editor.on( 'selectionChange', cancel, null, null, 0 );
// Webkit fill fire blur on editable when moving selection to
// pastebin (if body is used). Cancel it because it causes incorrect
// selection lock in case of inline editor (#10644).
// The same seems to apply to Firefox (#10787).
if ( CKEDITOR.env.webkit || CKEDITOR.env.gecko )
blurListener = editable.once( 'blur', cancel, null, null, -100 );
// Temporarily move selection to the pastebin.
isEditingHost && pastebin.focus();
var range = new CKEDITOR.dom.range( pastebin );
range.selectNodeContents( pastebin );
var selPastebin = range.select();
// If non-native paste is executed, IE will open security alert and blur editable.
// Editable will then lock selection inside itself and after accepting security alert
// this selection will be restored. We overwrite stored selection, so it's restored
// in pastebin. (#9552)
if ( CKEDITOR.env.ie ) {
blurListener = editable.once( 'blur', function() {
editor.lockSelection( selPastebin );
} );
}
var scrollTop = CKEDITOR.document.getWindow().getScrollPosition().y;
// Wait a while and grab the pasted contents.
setTimeout( function() {
// Restore main window's scroll position which could have been changed
// by browser in cases described in #9771.
if ( CKEDITOR.env.webkit )
CKEDITOR.document.getBody().$.scrollTop = scrollTop;
// Blur will be fired only on non-native paste. In other case manually remove listener.
blurListener && blurListener.removeListener();
// Restore properly the document focus. (#8849)
if ( CKEDITOR.env.ie )
editable.focus();
// IE7: selection must go before removing pastebin. (#8691)
sel.selectBookmarks( bms );
pastebin.remove();
// Grab the HTML contents.
// We need to look for a apple style wrapper on webkit it also adds
// a div wrapper if you copy/paste the body of the editor.
// Remove hidden div and restore selection.
var bogusSpan;
if ( CKEDITOR.env.webkit && ( bogusSpan = pastebin.getFirst() ) && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) )
pastebin = bogusSpan;
editor.removeListener( 'selectionChange', cancel );
callback( pastebin.getHtml() );
}, 0 );
}
// Try to get content directly on IE from clipboard, without native event
// being fired before. In other words - synthetically get clipboard data
// if it's possible.
// mainPasteEvent will be fired, so if forced native paste:
// * worked, getClipboardDataByPastebin will grab it,
// * didn't work, dataValue and dataTransfer will be empty and editor#paste won't be fired.
// On browsers other then IE it is not possible to get data directly so function will
// return false.
function getClipboardDataDirectly() {
// On non-IE it is not possible to get data directly.
if ( !CKEDITOR.env.ie ) {
// beforePaste should be fired when dialog open so it can be canceled.
editor.fire( 'beforePaste', { type: 'auto', method: 'paste' } );
return false;
}
// Prevent IE from pasting at the begining of the document.
editor.focus();
// Command will be handled by 'beforepaste', but as
// execIECommand( 'paste' ) will fire also 'paste' event
// we're canceling it.
preventPasteEventNow();
// #9247: Lock focus to prevent IE from hiding toolbar for inline editor.
var focusManager = editor.focusManager;
focusManager.lock();
if ( editor.editable().fire( mainPasteEvent ) && !execIECommand( 'paste' ) ) {
focusManager.unlock();
return false;
}
focusManager.unlock();
return true;
}
// Listens for some clipboard related keystrokes, so they get customized.
// Needs to be bind to keydown event.
function onKey( event ) {
if ( editor.mode != 'wysiwyg' )
return;