Ticket #5894: buttons.html

File buttons.html, 5.0 KB (added by Alfonso Martínez de Lizarrondo, 15 years ago)

Sample file

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>Skins - CKEditor Sample</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
10        <!-- CKReleaser %REMOVE_LINE%
11        <script type="text/javascript" src="../ckeditor.js"></script>
12        CKReleaser %REMOVE_START% -->
13        <script type="text/javascript" src="../ckeditor_source.js"></script>
14        <!-- CKReleaser %REMOVE_END% -->
15        <script src="sample.js" type="text/javascript"></script>
16        <link href="sample.css" rel="stylesheet" type="text/css" />
17        <style id="styles" type="text/css">
18
19                .cke_button_testDialogCmd .cke_icon
20                {
21                        display: none !important;
22                }
23
24                .cke_button_testDialogCmd .cke_label
25                {
26                        display: inline !important;
27                }
28
29        </style>
30</head>
31<body>
32        <h1>
33                CKEditor Sample
34        </h1>
35        <!-- This <div> holds alert messages to be display in the sample page. -->
36        <div id="alerts">
37                <noscript>
38                        <p>
39                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
40                                support, like yours, you should still see the contents (HTML data) and you should
41                                be able to edit it normally, without a rich editor interface.
42                        </p>
43                </noscript>
44        </div>
45        <form action="sample_posteddata.php" method="post">
46                <p>
47                        "Kama" skin:<br />
48                        <textarea cols="80" id="editor_kama" name="editor_kama" 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>
49                        <script type="text/javascript">
50                        //<![CDATA[
51                        function pluginsLoadedHandler( ev )
52                        {
53                                var editor = ev.editor;
54
55                                        // If our custom dialog has not been registered, do that now.
56                                        if ( !CKEDITOR.dialog.exists( 'testDialog' ) )
57                                        {
58                                                CKEDITOR.dialog.add( 'testDialog', function( editor )
59                                                {
60                                                        return {
61                                                                title : 'Button test',
62                                                                minWidth : 300,
63                                                                minHeight : 100,
64
65                                                                buttons : [ {
66                                                                                type : 'button',
67                                                                                id : 'deleteMarker',
68                                                                                label : 'Delete this marker',
69                                                                                onClick : function(){
70                                                                                         alert('clicked');
71                                                                                }
72                                                                }, CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],
73
74                                                                contents : 
75                                                                [
76                                                                        {
77                                                                                id : 'tab1',
78                                                                                elements :
79                                                                                [
80                                                                                        {
81                                                                                                id : 'input1',
82                                                                                                type : 'text',
83                                                                                                label : 'Input 1'
84                                                                                        },
85                                                                                        {
86                                                                                                id : 'btnSearch',
87                                                                                                type : 'button',
88                                                                                                label : 'Button inside the dialog'
89                                                                                        }
90                                                                                ]
91                                                                        }
92                                                                ]
93                                                        };
94                                                } );                                           
95                                        }
96
97                                        // Register the command used to open the dialog.
98                                        editor.addCommand( 'testDialogCmd', new CKEDITOR.dialogCommand( 'testDialog' ) );
99
100                                        // Add the a custom toolbar buttons, which fires the above
101                                        // command..
102                                        editor.ui.addButton( 'ButtonTest',
103                                                {
104                                                        label : 'Button test',
105                                                        command : 'testDialogCmd'
106                                                } );
107                        }
108
109                                var editor1 = CKEDITOR.replace( 'editor_kama',
110                                        {
111                                                skin : 'kama',
112                                                toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'ButtonTest' ] ],
113                                                on : { pluginsLoaded : pluginsLoadedHandler}
114                                        });
115
116                        //]]>
117                        </script>
118                </p>
119                <p>
120                        "Office 2003" skin:<br />
121                        <textarea cols="80" id="editor_office2003" name="editor_office2003" 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>
122                        <script type="text/javascript">
123                        //<![CDATA[
124
125                                var editor2 = CKEDITOR.replace( 'editor_office2003',
126                                        {
127                                                skin : 'office2003',
128                                                toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'ButtonTest' ] ],
129                                                on : { pluginsLoaded : pluginsLoadedHandler}
130                                        });
131
132                        //]]>
133                        </script>
134                </p>
135                <p>
136                        "V2" skin:<br />
137                        <textarea cols="80" id="editor_v2" name="editor_v2" 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>
138                        <script type="text/javascript">
139                        //<![CDATA[
140
141                                var editor3 = CKEDITOR.replace( 'editor_v2',
142                                        {
143                                                skin : 'v2',
144                                                toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'ButtonTest' ] ],
145                                                on : { pluginsLoaded : pluginsLoadedHandler}
146                                        });
147
148
149                        //]]>
150                        </script>
151                </p>
152        </form>
153        <div id="footer">
154                <hr />
155                <p>
156                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
157                </p>
158                <p id="copy">
159                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
160                        Knabben. All rights reserved.
161                </p>
162        </div>
163</body>
164</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy