projects / perso / Immae / Projets / packagist / connexionswing-ckeditor-component.git / blame
| Commit | Line | Data |
|---|---|---|
| 7adcb81e IB |
1 | <!DOCTYPE html>\r |
| 2 | <!--\r | |
| 3b35bd27 | 3 | Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r |
| 7adcb81e IB |
4 | For licensing, see LICENSE.md or http://ckeditor.com/license\r |
| 5 | -->\r | |
| 6 | <html>\r | |
| 7 | <head>\r | |
| 8 | <meta charset="utf-8">\r | |
| 9 | <title>Clipboard playground – CKEditor Sample</title>\r | |
| 10 | <script src="../../../ckeditor.js"></script>\r | |
| 11 | <link href="../../../samples/old/sample.css" rel="stylesheet">\r | |
| 12 | <style>\r | |
| 13 | body {\r | |
| 14 | margin: 0;\r | |
| 15 | }\r | |
| 16 | \r | |
| 17 | #editables, #console\r | |
| 18 | {\r | |
| 19 | width: 48%;\r | |
| 20 | }\r | |
| 21 | #editable {\r | |
| 22 | padding: 5px 10px;\r | |
| 23 | }\r | |
| 24 | \r | |
| 25 | #console {\r | |
| 26 | position: fixed;\r | |
| 27 | top: 10px;\r | |
| 28 | right: 30px;\r | |
| 29 | height: 500px;\r | |
| 30 | border: solid 3px #555;\r | |
| 31 | overflow: auto;\r | |
| 32 | }\r | |
| 33 | #console > p {\r | |
| 34 | border-bottom: solid 1px #555;\r | |
| 35 | margin: 0;\r | |
| 36 | padding: 0 5px;\r | |
| 37 | background: rgba(0, 0, 0, 0.25);\r | |
| 38 | transition: background-color 1s;\r | |
| 39 | }\r | |
| 40 | #console > p.old {\r | |
| 41 | background: rgba(0, 0, 0, 0);\r | |
| 42 | }\r | |
| 43 | #console time, #console .prompt {\r | |
| 44 | padding: 0 5px;\r | |
| 45 | display: inline-block;\r | |
| 46 | }\r | |
| 47 | #console time {\r | |
| 48 | background: #999;\r | |
| 49 | background: rgba(0, 0, 0, 0.5 );\r | |
| 50 | color: #FFF;\r | |
| 51 | margin-left: -5px;\r | |
| 52 | }\r | |
| 53 | #console .prompt {\r | |
| 54 | background: #DDD;\r | |
| 55 | background: rgba(0, 0, 0, 0.1 );\r | |
| 56 | min-width: 200px;\r | |
| 57 | }\r | |
| 58 | .someClass {\r | |
| 59 | color: blue;\r | |
| 60 | }\r | |
| 61 | .specChar {\r | |
| 62 | color: #777;\r | |
| 63 | background-color: #EEE;\r | |
| 64 | background-color: rgba(0, 0, 0, 0.1);\r | |
| 65 | font-size: 0.8em;\r | |
| 66 | border-radius: 2px;\r | |
| 67 | padding: 1px;\r | |
| 68 | }\r | |
| 69 | </style>\r | |
| 70 | </head>\r | |
| 71 | <body>\r | |
| 72 | <h1 class="samples">\r | |
| 73 | CKEditor Sample — clipboard plugin playground\r | |
| 74 | </h1>\r | |
| 75 | <div id="editables">\r | |
| 76 | <p>\r | |
| 77 | <label for="editor1">\r | |
| 78 | Editor 1:</label>\r | |
| 79 | <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>\r | |
| 80 | </p>\r | |
| 81 | <p>\r | |
| 82 | <label for="editor2">\r | |
| 83 | Editor 2:</label>\r | |
| 84 | <textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is more <strong class="MsoNormal">sample text</strong>.</p></textarea>\r | |
| 85 | </p>\r | |
| 86 | <p>\r | |
| 87 | <label for="editor3">\r | |
| 88 | Editor 3:</label>\r | |
| 89 | <textarea cols="80" id="editor3" name="editor3" rows="10"><p>This editor <strong>forces pasting in text mode</strong> by listening for "beforePaste" event.</p></textarea>\r | |
| 90 | </p>\r | |
| 91 | <p>\r | |
| 92 | <label for="editor4">\r | |
| 93 | Editor 4:</label>\r | |
| 94 | <textarea cols="80" id="editor4" name="editor4" rows="10"><p>This editor <strong>forces pasting in text mode</strong> by "forcePasteAsPlainText" config option.</p></textarea>\r | |
| 95 | </p>\r | |
| 96 | <p>\r | |
| 97 | <label for="editor5">\r | |
| 98 | Editor 5:</label>\r | |
| 99 | <textarea cols="80" id="editor5" name="editor5" rows="10">Editor with autoParagraphing set to off.</textarea>\r | |
| 100 | </p>\r | |
| 101 | <div id="editor6" contenteditable="true" style="font-family: Georgia; font-size: 14px">\r | |
| 102 | <h1>Editor 6</h1>\r | |
| 103 | <p>Content content content.</p>\r | |
| 104 | <p class="someClass">Styled by <code>.someClass</code>.</p>\r | |
| 105 | </div>\r | |
| 106 | </div>\r | |
| 107 | <div id="console">\r | |
| 108 | </div>\r | |
| 109 | <script>\r | |
| 110 | ( function()\r | |
| 111 | {\r | |
| 112 | 'use strict';\r | |
| 113 | \r | |
| 114 | var log = window.__log = function( title, msg ) {\r | |
| 115 | var msgEl = new CKEDITOR.dom.element( 'p' ),\r | |
| 116 | consoleEl = CKEDITOR.document.getById( 'console' ),\r | |
| 117 | time = new Date().toString().match( /\d\d:\d\d:\d\d/ )[ 0 ],\r | |
| 118 | format = function( tpl ) {\r | |
| 119 | return tpl.replace( /{time}/g, time ).replace( '{title}', title ).replace( '{msg}', msg || '' );\r | |
| 120 | };\r | |
| 121 | \r | |
| 122 | window.console && console.log && console.log( format( '[{time}] {title}: {msg}' ) );\r | |
| 123 | \r | |
| 124 | msg = ( msg || '' ).replace( /\r/g, '{\\r}' ).replace( /\n/g, '{\\n}' ).replace( /\t/g, '{\\t}' );\r | |
| 125 | msg = CKEDITOR.tools.htmlEncode( msg );\r | |
| 126 | msg = msg.replace( /\{(\\\w)\}/g, '<code class="specChar">$1</code>' );\r | |
| 127 | \r | |
| 128 | msgEl.setHtml( format( '<time datetime="{time}">{time}</time><span class="prompt">{title}</span> {msg}' ) );\r | |
| 129 | consoleEl.append( msgEl );\r | |
| 130 | consoleEl.$.scrollTop = consoleEl.$.scrollHeight;\r | |
| 131 | setTimeout( function() { msgEl.addClass( 'old' ); }, 250 );\r | |
| 132 | };\r | |
| 133 | \r | |
| 134 | var observe = function( editor, num ) {\r | |
| 135 | var p = 'EDITOR ' + num + ' > ';\r | |
| 136 | \r | |
| 137 | editor.on( 'paste', function( event ) {\r | |
| 138 | log( p + 'paste(prior:-1)', event.data.type + ' - "' + event.data.dataValue + '"' );\r | |
| 139 | }, null, null, -1 );\r | |
| 140 | editor.on( 'paste', function( event ) {\r | |
| 141 | log( p + 'paste(prior:10)', event.data.type + ' - "' + event.data.dataValue + '"' );\r | |
| 142 | } );\r | |
| 143 | editor.on( 'paste', function( event ) {\r | |
| 144 | log( p + 'paste(prior:999)', event.data.type + ' - "' + event.data.dataValue + '"' );\r | |
| 145 | }, null, null, 999 );\r | |
| 146 | editor.on( 'beforePaste', function( event ) {\r | |
| 147 | log( p + 'beforePaste', event.data.type );\r | |
| 148 | } );\r | |
| 149 | editor.on( 'beforePaste', function( event ) {\r | |
| 150 | log( p + 'beforePaste(prior:999)', event.data.type );\r | |
| 151 | }, null, null, 999 );\r | |
| 152 | editor.on( 'afterPaste', function( event ) {\r | |
| 153 | log( p + 'afterPaste' );\r | |
| 154 | } );\r | |
| 155 | editor.on( 'copy', function( event ) {\r | |
| 156 | log( p + 'copy' );\r | |
| 157 | } );\r | |
| 158 | editor.on( 'cut', function( event ) {\r | |
| 159 | log( p + 'cut' );\r | |
| 160 | } );\r | |
| 161 | };\r | |
| 162 | \r | |
| 163 | CKEDITOR.disableAutoInline = true;\r | |
| 164 | var config = {\r | |
| 165 | height: 120,\r | |
| 166 | toolbar: [ [ 'Source' ] ],\r | |
| 167 | allowedContent: true\r | |
| 168 | },\r | |
| 169 | editor1 = CKEDITOR.replace( 'editor1', config ),\r | |
| 170 | editor2 = CKEDITOR.replace( 'editor2', config ),\r | |
| 171 | editor3 = CKEDITOR.replace( 'editor3', config ),\r | |
| 172 | editor4 = CKEDITOR.replace( 'editor4', CKEDITOR.tools.extend( { forcePasteAsPlainText: true }, config ) ),\r | |
| 173 | editor5 = CKEDITOR.replace( 'editor5', CKEDITOR.tools.extend( { autoParagraph: false }, config ) ),\r | |
| 174 | editor6 = CKEDITOR.inline( document.getElementById( 'editor6' ), config );\r | |
| 175 | \r | |
| 176 | editor3.on( 'beforePaste', function( evt ) {\r | |
| 177 | evt.data.type = 'text';\r | |
| 178 | } );\r | |
| 179 | \r | |
| 180 | observe( editor1, 1 );\r | |
| 181 | observe( editor2, 2 );\r | |
| 182 | observe( editor3, 3 );\r | |
| 183 | observe( editor4, 4 );\r | |
| 184 | observe( editor5, 5 );\r | |
| 185 | observe( editor6, 6 );\r | |
| 186 | \r | |
| 187 | })();\r | |
| 188 | </script>\r | |
| 189 | </body>\r | |
| 190 | </html>\r |