Ticket #9409: ajax3.html

File ajax3.html, 4.0 KB (added by Maxime, 9 years ago)

working example

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