59333eb16c9d87314a315abc6a9d7bdd763a5230
[ckeditor.git] / 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>