Ticket #9772: dialog.html

File dialog.html, 1.9 KB (added by Alfonso Martínez de Lizarrondo, 8 years ago)

Modified sample to test the problem

Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
5        <meta charset="utf-8">
6        <script src="../../../ckeditor.js"></script>
7        <style>
8
9                .cke_button__mybutton_icon
10                {
11                        display: none !important;
12                }
13
14                .cke_button__mybutton_label
15                {
16                        display: inline !important;
17                }
18
19        </style>
20        <script>
21
22                CKEDITOR.on( 'instanceCreated', function( ev ){
23                        var editor = ev.editor;
24
25                        // Listen for the "pluginsLoaded" event, so we are sure that the
26                        // "dialog" plugin has been loaded and we are able to do our
27                        // customizations.
28                        editor.on( 'pluginsLoaded', function() {
29
30
31CKEDITOR.dialog.add( 'myDialog', function( editor ) {
32        return {
33                title: 'My Dialog',
34                minWidth: 400,
35                minHeight: 200,
36                buttons : [ {
37                                type : 'button',
38                                id : 'myReset',
39                                label : 'Reset'
40                }, CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],
41
42                contents: [
43                        {
44                                id: 'tab1',
45                                label: 'First Tab',
46                                title: 'First Tab',
47                                elements: [
48                                        {
49                                                id: 'input1',
50                                                type: 'text',
51                                                label: 'Text Field'
52                                        }
53                                ]
54                        }
55                ]
56        };
57});
58
59                                // Register the command used to open the dialog.
60                                editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
61
62                                // Add the a custom toolbar buttons, which fires the above
63                                // command..
64                                editor.ui.add( 'MyButton', CKEDITOR.UI_BUTTON, {
65                                        label: 'My Dialog',
66                                        command: 'myDialogCmd'
67                                });
68                        });
69                });
70
71                var config = {
72                        extraPlugins: 'dialog',
73                        toolbar: [ [ 'MyButton' ] ]
74                };
75
76        </script>
77</head>
78<body>
79
80        <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>
81        <script>
82                // Replace the <textarea id="editor1"> with an CKEditor instance.
83                CKEDITOR.replace( 'editor1', config );
84        </script>
85
86</body>
87</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy