Ticket #6987: api_dialog.html

File api_dialog.html, 3.7 KB (added by Wiktor Walc, 9 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-2010, 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>Using API to customize dialogs - CKEditor Sample</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
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        <style id="styles" type="text/css">
14
15                .cke_button_myDialogCmd .cke_icon
16                {
17                        display: none !important;
18                }
19
20                .cke_button_myDialogCmd .cke_label
21                {
22                        display: inline !important;
23                }
24
25        </style>
26</head>
27<body>
28        <h1>
29                CKEditor Sample
30        </h1>
31        <!-- This <div> holds alert messages to be display in the sample page. -->
32        <div id="alerts">
33                <noscript>
34                        <p>
35                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
36                                support, like yours, you should still see the contents (HTML data) and you should
37                                be able to edit it normally, without a rich editor interface.
38                        </p>
39                </noscript>
40        </div>
41        <!-- This <fieldset> holds the HTML that you will usually find in your
42             pages. -->
43        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
44        <script type="text/javascript">
45                //<![CDATA[
46                        // Replace the <textarea id="editor1"> with an CKEditor instance.
47                        var editor = CKEDITOR.replace( 'editor1',
48                                {
49                                        // Defines a simpler toolbar to be used in this sample.
50                                        // Note that we have added out "MyButton" button here.
51                                        toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]
52                                });
53
54                        // Listen for the "pluginsLoaded" event, so we are sure that the
55                        // "dialog" plugin has been loaded and we are able to do our
56                        // customizations.
57                        editor.on( 'pluginsLoaded', function( ev )
58                                {
59                                        // If our custom dialog has not been registered, do that now.
60                                        if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
61                                        {
62                                                // Finally, register the dialog.
63                                                CKEDITOR.dialog.add( 'myDialog', function( editor )
64                                                {
65                                                        return {
66                                                                title : 'My Dialog',
67                                                                minWidth : 400,
68                                                                minHeight : 200,
69                                                                contents : [
70                                                                        {
71                                                                                id : 'tab1',
72                                                                                label : 'First Tab',
73                                                                                title : 'First Tab',
74                                                                                elements :
75                                                                                [
76                                                                                        {
77                                                                                                id : 'input1',
78                                                                                                type : 'text',
79                                                                                                label : 'Input 1'
80                                                                                        }
81                                                                                ]
82                                                                        }
83                                                                ],
84                                                                onOk : function() {
85                                                                        editor.insertHtml( "<b>" + this.getValueOf( 'tab1', 'input1' ) + "</b>" );
86                                                                }
87                                                        };
88                                                } );
89                                        }
90
91                                        // Register the command used to open the dialog.
92                                        editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
93
94                                        // Add the a custom toolbar buttons, which fires the above
95                                        // command..
96                                        editor.ui.addButton( 'MyButton',
97                                                {
98                                                        label : 'My Dialog',
99                                                        command : 'myDialogCmd'
100                                                } );
101                                });
102                //]]>
103        </script>
104        <div id="footer">
105                <hr />
106                <p>
107                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
108                </p>
109                <p id="copy">
110                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
111                        Knabben. All rights reserved.
112                </p>
113        </div>
114</body>
115</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy