skins/ckeditor/samples/ajax.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2014, 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="description">
  46                 <p>
  47                         This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
  48                         area will be displayed in a <code>&lt;div&gt;</code> element.
  49                 </p>
  50                 <p>
  51                         For details of how to create this setup check the source code of this sample page
  52                         for JavaScript code responsible for the creation and destruction of a CKEditor instance.
  53                 </p>
  54         </div>
  55         <p>Click the buttons to create and remove a CKEditor instance.</p>
  56         <p>
  57                 <input onclick="createEditor();" type="button" value="Create Editor">
  58                 <input onclick="removeEditor();" type="button" value="Remove Editor">
  59         </p>
  60         <!-- This div will hold the editor. -->
  61         <div id="editor">
  62         </div>
  63         <div id="contents" style="display: none">
  64                 <p>
  65                         Edited Contents:
  66                 </p>
  67                 <!-- This div will be used to display the editor contents. -->
  68                 <div id="editorcontents">
  69                 </div>
  70         </div>
  71         <div id="footer">
  72                 <hr>
  73                 <p>
  74                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  75                 </p>
  76                 <p id="copy">
  77                         Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  78                         Knabben. All rights reserved.
  79                 </p>
  80         </div>
  81 </body>
  82 </html>