Ticket #7855: ff_maximize_bug.html

File ff_maximize_bug.html, 3.8 KB (added by kiwistba, 8 years ago)

Reduced test case, a modified ajax.html sample using UI Dialog

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<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
11<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
12<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css" /> 
13        <script type="text/javascript" src="../ckeditor.js"></script>
14        <script src="sample.js" type="text/javascript"></script>
15        <link href="sample.css" rel="stylesheet" type="text/css" />
16        <script type="text/javascript">
17        //<![CDATA[
18
19$(function()
20{
21        CKEDITOR.on('instanceReady', function(e)
22        {
23                var el = $("#editor");
24                // Update dialog on editor resize
25                e.editor.on('resize', function(e)
26                {
27                        // Center dialog after resize
28                        el.dialog("option", "position", 'center');
29                });
30                e.editor.resize(el.width(), $(window).height() * 0.95 - (el.parent().height() - $("#cke_" + e.editor.name).parent().height()));
31        });
32});
33
34var editor, html = '';
35var config = {};
36
37function createEditor()
38{
39        if ( editor )
40                return;
41
42        $("#editor").one('dialogopen', function() 
43        {
44                editor = CKEDITOR.appendTo('editor', config, html);
45        }).one('dialogclose', function() 
46        {
47                removeEditor();
48                $(this).dialog('destroy');
49        })
50        .dialog({autoOpen: false,
51                maxHeight:0.95 * $(window).height(),
52                width: 800,
53                modal: true,
54                position: 'top',
55                resizable: false,
56                autoResize: true }).dialog('open');
57}
58
59function removeEditor()
60{
61        if ( !editor )
62                return;
63
64        // Destroy the editor.
65        editor.destroy();
66        editor = null;
67}
68
69        //]]>
70        </script>
71</head>
72<body>
73        <h1 class="samples">
74                CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
75        </h1>
76        <div class="description">
77        <p>
78                This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
79                area will be displayed in a <code>&lt;div&gt;</code> element.
80        </p>
81        <p>
82                For details of how to create this setup check the source code of this sample page
83                for JavaScript code responsible for the creation and destruction of a CKEditor instance.
84        </p>
85        </div>
86
87        <!-- This <div> holds alert messages to be display in the sample page. -->
88        <div id="alerts">
89                <noscript>
90                        <p>
91                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
92                                support, like yours, you should still see the contents (HTML data) and you should
93                                be able to edit it normally, without a rich editor interface.
94                        </p>
95                </noscript>
96        </div>
97        <p>Click the buttons to create and remove a CKEditor instance.</p>
98        <p>
99                <input onclick="createEditor();" type="button" value="Create Editor" />
100                <input onclick="removeEditor();" type="button" value="Remove Editor" />
101        </p>
102        <!-- This div will hold the editor. -->
103        <div id="editor">
104        </div>
105        <div id="contents" style="display: none">
106                <p>
107                        Edited Contents:</p>
108                <!-- This div will be used to display the editor contents. -->
109                <div id="editorcontents">
110                </div>
111        </div>
112        <div id="footer">
113                <hr />
114                <p>
115                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
116                </p>
117                <p id="copy">
118                        Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
119                        Knabben. All rights reserved.
120                </p>
121        </div>
122</body>
123</html>
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy