Ticket #8576: ajax2.html

File ajax2.html, 3.2 KB (added by Jakub Ś, 8 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--
3Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head>
8        <title>Ajax &mdash; CKEditor Sample</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
10        <script type="text/javascript" src="../ckeditor_source.js"></script>
11        <script src="sample.js" type="text/javascript"></script>
12        <link href="sample.css" rel="stylesheet" type="text/css" />
13        <script type="text/javascript">
14        //<![CDATA[
15
16var editor, html = '';
17
18function createEditor()
19{
20        if ( editor )                           
21                return;
22       
23
24        // Create a new editor inside the <div id="editor">, setting its value to html
25        var config = {};
26        editor = CKEDITOR.appendTo( 'editor', config, html );
27}
28
29function removeEditor()
30{
31        if ( !editor )
32                return;
33
34        // Retrieve the editor contents. In an Ajax application, this data would be
35        // sent to the server or used in any other way.
36        document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
37        document.getElementById( 'contents' ).style.display = '';
38
39        // Destroy the editor.
40        editor.destroy();
41        editor = null; 
42}
43
44        //]]>
45        </script>
46</head>
47<body>
48        <h1 class="samples">
49                CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
50        </h1>
51        <div class="description">
52        <p>
53                This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
54                area will be displayed in a <code>&lt;div&gt;</code> element.
55        </p>
56        <p>
57                For details of how to create this setup check the source code of this sample page
58                for JavaScript code responsible for the creation and destruction of a CKEditor instance.
59        </p>
60        </div>
61
62        <!-- This <div> holds alert messages to be display in the sample page. -->
63        <div id="alerts">
64                <noscript>
65                        <p>
66                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
67                                support, like yours, you should still see the contents (HTML data) and you should
68                                be able to edit it normally, without a rich editor interface.
69                        </p>
70                </noscript>
71        </div>
72        <p>Click the buttons to create and remove a CKEditor instance.</p>
73        <p>
74                <input onclick="createEditor();" type="button" value="Create Editor" />
75                <input onclick="removeEditor();" type="button" value="Remove Editor" />
76        </p>
77        <!-- This div will hold the editor. -->
78        <div id="editor">
79        </div>
80        <div id="contents" style="display: none">
81                <p>
82                        Edited Contents:</p>
83                <!-- This div will be used to display the editor contents. -->
84                <div id="editorcontents">
85                </div>
86        </div>
87        <div id="footer">
88                <hr />
89                <p>
90                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
91                </p>
92                <p id="copy">
93                        Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
94                        Knabben. All rights reserved.
95                </p>
96        </div>
97        <script type="text/javascript">
98                createEditor();
99                removeEditor();
100        </script>
101</body>
102</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy