|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. |
|
4 For licensing, see LICENSE.md or http://ckeditor.com/license |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <meta charset="utf-8"> |
|
9 <title>Using API to Customize Dialog Windows — CKEditor Sample</title> |
|
10 <script src="../../../ckeditor.js"></script> |
|
11 <link rel="stylesheet" href="../../../samples/old/sample.css"> |
|
12 <meta name="ckeditor-sample-name" content="Using the JavaScript API to customize dialog windows"> |
|
13 <meta name="ckeditor-sample-group" content="Advanced Samples"> |
|
14 <meta name="ckeditor-sample-description" content="Using the dialog windows API to customize dialog windows without changing the original editor code."> |
|
15 <style> |
|
16 |
|
17 .cke_button__mybutton_icon |
|
18 { |
|
19 display: none !important; |
|
20 } |
|
21 |
|
22 .cke_button__mybutton_label |
|
23 { |
|
24 display: inline !important; |
|
25 } |
|
26 |
|
27 </style> |
|
28 <script> |
|
29 |
|
30 CKEDITOR.on( 'instanceCreated', function( ev ){ |
|
31 var editor = ev.editor; |
|
32 |
|
33 // Listen for the "pluginsLoaded" event, so we are sure that the |
|
34 // "dialog" plugin has been loaded and we are able to do our |
|
35 // customizations. |
|
36 editor.on( 'pluginsLoaded', function() { |
|
37 |
|
38 // If our custom dialog has not been registered, do that now. |
|
39 if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) { |
|
40 // We need to do the following trick to find out the dialog |
|
41 // definition file URL path. In the real world, you would simply |
|
42 // point to an absolute path directly, like "/mydir/mydialog.js". |
|
43 var href = document.location.href.split( '/' ); |
|
44 href.pop(); |
|
45 href.push( 'assets/my_dialog.js' ); |
|
46 href = href.join( '/' ); |
|
47 |
|
48 // Finally, register the dialog. |
|
49 CKEDITOR.dialog.add( 'myDialog', href ); |
|
50 } |
|
51 |
|
52 // Register the command used to open the dialog. |
|
53 editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) ); |
|
54 |
|
55 // Add the a custom toolbar buttons, which fires the above |
|
56 // command.. |
|
57 editor.ui.add( 'MyButton', CKEDITOR.UI_BUTTON, { |
|
58 label: 'My Dialog', |
|
59 command: 'myDialogCmd' |
|
60 }); |
|
61 }); |
|
62 }); |
|
63 |
|
64 // When opening a dialog, its "definition" is created for it, for |
|
65 // each editor instance. The "dialogDefinition" event is then |
|
66 // fired. We should use this event to make customizations to the |
|
67 // definition of existing dialogs. |
|
68 CKEDITOR.on( 'dialogDefinition', function( ev ) { |
|
69 // Take the dialog name and its definition from the event data. |
|
70 var dialogName = ev.data.name; |
|
71 var dialogDefinition = ev.data.definition; |
|
72 |
|
73 // Check if the definition is from the dialog we're |
|
74 // interested on (the "Link" dialog). |
|
75 if ( dialogName == 'myDialog' && ev.editor.name == 'editor2' ) { |
|
76 // Get a reference to the "Link Info" tab. |
|
77 var infoTab = dialogDefinition.getContents( 'tab1' ); |
|
78 |
|
79 // Add a new text field to the "tab1" tab page. |
|
80 infoTab.add( { |
|
81 type: 'text', |
|
82 label: 'My Custom Field', |
|
83 id: 'customField', |
|
84 'default': 'Sample!', |
|
85 validate: function() { |
|
86 if ( ( /\d/ ).test( this.getValue() ) ) |
|
87 return 'My Custom Field must not contain digits'; |
|
88 } |
|
89 }); |
|
90 |
|
91 // Remove the "select1" field from the "tab1" tab. |
|
92 infoTab.remove( 'select1' ); |
|
93 |
|
94 // Set the default value for "input1" field. |
|
95 var input1 = infoTab.get( 'input1' ); |
|
96 input1[ 'default' ] = 'www.example.com'; |
|
97 |
|
98 // Remove the "tab2" tab page. |
|
99 dialogDefinition.removeContents( 'tab2' ); |
|
100 |
|
101 // Add a new tab to the "Link" dialog. |
|
102 dialogDefinition.addContents( { |
|
103 id: 'customTab', |
|
104 label: 'My Tab', |
|
105 accessKey: 'M', |
|
106 elements: [ |
|
107 { |
|
108 id: 'myField1', |
|
109 type: 'text', |
|
110 label: 'My Text Field' |
|
111 }, |
|
112 { |
|
113 id: 'myField2', |
|
114 type: 'text', |
|
115 label: 'Another Text Field' |
|
116 } |
|
117 ] |
|
118 }); |
|
119 |
|
120 // Provide the focus handler to start initial focus in "customField" field. |
|
121 dialogDefinition.onFocus = function() { |
|
122 var urlField = this.getContentElement( 'tab1', 'customField' ); |
|
123 urlField.select(); |
|
124 }; |
|
125 } |
|
126 }); |
|
127 |
|
128 var config = { |
|
129 extraPlugins: 'dialog', |
|
130 toolbar: [ [ 'MyButton' ] ] |
|
131 }; |
|
132 |
|
133 </script> |
|
134 </head> |
|
135 <body> |
|
136 <h1 class="samples"> |
|
137 <a href="../../../samples/old/index.html">CKEditor Samples</a> » Using CKEditor Dialog API |
|
138 </h1> |
|
139 <div class="warning deprecated"> |
|
140 This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>. |
|
141 </div> |
|
142 <div class="description"> |
|
143 <p> |
|
144 This sample shows how to use the |
|
145 <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog">CKEditor Dialog API</a> |
|
146 to customize CKEditor dialog windows without changing the original editor code. |
|
147 The following customizations are being done in the example below: |
|
148 </p> |
|
149 <p> |
|
150 For details on how to create this setup check the source code of this sample page. |
|
151 </p> |
|
152 </div> |
|
153 <p>A custom dialog is added to the editors using the <code>pluginsLoaded</code> event, from an external <a target="_blank" href="assets/my_dialog.js">dialog definition file</a>:</p> |
|
154 <ol> |
|
155 <li><strong>Creating a custom dialog window</strong> – "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li> |
|
156 <li><strong>Creating a custom button</strong> – Add button to open the dialog with "My Dialog" toolbar button.</li> |
|
157 </ol> |
|
158 <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> |
|
159 <script> |
|
160 // Replace the <textarea id="editor1"> with an CKEditor instance. |
|
161 CKEDITOR.replace( 'editor1', config ); |
|
162 </script> |
|
163 <p>The below editor modify the dialog definition of the above added dialog using the <code>dialogDefinition</code> event:</p> |
|
164 <ol> |
|
165 <li><strong>Adding dialog tab</strong> – Add new tab "My Tab" to dialog window.</li> |
|
166 <li><strong>Removing a dialog window tab</strong> – Remove "Second Tab" page from the dialog window.</li> |
|
167 <li><strong>Adding dialog window fields</strong> – Add "My Custom Field" to the dialog window.</li> |
|
168 <li><strong>Removing dialog window field</strong> – Remove "Select Field" selection field from the dialog window.</li> |
|
169 <li><strong>Setting default values for dialog window fields</strong> – Set default value of "Text Field" text field. </li> |
|
170 <li><strong>Setup initial focus for dialog window</strong> – Put initial focus on "My Custom Field" text field. </li> |
|
171 </ol> |
|
172 <textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> |
|
173 <script> |
|
174 |
|
175 // Replace the <textarea id="editor1"> with an CKEditor instance. |
|
176 CKEDITOR.replace( 'editor2', config ); |
|
177 |
|
178 </script> |
|
179 <div id="footer"> |
|
180 <hr> |
|
181 <p> |
|
182 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|
183 </p> |
|
184 <p id="copy"> |
|
185 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|
186 Knabben. All rights reserved. |
|
187 </p> |
|
188 </div> |
|
189 </body> |
|
190 </html> |