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