]>
Commit | Line | Data |
---|---|---|
c63493c8 IB |
1 | <!DOCTYPE html>\r |
2 | <!--\r | |
3 | Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r | |
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 |