Ticket #6375: ajax.html

File ajax.html, 3.1 KB (added by Damian, 9 years ago)

Modified ajax sample to help reproduce the problem

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-2010, 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 - CKEditor Sample</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
10        <!-- CKReleaser %REMOVE_LINE%
11        <script type="text/javascript" src="../ckeditor.js"></script>
12        CKReleaser %REMOVE_START% -->
13        <script type="text/javascript" src="../ckeditor_source.js"></script>
14        <!-- CKReleaser %REMOVE_END% -->
15        <script src="sample.js" type="text/javascript"></script>
16        <link href="sample.css" rel="stylesheet" type="text/css" />
17        <script type="text/javascript">
18        //<![CDATA[
19
20var editor;
21
22function createEditor()
23{
24        if ( editor )
25                return;
26
27        var html = document.getElementById( 'editorcontents' ).innerHTML;
28
29        // Create a new editor inside the <div id="editor">, setting its value to html
30        var config = {};
31        editor = CKEDITOR.appendTo( 'editor', config, html );
32}
33
34        function removeEditor()
35        {
36                if ( !editor )
37                        return;
38
39                // Retrieve the editor contents. In an Ajax application, this data would be
40                // sent to the server or used in any other way.
41                document.getElementById( 'editorcontents' ).innerHTML = editor.getData();
42                document.getElementById( 'contents' ).style.display = '';
43
44                // Destroy the editor.
45                editor.destroy();
46                editor = null;
47        }
48
49function hideEditor()
50{
51        if ( !editor )
52                return;
53
54        var div = document.getElementById("contentDiv");
55        div.style.display="none";
56       
57}
58
59function showEditor()
60{
61        if ( !editor )
62                return;
63               
64        var div = document.getElementById("contentDiv");
65        div.style.display="block";
66       
67}
68
69        //]]>
70        </script>
71</head>
72<body>
73        <h1>
74                CKEditor Sample
75        </h1>
76
77        <!-- This <div> holds alert messages to be display in the sample page. -->
78        <div id="alerts">
79                <noscript>
80                        <p>
81                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
82                                support, like yours, you should still see the contents (HTML data) and you should
83                                be able to edit it normally, without a rich editor interface.
84                        </p>
85                </noscript>
86        </div>
87        <p>
88                <input onclick="createEditor();" type="button" value="Create Editor" />
89                <input onclick="removeEditor();" type="button" value="Remove Editor" />
90                <input onclick="hideEditor();" type="button" value="Hide" />
91                <input onclick="showEditor();" type="button" value="Show" />
92               
93               
94        </p>
95        <!-- This div will hold the editor. -->
96        <div id="contentDiv">
97                <div id="editor">
98                </div>
99        </div>
100        <div id="contents" style="display: none">
101                <p>
102                        Edited Contents:</p>
103                <!-- This div will be used to display the editor contents. -->
104                <div id="editorcontents">
105                </div>
106        </div>
107        <div id="footer">
108                <hr />
109                <p>
110                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
111                </p>
112                <p id="copy">
113                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
114                        Knabben. All rights reserved.
115                </p>
116        </div>
117</body>
118</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy