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