Ticket #9409: ajax.html

File ajax.html, 3.6 KB (added by Maxime, 9 years ago)

3 tests cases in comments

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-2012, 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
11        <script type="text/javascript" src="../ckeditor.js"></script>
12        <script src="sample.js" type="text/javascript"></script>
13        <script type="text/javascript" src="../adapters/jquery.js"></script>
14        <link href="sample.css" rel="stylesheet" type="text/css" />
15        <script type="text/javascript">
16        //<![CDATA[
17
18var editor, html = '';
19
20function createEditor()
21{
22        // if ( editor )
23        //      return;
24
25        var config = {};
26        // // test 1 : with jquery adapter
27        // var test = $("<div></div>").ckeditor(config);
28
29        // // test 2 : with jquery's dom element
30        // var test = $("<div></div>");
31        // editor = CKEDITOR.appendTo( test.get(0), config, html );
32
33        // test 3 : with a dom element
34        var test = document.createElement('div');
35        editor = CKEDITOR.appendTo( test, config, html );
36
37        // append the ckeditor's container to the dom
38        $("#editordiv").append(test);
39}
40
41function removeEditor()
42{
43        if ( !editor )
44                return;
45
46        // Retrieve the editor contents. In an Ajax application, this data would be
47        // sent to the server or used in any other way.
48        document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
49        document.getElementById( 'contents' ).style.display = '';
50
51        // Destroy the editor.
52        editor.destroy(true);
53        editor = null;
54}
55
56        //]]>
57        </script>
58</head>
59<body>
60        <h1 class="samples">
61                CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
62        </h1>
63        <div class="description">
64        <p>
65                This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
66                area will be displayed in a <code>&lt;div&gt;</code> element.
67        </p>
68        <p>
69                For details of how to create this setup check the source code of this sample page
70                for JavaScript code responsible for the creation and destruction of a CKEditor instance.
71        </p>
72        </div>
73
74        <!-- This <div> holds alert messages to be display in the sample page. -->
75        <div id="alerts">
76                <noscript>
77                        <p>
78                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
79                                support, like yours, you should still see the contents (HTML data) and you should
80                                be able to edit it normally, without a rich editor interface.
81                        </p>
82                </noscript>
83        </div>
84        <p>Click the buttons to create and remove a CKEditor instance.</p>
85        <p>
86                <input onclick="createEditor();" type="button" value="Create Editor" />
87                <input onclick="removeEditor();" type="button" value="Remove Editor" />
88        </p>
89        <!-- This div will hold the editor. -->
90        <div id="editordiv">
91        </div>
92        <div id="contents" style="display: none">
93                <p>
94                        Edited Contents:</p>
95                <!-- This div will be used to display the editor contents. -->
96                <div id="editorcontents">
97                </div>
98        </div>
99        <div id="footer">
100                <hr />
101                <p>
102                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
103                </p>
104                <p id="copy">
105                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
106                        Knabben. All rights reserved.
107                </p>
108        </div>
109</body>
110</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy