3 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
9 <title>Clipboard playground
– CKEditor Sample
</title>
10 <script src=
"../../../ckeditor.js"></script>
11 <link href=
"../../../samples/old/sample.css" rel=
"stylesheet">
30 border: solid
3px #
555;
34 border-bottom: solid
1px #
555;
37 background: rgba(
0,
0,
0,
0.25);
38 transition: background-color
1s;
41 background: rgba(
0,
0,
0,
0);
43 #console time, #console .prompt {
45 display: inline-block;
49 background: rgba(
0,
0,
0,
0.5 );
55 background: rgba(
0,
0,
0,
0.1 );
63 background-color: #EEE;
64 background-color: rgba(
0,
0,
0,
0.1);
73 CKEditor Sample
— clipboard plugin playground
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>
84 <textarea cols=
"80" id=
"editor2" name=
"editor2" rows=
"10"><p
>This is more
<strong
class="MsoNormal"
>sample text
</strong
>.
</p
></textarea>
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>
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>
99 <textarea cols=
"80" id=
"editor5" name=
"editor5" rows=
"10">Editor with autoParagraphing set to off.
</textarea>
101 <div id=
"editor6" contenteditable=
"true" style=
"font-family: Georgia; font-size: 14px">
103 <p>Content content content.
</p>
104 <p class=
"someClass">Styled by
<code>.someClass
</code>.
</p>
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 || '' );
122 window.console && console.log && console.log( format( '[{time}] {title}: {msg}' ) );
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>' );
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 );
134 var observe = function( editor, num ) {
135 var p = 'EDITOR ' + num + '
> ';
137 editor.on( 'paste', function( event ) {
138 log( p + 'paste(prior:-
1)', event.data.type + ' - "' + event.data.dataValue + '"' );
140 editor.on( 'paste', function( event ) {
141 log( p + 'paste(prior:
10)', event.data.type + ' - "' + event.data.dataValue + '"' );
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 );
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' );
155 editor.on( 'copy', function( event ) {
158 editor.on( 'cut', function( event ) {
163 CKEDITOR.disableAutoInline = true;
166 toolbar: [ [ 'Source' ] ],
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 );
176 editor3.on( 'beforePaste', function( evt ) {
177 evt.data.type = 'text';
180 observe( editor1,
1 );
181 observe( editor2,
2 );
182 observe( editor3,
3 );
183 observe( editor4,
4 );
184 observe( editor5,
5 );
185 observe( editor6,
6 );