diff options
Diffstat (limited to 'plugins/clipboard/dev/clipboard.html')
| -rw-r--r-- | plugins/clipboard/dev/clipboard.html | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/plugins/clipboard/dev/clipboard.html b/plugins/clipboard/dev/clipboard.html new file mode 100644 index 0000000..8f9f050 --- /dev/null +++ b/plugins/clipboard/dev/clipboard.html @@ -0,0 +1,210 @@ +<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Clipboard playground – CKEditor Sample</title>
+ <script src="../../../ckeditor.js"></script>
+ <link href="../../../samples/sample.css" rel="stylesheet">
+ <style>
+body {
+ margin: 0;
+}
+
+#editables, #console
+{
+ width: 48%;
+}
+#editable {
+ padding: 5px 10px;
+}
+
+#console {
+ position: fixed;
+ top: 10px;
+ right: 30px;
+ height: 500px;
+ border: solid 3px #555;
+ overflow: auto;
+}
+#console > p {
+ border-bottom: solid 1px #555;
+ margin: 0;
+ padding: 0 5px;
+ background: rgba(0, 0, 0, 0.25);
+ -webkit-transition: background-color 1s;
+ -moz-transition: background-color 1s;
+ -o-transition: background-color 1s;
+ -ms-transition: background-color 1s;
+ transition: background-color 1s;
+}
+#console > p.old {
+ background: rgba(0, 0, 0, 0);
+}
+#console time, #console .prompt {
+ padding: 0 5px;
+ display: inline-block;
+}
+#console time {
+ background: #999;
+ background: rgba(0, 0, 0, 0.5 );
+ color: #FFF;
+ margin-left: -5px;
+}
+#console .prompt {
+ background: #DDD;
+ background: rgba(0, 0, 0, 0.1 );
+ min-width: 200px;
+}
+.someClass {
+ color: blue;
+}
+.specChar {
+ color: #777;
+ background-color: #EEE;
+ background-color: rgba(0, 0, 0, 0.1);
+ font-size: 0.8em;
+ border-radius: 2px;
+ padding: 1px;
+}
+ </style>
+</head>
+<body>
+ <h1 class="samples">
+ CKEditor Sample — clipboard plugin playground
+ </h1>
+ <div id="editables">
+ <p>
+ <label for="editor1">
+ Editor 1:</label>
+ <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>
+ </p>
+ <p>
+ <label for="editor2">
+ Editor 2:</label>
+ <textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is more <strong class="MsoNormal">sample text</strong>.</p></textarea>
+ </p>
+ <p>
+ <label for="editor3">
+ Editor 3:</label>
+ <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>
+ </p>
+ <p>
+ <label for="editor4">
+ Editor 4:</label>
+ <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>
+ </p>
+ <p>
+ <label for="editor5">
+ Editor 5:</label>
+ <textarea cols="80" id="editor5" name="editor5" rows="10">Editor with autoParagraphing set to off.</textarea>
+ </p>
+ <div id="editor6" contenteditable="true" style="font-family: Georgia; font-size: 14px">
+ <h1>Editor 6</h1>
+ <p>Content content content.</p>
+ <p class="someClass">Styled by <code>.someClass</code>.</p>
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+( function()
+{
+ 'use strict';
+
+ var log = window.__log = function( title, msg )
+ {
+ var msgEl = new CKEDITOR.dom.element( 'p' ),
+ consoleEl = CKEDITOR.document.getById( 'console' ),
+ time = new Date().toString().match( /\d\d:\d\d:\d\d/ )[ 0 ],
+ format = function( tpl )
+ {
+ return tpl.replace( /{time}/g, time ).replace( '{title}', title ).replace( '{msg}', msg || '' );
+ };
+
+ window.console && console.log && console.log( format( '[{time}] {title}: {msg}' ) );
+
+ msg = ( msg || '' ).replace( /\r/g, '{\\r}' ).replace( /\n/g, '{\\n}' ).replace( /\t/g, '{\\t}' );
+ msg = CKEDITOR.tools.htmlEncode( msg );
+ msg = msg.replace( /\{(\\\w)\}/g, '<code class="specChar">$1</code>' );
+
+ msgEl.setHtml( format( '<time datetime="{time}">{time}</time><span class="prompt">{title}</span> {msg}' ) );
+ consoleEl.append( msgEl );
+ consoleEl.$.scrollTop = consoleEl.$.scrollHeight;
+ setTimeout( function () { msgEl.addClass( 'old' ); }, 250 );
+ };
+
+ var observe = function( editor, num )
+ {
+ var p = 'EDITOR ' + num + ' > ';
+
+ editor.on( 'paste', function( event )
+ {
+ log( p + 'paste(prior:-1)', event.data.type + ' - "' + event.data.dataValue + '"' );
+ }, null, null, -1 );
+ editor.on( 'paste', function( event )
+ {
+ log( p + 'paste(prior:10)', event.data.type + ' - "' + event.data.dataValue + '"' );
+ });
+ editor.on( 'paste', function( event )
+ {
+ log( p + 'paste(prior:999)', event.data.type + ' - "' + event.data.dataValue + '"' );
+ }, null, null, 999 );
+ editor.on( 'beforePaste', function( event )
+ {
+ log( p + 'beforePaste', event.data.type );
+ });
+ editor.on( 'beforePaste', function( event )
+ {
+ log( p + 'beforePaste(prior:999)', event.data.type );
+ }, null, null, 999 );
+ editor.on( 'afterPaste', function( event )
+ {
+ log( p + 'afterPaste' );
+ });
+ editor.on( 'copy', function( event )
+ {
+ log( p + 'copy' );
+ });
+ editor.on( 'cut', function( event )
+ {
+ log( p + 'cut' );
+ });
+ };
+
+ CKEDITOR.disableAutoInline = true;
+ var config =
+ {
+ height : 120,
+ toolbar : 'Custom',
+ toolbar_Custom :
+ [
+ { name: 'custom', items : [ 'Source','Bold','Italic','Underline','-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }
+ ]
+ },
+ editor1 = CKEDITOR.replace( 'editor1', config ),
+ editor2 = CKEDITOR.replace( 'editor2', config ),
+ editor3 = CKEDITOR.replace( 'editor3', config ),
+ editor4 = CKEDITOR.replace( 'editor4', CKEDITOR.tools.extend( { forcePasteAsPlainText : true }, config ) ),
+ editor5 = CKEDITOR.replace( 'editor5', CKEDITOR.tools.extend( { autoParagraph : false }, config ) ),
+ editor6 = CKEDITOR.inline( document.getElementById( 'editor6' ), config );
+
+ editor3.on( 'beforePaste', function( evt )
+ {
+ evt.data.type = 'text';
+ });
+
+ observe( editor1, 1 );
+ observe( editor2, 2 );
+ observe( editor3, 3 );
+ observe( editor4, 4 );
+ observe( editor5, 5 );
+ observe( editor6, 6 );
+
+})();
+ </script>
+</body>
+</html>
|