sources/plugins/undo/dev/snapshot.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>Replace Textarea by Code &mdash; CKEditor Sample</title>
  10         <script src="../../../ckeditor.js"></script>
  11         <link href="../../../samples/old/sample.css" rel="stylesheet">
  12 </head>
  13 <body>
  14         <h1 class="samples">
  15                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements Using JavaScript Code
  16         </h1>
  17         <form action="sample_posteddata.php" method="post">
  18                 <div class="description">
  19                         <p>
  20                                 This editor is using an <code>&lt;iframe&gt;</code> element-based editing area, provided by the <strong>Wysiwygarea</strong> plugin.
  21                         </p>
  22 <pre class="samples">
  23 CKEDITOR.replace( '<em>textarea_id</em>' )
  24 </pre>
  25                 </div>
  26                 <textarea cols="80" id="editor1" name="editor1" rows="10">
  27                         &lt;p&gt;Apollo 11&lt;/p&gt;
  28                         &lt;p&gt;111 222 333 444 555 666 777&lt;/p&gt;
  29                 </textarea>
  30                 <p>
  31                         <input type="submit" value="Submit">
  32                 </p>
  33         </form>
  34         <div id="footer">
  35                 <hr>
  36                 <p>
  37                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  38                 </p>
  39                 <p id="copy">
  40                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  41                         Knabben. All rights reserved.
  42                 </p>
  43         </div>
  44         <div id="debugConsole">
  45                 <div>Snapshots: <strong id="debugSnapshotsCount">0</strong></div>
  46                 <div>Typing: <strong id="debugTypingVal">false</strong></div>
  47         </div>
  48         <div id="undoControls">
  49                 <a onclick="CKEDITOR.instances.editor1.execCommand('undo');" href="#">&lt; Undo</a>
  50                 <a onclick="CKEDITOR.instances.editor1.execCommand('redo');" href="#">Redo &gt;</a>
  51         </div>
  52         <script type="text/javascript">
  53         var snapCount = document.getElementById( 'debugSnapshotsCount' ),
  54                 typingTracer = document.getElementById( 'debugTypingVal' ),
  55                 updateTypingTracer = function() {
  56                         typingTracer.innerHTML = String( CKEDITOR.instances.editor1.undoManager.typing );
  57                 },
  58                 updateSnapshotCounter = function() {
  59                         if ( !CKEDITOR && CKEDITOR.instances.editor1 )
  60                                 return;
  61
  62                         snapCount.innerHTML = CKEDITOR.instances.editor1.undoManager.snapshots.length;
  63                         updateTypingTracer();
  64                 };
  65
  66         CKEDITOR.replace( 'editor1', {
  67                 toolbar: [ [ 'Source', 'Bold', 'Italic' ] ,[ 'Undo' ], [ 'Redo' ] ],
  68                 on: {
  69                         instanceReady: function( evt ) {
  70                                 CKEDITOR.instances.editor1.focus();
  71                         },
  72                         change: function( evt ) {
  73                                 updateSnapshotCounter();
  74                         }
  75                 }
  76         } );
  77
  78         window.setInterval( updateSnapshotCounter, 700 );
  79         </script>
  80         <style type="text/css">
  81         #debugConsole { clear: both; }
  82         #undoControls { clear: both; }
  83         #undoControls a { padding: 25px 50px; font-size: 19px; margin-right: 15px; outline: 2px solid gray; display: block; float: left; text-decoration: none; }
  84         </style>
  85 </body>
  86 </html>