Ticket #9439: jquerydialog.html

File jquerydialog.html, 3.2 KB (added by Jakub Ś, 8 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.7.2/jquery.min.js"></script>
15        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
16        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/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>There was z-index problem in modal dialog  but adding baseFloatZIndex : 102000 helped</p>
24        <p>Scayt Autostartup works in this case</p>
25        <p>
26                <input onclick="createEditor();" type="button" value="Create Editor" />
27                <input onclick="removeEditor();" type="button" value="Remove Editor" />
28        </p>
29       
30        <div id="editor">
31        </div>
32
33        <div id="footer">
34                <hr />
35                <p>
36                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
37                </p>
38                <p id="copy">
39                        Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
40                        Knabben. All rights reserved.
41                </p>
42        </div>
43       
44       
45       
46<script type="text/javascript">
47        //<![CDATA[
48
49        var sCKEDITORData = '<p>Tssss This is some <strong>sample text</strong>.</p>';
50       
51       
52        $(function()
53        {
54                CKEDITOR.on('instanceReady', function(e)//3
55                {
56                        var el = $("#editor");
57                        // Update dialog on editor resize
58                        e.editor.on('resize', function(e)//CK
59                        {
60                                // Center dialog after resize
61                                el.dialog("option", "position", 'center');//JQ
62                        });
63                        e.editor.resize(el.width(), $(window).height() * 0.95 - (el.parent().height() - $("#cke_" + e.editor.name).parent().height()));//CK
64                });
65        });
66
67        var editor = null;
68        var config = {baseFloatZIndex : 102000, startupFocus: true, scayt_autoStartup: true};   
69
70        function createEditor()
71        {               
72                if ( editor )
73                        return;
74       
75                $("#editor").bind('dialogopen', function() //JQ
76                {
77                if ( !editor )
78                        editor = CKEDITOR.appendTo('editor', config, '');//2
79                        editor.on('instanceReady', function(evt){
80                                        evt.editor.setData(sCKEDITORData);
81                                });
82                }).bind('dialogclose', function() 
83                {
84                        removeEditor();//CK
85                        $(this).dialog('destroy');
86                })
87                .dialog({autoOpen: false,
88                        maxHeight:0.95 * $(window).height(),//1
89                        width: 800,                     
90                        position: 'top',
91                        resizable: false,
92                        autoResize: true }).dialog('open');
93        }
94
95        function removeEditor()
96        {                       
97                if ( !editor )
98                        return;
99               
100                // Destroy the editor.
101                editor.destroy();
102                editor = null;                 
103        }
104
105
106</script>
107       
108       
109</body>
110</html>
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy