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