Ticket #16825: jquerydialog.html

File jquerydialog.html, 2.2 KB (added by Jakub Ś, 3 years ago)
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html>
7<head>
8        <title>CKEditor Sample</title>
9        <meta charset="utf-8"> 
10        <script type="text/javascript" src="../../ckeditor.js"></script>
11        <script src="sample.js" type="text/javascript"></script>
12        <link href="sample.css" rel="stylesheet" type="text/css" /> 
13        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
14        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
15        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
16</head>
17<body>
18        <h1 class="samples">
19                CKEditor Sample &mdash; Create Editor Instance in a dialog
20        </h1>
21        <p>Click the button to create CKEditor instance.</p>   
22        <p>
23                <button id="opener">Open Dialog</button>               
24        </p>
25       
26        <div id="editor">
27        </div>
28
29        <div id="footer">
30                <hr>
31                <p>
32                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
33                </p>
34                <p id="copy">
35                        Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
36                        Knabben. All rights reserved.
37                </p>
38        </div>
39       
40       
41       
42<script type="text/javascript">
43       
44        var editor = null;
45        var editorData = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';       
46        var config = {
47                baseFloatZIndex : 102000, 
48                startupFocus: true, 
49                scayt_autoStartup: true 
50        };
51       
52        $( "#opener" ).on( "click", function() {
53      if ( editor )
54                        return;
55       
56                $("#editor")
57                .bind( 'dialogopen', function() {
58                        if ( !editor )
59                                editor = CKEDITOR.appendTo( 'editor', config, editorData );
60                })
61                .bind( 'dialogclose', function() {
62                        if ( !editor )
63                                return;
64                        // Destroy the editor.
65                        editor.destroy();
66                        editor = null;
67                       
68                        $(this).dialog( 'close' );
69                })
70                .dialog({
71                        autoOpen: false,
72                        maxHeight:0.75 * $(window).height(),
73                        width: 800,
74                        modal: true,
75                        position: { my: "center top", at: "center top", of: window },
76                        resizable: false                       
77                })
78                .dialog( 'open' );
79    });
80</script>
81       
82       
83</body>
84</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy