Ticket #8814: jquerydialog.html

File jquerydialog.html, 3.0 KB (added by Jakub Ś, 12 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-2011, 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       
11        <script type="text/javascript" src="../ckeditor.js"></script>
12        <script src="sample.js" type="text/javascript"></script>
13        <link href="sample.css" rel="stylesheet" type="text/css" />
14        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
15        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
16        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" /> 
17</head>
18<body>
19        <h1 class="samples">
20                CKEditor Sample &mdash; Create and Destroy Editor Instances
21        </h1>
22        <p>Click the buttons to create and remove a CKEditor instance.</p>
23        <p>
24                <input onclick="createEditor();" type="button" value="Create Editor" />
25                <input onclick="removeEditor();" type="button" value="Remove Editor" />
26        </p>
27       
28        <div id="editor">
29        </div>
30
31        <div id="footer">
32                <hr />
33                <p>
34                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
35                </p>
36                <p id="copy">
37                        Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
38                        Knabben. All rights reserved.
39                </p>
40        </div>
41       
42       
43       
44<script type="text/javascript">
45        //<![CDATA[
46
47        var sCKEDITORData = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>'; 
48       
49       
50        $(function()
51        {
52                CKEDITOR.on('instanceReady', function(e)//3
53                {
54                        var el = $("#editor");
55                        // Update dialog on editor resize
56                        e.editor.on('resize', function(e)//CK
57                        {
58                                // Center dialog after resize
59                                el.dialog("option", "position", 'center');//JQ
60                        });
61                        e.editor.resize(el.width(), $(window).height() * 0.95 - (el.parent().height() - $("#cke_" + e.editor.name).parent().height()));//CK
62                });
63        });
64
65        var editor = null;
66        var config = {baseFloatZIndex : 102000};       
67
68        function createEditor()
69        {               
70                if ( editor )
71                        return;
72       
73                $("#editor").bind('dialogopen', function() //JQ
74                {
75                if ( !editor )
76                        editor = CKEDITOR.appendTo('editor', config, sCKEDITORData);//2
77                }).bind('dialogclose', function() 
78                {
79                        removeEditor();//CK
80                        $(this).dialog('destroy');
81                })
82                .dialog({autoOpen: false,
83                        maxHeight:0.95 * $(window).height(),//1
84                        width: 800,
85                        modal: true,
86                        position: 'top',
87                        resizable: false,
88                        autoResize: true }).dialog('open');
89        }
90
91        function removeEditor()
92        {                       
93                if ( !editor )
94                        return;
95               
96                // Destroy the editor.
97                editor.destroy();
98                editor = null;                 
99        }
100
101
102</script>
103       
104       
105</body>
106</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy