| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Drop file tests</title> |
|---|
| 5 | <meta charset="utf-8"> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | |
|---|
| 8 | body { |
|---|
| 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"> |
|---|
| 30 | foo bar |
|---|
| 31 | foo bar |
|---|
| 32 | |
|---|
| 33 | foo 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 & 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 | |
|---|
| 60 | CKEDITOR.disableAutoInline = true; |
|---|
| 61 | |
|---|
| 62 | var droparea = CKEDITOR.document.getById( 'droparea' ), |
|---|
| 63 | dragoverLogged; |
|---|
| 64 | |
|---|
| 65 | droparea.on( 'drop', function( evt ) { |
|---|
| 66 | evt.data.preventDefault(); |
|---|
| 67 | |
|---|
| 68 | dragoverLogged = false; |
|---|
| 69 | dumpData( 'drop', evt.data.$.dataTransfer ); |
|---|
| 70 | } ); |
|---|
| 71 | |
|---|
| 72 | droparea.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. |
|---|
| 81 | droparea.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 | |
|---|
| 91 | function 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> |
|---|
