snapshot.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2015, 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-2015, <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. snapCount.innerHTML = CKEDITOR.instances.editor1.undoManager.snapshots.length;
  62. updateTypingTracer();
  63. };
  64. CKEDITOR.replace( 'editor1', {
  65. toolbar: [ [ 'Source', 'Bold', 'Italic' ] ,[ 'Undo' ], [ 'Redo' ] ],
  66. on: {
  67. instanceReady: function( evt ) {
  68. CKEDITOR.instances.editor1.focus();
  69. },
  70. change: function( evt ) {
  71. updateSnapshotCounter();
  72. }
  73. }
  74. } );
  75. window.setInterval( updateSnapshotCounter, 700 );
  76. </script>
  77. <style type="text/css">
  78. #debugConsole { clear: both; }
  79. #undoControls { clear: both; }
  80. #undoControls a { padding: 25px 50px; font-size: 19px; margin-right: 15px; outline: 2px solid gray; display: block; float: left; text-decoration: none; }
  81. </style>
  82. </body>
  83. </html>