Ticket #9409: ajax2.html

File ajax2.html, 3.9 KB (added by Jakub Ś, 9 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-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_source.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        // append the ckeditor's container to the dom
37        //$("#editordiv").append(test);
38       
39       
40        //test 4
41        var containerDiv = document.getElementById('editordiv');
42        editor = CKEDITOR.appendTo( containerDiv, config, html );
43        editor.on('instanceReady', function(ev){
44                containerDiv.style.display='';
45        });
46}
47
48function removeEditor()
49{
50        if ( !editor )
51                return;
52
53        // Retrieve the editor contents. In an Ajax application, this data would be
54        // sent to the server or used in any other way.
55        document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
56        document.getElementById( 'contents' ).style.display = '';
57
58        // Destroy the editor.
59        editor.destroy(true);
60        editor = null;
61       
62        document.getElementById('editordiv').style.display='none';     
63}
64
65        //]]>
66        </script>
67</head>
68<body>
69        <h1 class="samples">
70                CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
71        </h1>
72        <div class="description">
73        <p>
74                This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
75                area will be displayed in a <code>&lt;div&gt;</code> element.
76        </p>
77        <p>
78                For details of how to create this setup check the source code of this sample page
79                for JavaScript code responsible for the creation and destruction of a CKEditor instance.
80        </p>
81        </div>
82
83        <!-- This <div> holds alert messages to be display in the sample page. -->
84        <div id="alerts">
85                <noscript>
86                        <p>
87                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
88                                support, like yours, you should still see the contents (HTML data) and you should
89                                be able to edit it normally, without a rich editor interface.
90                        </p>
91                </noscript>
92        </div>
93        <p>Click the buttons to create and remove a CKEditor instance.</p>
94        <p>
95                <input onclick="createEditor();" type="button" value="Create Editor" />
96                <input onclick="removeEditor();" type="button" value="Remove Editor" />
97        </p>
98        <!-- This div will hold the editor. -->
99        <div id="editordiv" style="display: none;">
100       
101        </div>
102        <div id="contents" style="display: none">
103                <p>
104                        Edited Contents:</p>
105                <!-- This div will be used to display the editor contents. -->
106                <div id="editorcontents">
107                </div>
108        </div>
109        <div id="footer">
110                <hr />
111                <p>
112                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
113                </p>
114                <p id="copy">
115                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
116                        Knabben. All rights reserved.
117                </p>
118        </div>
119</body>
120</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy