Ticket #4844: ajax.html

File ajax.html, 2.7 KB (added by Alfonso Martínez de Lizarrondo, 10 years ago)

Modified sample file

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;
21var count=0;
22function createEditor()
23{
24//      if ( editor )
25//              return;
26        document.title = ++count;
27
28        var html = document.getElementById( 'editorcontents' ).innerHTML;
29
30        // Create a new editor inside the <div id="editor">, setting its value to html
31        var config = {};
32        editor = CKEDITOR.appendTo( 'editor', config, html );
33}
34
35function removeEditor()
36{
37        if ( !editor )
38                return;
39
40        // Retrieve the editor contents. In an Ajax application, this data would be
41        // sent to the server or used in any other way.
42        document.getElementById( 'editorcontents' ).innerHTML = editor.getData();
43        document.getElementById( 'contents' ).style.display = '';
44
45        // Destroy the editor.
46        editor.destroy();
47        editor = null;
48}
49
50        //]]>
51        </script>
52</head>
53<body>
54        <h1>
55                CKEditor Sample
56        </h1>
57        <!-- This <div> holds alert messages to be display in the sample page. -->
58        <div id="alerts">
59                <noscript>
60                        <p>
61                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
62                                support, like yours, you should still see the contents (HTML data) and you should
63                                be able to edit it normally, without a rich editor interface.
64                        </p>
65                </noscript>
66        </div>
67        <p>
68                <input onclick="createEditor();" type="button" value="Create Editor" />
69                <input onclick="removeEditor();" type="button" value="Remove Editor" />
70        </p>
71        <!-- This div will hold the editor. -->
72        <div id="editor">
73        </div>
74        <div id="contents" style="display: none">
75                <p>
76                        Edited Contents:</p>
77                <!-- This div will be used to display the editor contents. -->
78                <div id="editorcontents">
79                </div>
80        </div>
81        <div id="footer">
82                <hr />
83                <p>
84                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
85                </p>
86                <p id="copy">
87                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
88                        Knabben. All rights reserved.
89                </p>
90        </div>
91</body>
92</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy