Ticket #11526: dnd-paste-sample.html

File dnd-paste-sample.html, 3.9 KB (added by Piotrek Koszuliński, 7 years ago)
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <title>Drop file tests</title>
5        <meta charset="utf-8">
6        <style type="text/css">
7
8body {
9        font-family: sans-serif;
10        font-size: 0.8em;
11        line-height: 1.2;
12        width: 960px;
13        margin: 0 auto;
14}
15#droparea {
16        box-shadow: inset 0 0 20px #AAA;
17        padding: 10px 20px;
18}
19#droparea:focus {
20        outline: solid 2px #ace;
21}
22
23        </style>
24        <script src="../ckeditor.js"></script>
25</head>
26<body>
27        <section>
28                <h1>Plain text source</h1>
29                <textarea cols="80" rows="5">
30foo bar
31foo bar
32
33foo bar
34                </textarea>
35        </section>
36        <section>
37                <h1>HTML source</h1>
38
39                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan faucibus nunc ut luctus. Ut dignissim libero enim, eget cursus libero faucibus consectetur. Praesent luctus, quam nec ultrices consectetur, ligula sapien porta purus, ac fringilla purus nunc eu odio.</p>
40
41                <p><img src="./crayons.jpg" alt="Crayons" width="100" height="100"></p>
42
43                <p>Aliquam <b>mi est</b>, interdum a augue ut, bibendum laoreet sem. Sed scelerisque, eros nec hendrerit tempus, metus ante eleifend urna, quis auctor arcu magna condimentum dolor. Nullam varius cursus luctus. Aliquam quis risus ac turpis volutpat pellentesque. Fusce vestibulum arcu blandit ornare eleifend.</p>
44        </section>
45
46        <section>
47                <h1>Editable HTML source &amp; drop and paste area</h1>
48                <div id="droparea" contenteditable="true">
49                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan faucibus nunc ut luctus. Ut dignissim libero enim, eget cursus libero faucibus consectetur. Praesent luctus, quam nec ultrices consectetur, ligula sapien porta purus, ac fringilla purus nunc eu odio.</p>
50
51                        <p><img src="./crayons.jpg" alt="Crayons" width="100" height="100"></p>
52
53                        <p>Aliquam <b>mi est</b>, interdum a augue ut, bibendum laoreet sem. Sed scelerisque, eros nec hendrerit tempus, metus ante eleifend urna, quis auctor arcu magna condimentum dolor. Nullam varius cursus luctus. Aliquam quis risus ac turpis volutpat pellentesque. Fusce vestibulum arcu blandit ornare eleifend.</p>
54                </div>
55        </section>
56
57        <script>
58'use strict';
59
60CKEDITOR.disableAutoInline = true;
61
62var droparea = CKEDITOR.document.getById( 'droparea' ),
63        dragoverLogged;
64
65droparea.on( 'drop', function( evt ) {
66        evt.data.preventDefault();
67
68        dragoverLogged = false;
69        dumpData( 'drop', evt.data.$.dataTransfer );
70} );
71
72droparea.on( 'paste', function( evt ) {
73        evt.data.preventDefault();
74
75        dragoverLogged = false;
76        dumpData( 'paste', evt.data.$.clipboardData || window.clipboardData );
77} );
78
79// We need to cancel dragover event on IE.
80// Otherwise files dropping won't work.
81droparea.on( 'dragover', function( evt ) {
82        evt.data.preventDefault();
83
84        // Log dragover only once. It killed my IE8!
85        if ( !dragoverLogged ) {
86                dumpData( 'dragover', evt.data.$.dataTransfer );
87                dragoverLogged = true;
88        }
89} );
90
91function dumpData( eventName, data ) {
92        var msg = '\n######## ' + eventName + ' ########';
93
94        if ( !data ) {
95                msg += '\n## ERROR: no data... ##\n';
96                console.log( msg );
97                return;
98        }
99
100        var types = data.types,
101                files = data.files,
102                items = data.items,
103                dataForType,
104                file, item,
105                i;
106
107        if ( !types ) {
108                msg += '\n## ERROR: types are undefined. IE, I assume? Let me guess types... ##';
109                types = [ 'Text', 'Files', 'Url' ];
110        }
111
112        for ( i = 0; i < types.length; ++i ) {
113                try {
114                        dataForType = '';
115                        dataForType = data.getData( types[ i ] );
116                } catch ( e ) {}
117
118                if ( dataForType ) {
119                        msg += '\n\n## data (type: ' + types[ i ] + ') ##\n\n';
120                        msg += dataForType;
121                }
122        }
123
124        if ( files ) {
125                for ( i = 0; i < files.length; ++i ) {
126                        file = files[ i ];
127                        msg += '\n\n## file (name: ' + file.name + ') ##';
128                }
129        }
130
131        if ( items ) {
132                for ( i = 0; i < items.length; ++i ) {
133                        item = items[ i ];
134                        msg += '\n\n## item (type: ' + item.type;
135
136                        switch ( item.type ) {
137                                case 'file':
138                                        msg +=', name: ' + ( item.getAsFile() && item.getAsFile().name ) + ') ##';
139                                        break;
140                                default:
141                                        msg += ', kind: ' + item.kind + ') ##';
142                        }
143                }
144        }
145
146        msg += '\n';
147
148        console.log( msg );
149}
150        </script>
151</body>
152</html>
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy