sources/plugins/clipboard/dev/clipboard.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2016, 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 &ndash; 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 &mdash; 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">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  80                 </p>
  81                 <p>
  82                         <label for="editor2">
  83                                 Editor 2:</label>
  84                         <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is more &lt;strong class="MsoNormal"&gt;sample text&lt;/strong&gt;.&lt;/p&gt;</textarea>
  85                 </p>
  86                 <p>
  87                         <label for="editor3">
  88                                 Editor 3:</label>
  89                         <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This editor &lt;strong&gt;forces pasting in text mode&lt;/strong&gt; by listening for "beforePaste" event.&lt;/p&gt;</textarea>
  90                 </p>
  91                 <p>
  92                         <label for="editor4">
  93                                 Editor 4:</label>
  94                         <textarea cols="80" id="editor4" name="editor4" rows="10">&lt;p&gt;This editor &lt;strong&gt;forces pasting in text mode&lt;/strong&gt; by "forcePasteAsPlainText" config option.&lt;/p&gt;</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>