js/ckeditor/samples/old/ajax.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>Ajax &mdash; CKEditor Sample</title>\r
  10         <script src="../../ckeditor.js"></script>\r
  11         <link rel="stylesheet" href="sample.css">\r
  12         <script>\r
  13 \r
  14                 var editor, html = '';\r
  15 \r
  16                 function createEditor() {\r
  17                         if ( editor )\r
  18                                 return;\r
  19 \r
  20                         // Create a new editor inside the <div id="editor">, setting its value to html\r
  21                         var config = {};\r
  22                         editor = CKEDITOR.appendTo( 'editor', config, html );\r
  23                 }\r
  24 \r
  25                 function removeEditor() {\r
  26                         if ( !editor )\r
  27                                 return;\r
  28 \r
  29                         // Retrieve the editor contents. In an Ajax application, this data would be\r
  30                         // sent to the server or used in any other way.\r
  31                         document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();\r
  32                         document.getElementById( 'contents' ).style.display = '';\r
  33 \r
  34                         // Destroy the editor.\r
  35                         editor.destroy();\r
  36                         editor = null;\r
  37                 }\r
  38 \r
  39         </script>\r
  40 </head>\r
  41 <body>\r
  42         <h1 class="samples">\r
  43                 <a href="index.html">CKEditor Samples</a> &raquo; Create and Destroy Editor Instances for Ajax Applications\r
  44         </h1>\r
  45         <div class="warning deprecated">\r
  46                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/saveajax.html">brand new version in CKEditor SDK</a>.\r
  47         </div>\r
  48         <div class="description">\r
  49                 <p>\r
  50                         This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing\r
  51                         area will be displayed in a <code>&lt;div&gt;</code> element.\r
  52                 </p>\r
  53                 <p>\r
  54                         For details of how to create this setup check the source code of this sample page\r
  55                         for JavaScript code responsible for the creation and destruction of a CKEditor instance.\r
  56                 </p>\r
  57         </div>\r
  58         <p>Click the buttons to create and remove a CKEditor instance.</p>\r
  59         <p>\r
  60                 <input onclick="createEditor();" type="button" value="Create Editor">\r
  61                 <input onclick="removeEditor();" type="button" value="Remove Editor">\r
  62         </p>\r
  63         <!-- This div will hold the editor. -->\r
  64         <div id="editor">\r
  65         </div>\r
  66         <div id="contents" style="display: none">\r
  67                 <p>\r
  68                         Edited Contents:\r
  69                 </p>\r
  70                 <!-- This div will be used to display the editor contents. -->\r
  71                 <div id="editorcontents">\r
  72                 </div>\r
  73         </div>\r
  74         <div id="footer">\r
  75                 <hr>\r
  76                 <p>\r
  77                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
  78                 </p>\r
  79                 <p id="copy">\r
  80                         Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
  81                         Knabben. All rights reserved.\r
  82                 </p>\r
  83         </div>\r
  84 </body>\r
  85 </html>\r