1 /*
  2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5 
  6 /**
  7  * @fileOverview Defines the "virtual" dialog, dialog content and dialog button
  8  * definition classes.
  9  */
 10 
 11 /**
 12  * The definition of a dialog window.
 13  * <div class="notapi">
 14  * This class is not really part of the API. It just illustrates the properties
 15  * that developers can use to define and create dialogs.
 16  * </div>
 17  * @name CKEDITOR.dialog.definition
 18  * @constructor
 19  * @example
 20  * // There is no constructor for this class, the user just has to define an
 21  * // object with the appropriate properties.
 22  *
 23  * CKEDITOR.dialog.add( 'testOnly', function( editor )
 24  *       {
 25  *           return {
 26  *               title : 'Test Dialog',
 27  *               resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
 28  *               minWidth : 500,
 29  *               minHeight : 400,
 30  *               contents : [
 31  *                   {
 32  *                       id : 'tab1',
 33  *                       label : 'First Tab',
 34  *                       title : 'First Tab Title',
 35  *                       accessKey : 'Q',
 36  *                       elements : [
 37  *                           {
 38  *                               type : 'text',
 39  *                               label : 'Test Text 1',
 40  *                               id : 'testText1',
 41  *                               'default' : 'hello world!'
 42  *                           }
 43  *                       ]
 44  *                    }
 45  *               ]
 46  *           };
 47  *       });
 48  */
 49 
 50 /**
 51  * The dialog title, displayed in the dialog's header. Required.
 52  * @name CKEDITOR.dialog.definition.prototype.title
 53  * @field
 54  * @type String
 55  * @example
 56  */
 57 
 58 /**
 59  * How the dialog can be resized, must be one of the four contents defined below.
 60  * <br /><br />
 61  * <strong>CKEDITOR.DIALOG_RESIZE_NONE</strong><br />
 62  * <strong>CKEDITOR.DIALOG_RESIZE_WIDTH</strong><br />
 63  * <strong>CKEDITOR.DIALOG_RESIZE_HEIGHT</strong><br />
 64  * <strong>CKEDITOR.DIALOG_RESIZE_BOTH</strong><br />
 65  * @name CKEDITOR.dialog.definition.prototype.resizable
 66  * @field
 67  * @type Number
 68  * @default CKEDITOR.DIALOG_RESIZE_NONE
 69  * @example
 70  */
 71 
 72 /**
 73  * The minimum width of the dialog, in pixels.
 74  * @name CKEDITOR.dialog.definition.prototype.minWidth
 75  * @field
 76  * @type Number
 77  * @default 600
 78  * @example
 79  */
 80 
 81 /**
 82  * The minimum height of the dialog, in pixels.
 83  * @name CKEDITOR.dialog.definition.prototype.minHeight
 84  * @field
 85  * @type Number
 86  * @default 400
 87  * @example
 88  */
 89 
 90 
 91 /**
 92  * The initial width of the dialog, in pixels.
 93  * @name CKEDITOR.dialog.definition.prototype.width
 94  * @field
 95  * @type Number
 96  * @default @CKEDITOR.dialog.definition.prototype.minWidth
 97  * @since 3.5.3
 98  * @example
 99  */
100 
101 /**
102  * The initial height of the dialog, in pixels.
103  * @name CKEDITOR.dialog.definition.prototype.height
104  * @field
105  * @type Number
106  * @default @CKEDITOR.dialog.definition.prototype.minHeight
107  * @since 3.5.3
108  * @example
109  */
110 
111 /**
112  * The buttons in the dialog, defined as an array of
113  * {@link CKEDITOR.dialog.definition.button} objects.
114  * @name CKEDITOR.dialog.definition.prototype.buttons
115  * @field
116  * @type Array
117  * @default [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]
118  * @example
119  */
120 
121 /**
122  * The contents in the dialog, defined as an array of
123  * {@link CKEDITOR.dialog.definition.content} objects. Required.
124  * @name CKEDITOR.dialog.definition.prototype.contents
125  * @field
126  * @type Array
127  * @example
128  */
129 
130 /**
131  * The function to execute when OK is pressed.
132  * @name CKEDITOR.dialog.definition.prototype.onOk
133  * @field
134  * @type Function
135  * @example
136  */
137 
138 /**
139  * The function to execute when Cancel is pressed.
140  * @name CKEDITOR.dialog.definition.prototype.onCancel
141  * @field
142  * @type Function
143  * @example
144  */
145 
146 /**
147  * The function to execute when the dialog is displayed for the first time.
148  * @name CKEDITOR.dialog.definition.prototype.onLoad
149  * @field
150  * @type Function
151  * @example
152  */
153 
154 /**
155  * The function to execute when the dialog is loaded (executed every time the dialog is opened).
156  * @name CKEDITOR.dialog.definition.prototype.onShow
157  * @field
158  * @type Function
159  * @example
160  */
161 
162 /**
163  * <div class="notapi">This class is not really part of the API. It just illustrates the properties
164  * that developers can use to define and create dialog content pages.</div>
165  * @name CKEDITOR.dialog.definition.content
166  * @constructor
167  * @example
168  * // There is no constructor for this class, the user just has to define an
169  * // object with the appropriate properties.
170  */
171 
172 /**
173  * The id of the content page.
174  * @name CKEDITOR.dialog.definition.content.prototype.id
175  * @field
176  * @type String
177  * @example
178  */
179 
180 /**
181  * The tab label of the content page.
182  * @name CKEDITOR.dialog.definition.content.prototype.label
183  * @field
184  * @type String
185  * @example
186  */
187 
188 /**
189  * The popup message of the tab label.
190  * @name CKEDITOR.dialog.definition.content.prototype.title
191  * @field
192  * @type String
193  * @example
194  */
195 
196 /**
197  * The CTRL hotkey for switching to the tab.
198  * @name CKEDITOR.dialog.definition.content.prototype.accessKey
199  * @field
200  * @type String
201  * @example
202  * contentDefinition.accessKey = 'Q';	// Switch to this page when CTRL-Q is pressed.
203  */
204 
205 /**
206  * The UI elements contained in this content page, defined as an array of
207  * {@link CKEDITOR.dialog.definition.uiElement} objects.
208  * @name CKEDITOR.dialog.definition.content.prototype.elements
209  * @field
210  * @type Array
211  * @example
212  */
213 
214 /**
215  * The definition of user interface element (textarea, radio etc).
216  * <div class="notapi">This class is not really part of the API. It just illustrates the properties
217  * that developers can use to define and create dialog UI elements.</div>
218  * @name CKEDITOR.dialog.definition.uiElement
219  * @constructor
220  * @see CKEDITOR.ui.dialog.uiElement
221  * @example
222  * // There is no constructor for this class, the user just has to define an
223  * // object with the appropriate properties.
224  */
225 
226 /**
227  * The id of the UI element.
228  * @name CKEDITOR.dialog.definition.uiElement.prototype.id
229  * @field
230  * @type String
231  * @example
232  */
233 
234 /**
235  * The type of the UI element. Required.
236  * @name CKEDITOR.dialog.definition.uiElement.prototype.type
237  * @field
238  * @type String
239  * @example
240  */
241 
242 /**
243  * The popup label of the UI element.
244  * @name CKEDITOR.dialog.definition.uiElement.prototype.title
245  * @field
246  * @type String
247  * @example
248  */
249 
250 /**
251  * CSS class names to append to the UI element.
252  * @name CKEDITOR.dialog.definition.uiElement.prototype.className
253  * @field
254  * @type String
255  * @example
256  */
257 
258 /**
259  * Inline CSS classes to append to the UI element.
260  * @name CKEDITOR.dialog.definition.uiElement.prototype.style
261  * @field
262  * @type String
263  * @example
264  */
265 
266 /**
267  * Horizontal alignment (in container) of the UI element.
268  * @name CKEDITOR.dialog.definition.uiElement.prototype.align
269  * @field
270  * @type String
271  * @example
272  */
273 
274 /**
275  * Function to execute the first time the UI element is displayed.
276  * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad
277  * @field
278  * @type Function
279  * @example
280  */
281 
282 /**
283  * Function to execute whenever the UI element's parent dialog is displayed.
284  * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow
285  * @field
286  * @type Function
287  * @example
288  */
289 
290 /**
291  * Function to execute whenever the UI element's parent dialog is closed.
292  * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide
293  * @field
294  * @type Function
295  * @example
296  */
297 
298 /**
299  * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.setupContent} method is executed.
300  * It usually takes care of the respective UI element as a standalone element.
301  * @name CKEDITOR.dialog.definition.uiElement.prototype.setup
302  * @field
303  * @type Function
304  * @example
305  */
306 
307 /**
308  * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.commitContent} method is executed.
309  * It usually takes care of the respective UI element as a standalone element.
310  * @name CKEDITOR.dialog.definition.uiElement.prototype.commit
311  * @field
312  * @type Function
313  * @example
314  */
315 
316 // ----- hbox -----
317 
318 /**
319  * Horizontal layout box for dialog UI elements, auto-expends to available width of container.
320  * <div class="notapi">
321  * This class is not really part of the API. It just illustrates the properties
322  * that developers can use to define and create horizontal layouts.
323  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.hbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
324  * </div>
325  * @name CKEDITOR.dialog.definition.hbox
326  * @extends CKEDITOR.dialog.definition.uiElement
327  * @constructor
328  * @example
329  * // There is no constructor for this class, the user just has to define an
330  * // object with the appropriate properties.
331  *
332  * // Example:
333  * {
334  * 	<b>type : 'hbox',</b>
335  * 	widths : [ '25%', '25%', '50%' ],
336  * 	children :
337  * 	[
338  * 		{
339  * 			type : 'text',
340  * 			id : 'id1',
341  * 			width : '40px',
342  * 		},
343  * 		{
344  * 			type : 'text',
345  * 			id : 'id2',
346  * 			width : '40px',
347  * 		},
348  * 		{
349  * 			type : 'text',
350  * 			id : 'id3'
351  * 		}
352  * 	]
353  * }
354  */
355 
356 /**
357  * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
358  * @name CKEDITOR.dialog.definition.hbox.prototype.children
359  * @field
360  * @type Array
361  * @example
362  */
363 
364 /**
365  * (Optional) The widths of child cells.
366  * @name CKEDITOR.dialog.definition.hbox.prototype.widths
367  * @field
368  * @type Array
369  * @example
370  */
371 
372 /**
373  * (Optional) The height of the layout.
374  * @name CKEDITOR.dialog.definition.hbox.prototype.height
375  * @field
376  * @type Number
377  * @example
378  */
379 
380 /**
381  * The CSS styles to apply to this element.
382  * @name CKEDITOR.dialog.definition.hbox.prototype.styles
383  * @field
384  * @type String
385  * @example
386  */
387 
388 /**
389  * (Optional) The padding width inside child cells. Example: 0, 1.
390  * @name CKEDITOR.dialog.definition.hbox.prototype.padding
391  * @field
392  * @type Number
393  * @example
394  */
395 
396 /**
397  * (Optional) The alignment of the whole layout. Example: center, top.
398  * @name CKEDITOR.dialog.definition.hbox.prototype.align
399  * @field
400  * @type String
401  * @example
402  */
403 
404 // ----- vbox -----
405 
406 /**
407  * Vertical layout box for dialog UI elements.
408  * <div class="notapi">
409  * This class is not really part of the API. It just illustrates the properties
410  * that developers can use to define and create vertical layouts.
411  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.vbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
412  * </div>
413  * <style type="text/css">.details .detailList {display:none;} </style>
414  * @name CKEDITOR.dialog.definition.vbox
415  * @extends CKEDITOR.dialog.definition.uiElement
416  * @constructor
417  * @example
418  * // There is no constructor for this class, the user just has to define an
419  * // object with the appropriate properties.
420  *
421  * // Example:
422  * {
423  * 	<b>type : 'vbox',</b>
424  * 	align : 'right',
425  * 	width : '200px',
426  * 	children :
427  * 	[
428  * 		{
429  * 			type : 'text',
430  * 			id : 'age',
431  * 			label : 'Age'
432  * 		},
433  * 		{
434  * 			type : 'text',
435  * 			id : 'sex',
436  * 			label : 'Sex'
437  * 		},
438  * 		{
439  * 			type : 'text',
440  * 			id : 'nationality',
441  * 			label : 'Nationality'
442  * 		}
443  * 	]
444  * }
445  */
446 
447 /**
448  * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
449  * @name CKEDITOR.dialog.definition.vbox.prototype.children
450  * @field
451  * @type Array
452  * @example
453  */
454 
455 /**
456  * (Optional) The width of the layout.
457  * @name CKEDITOR.dialog.definition.vbox.prototype.width
458  * @field
459  * @type Array
460  * @example
461  */
462 
463 /**
464  * (Optional) The heights of individual cells.
465  * @name CKEDITOR.dialog.definition.vbox.prototype.heights
466  * @field
467  * @type Number
468  * @example
469  */
470 
471 /**
472  * The CSS styles to apply to this element.
473  * @name CKEDITOR.dialog.definition.vbox.prototype.styles
474  * @field
475  * @type String
476  * @example
477  */
478 
479 /**
480  * (Optional) The padding width inside child cells. Example: 0, 1.
481  * @name CKEDITOR.dialog.definition.vbox.prototype.padding
482  * @field
483  * @type Number
484  * @example
485  */
486 
487 /**
488  * (Optional) The alignment of the whole layout. Example: center, top.
489  * @name CKEDITOR.dialog.definition.vbox.prototype.align
490  * @field
491  * @type String
492  * @example
493  */
494 
495 /**
496  * (Optional) Whether the layout should expand vertically to fill its container.
497  * @name CKEDITOR.dialog.definition.vbox.prototype.expand
498  * @field
499  * @type Boolean
500  * @example
501  */
502 
503 // ----- labeled element ------
504 
505 /**
506  * The definition of labeled user interface element (textarea, textInput etc).
507  * <div class="notapi">This class is not really part of the API. It just illustrates the properties
508  * that developers can use to define and create dialog UI elements.</div>
509  * @name CKEDITOR.dialog.definition.labeledElement
510  * @extends CKEDITOR.dialog.definition.uiElement
511  * @constructor
512  * @see CKEDITOR.ui.dialog.labeledElement
513  * @example
514  * // There is no constructor for this class, the user just has to define an
515  * // object with the appropriate properties.
516  */
517 
518 /**
519  * The label of the UI element.
520  * @name CKEDITOR.dialog.definition.labeledElement.prototype.label
521  * @type String
522  * @field
523  * @example
524  * {
525  * 		type : 'text',
526  * 		label : 'My Label '
527  * }
528  */
529 
530 /**
531  * (Optional) Specify the layout of the label. Set to 'horizontal' for horizontal layout.
532  * The default layout is vertical.
533  * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelLayout
534  * @type String
535  * @field
536  * @example
537  * {
538  * 		type : 'text',
539  * 		label : 'My Label ',
540  * 	<strong>	labelLayout : 'horizontal',</strong>
541  * }
542  */
543 
544 /**
545  * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the
546 * 	label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}.
547  * @name CKEDITOR.dialog.definition.labeledElement.prototype.widths
548  * @type Array
549  * @field
550  * @example
551  * {
552  * 		type : 'text',
553  * 		label : 'My Label ',
554  * 		labelLayout : 'horizontal',
555  * 	<strong>	widths : [100, 200],</strong>
556  * }
557  */
558 
559 /**
560  *  Specify the inline style of the uiElement label.
561  * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelStyle
562  * @type String
563  * @field
564  * @example
565  * {
566  * 		type : 'text',
567  * 		label : 'My Label ',
568  * 	<strong>	labelStyle : 'color: red',</strong>
569  * }
570  */
571 
572 
573 /**
574  *  Specify the inline style of the input element.
575  * @name CKEDITOR.dialog.definition.labeledElement.prototype.inputStyle
576  * @type String
577  * @since 3.6.1
578  * @field
579  * @example
580  * {
581  * 		type : 'text',
582  * 		label : 'My Label ',
583  * 	<strong>	inputStyle : 'text-align:center',</strong>
584  * }
585  */
586 
587 /**
588  *  Specify the inline style of the input element container .
589  * @name CKEDITOR.dialog.definition.labeledElement.prototype.controlStyle
590  * @type String
591  * @since 3.6.1
592  * @field
593  * @example
594  * {
595  * 		type : 'text',
596  * 		label : 'My Label ',
597  * 	<strong>	controlStyle : 'width:3em',</strong>
598  * }
599  */
600 
601 
602 // ----- button ------
603 
604 /**
605  * The definition of a button.
606  * <div class="notapi">
607  * This class is not really part of the API. It just illustrates the properties
608  * that developers can use to define and create buttons.
609  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.button} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
610  * </div>
611  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
612  * @name CKEDITOR.dialog.definition.button
613  * @extends CKEDITOR.dialog.definition.uiElement
614  * @constructor
615  * @example
616  * // There is no constructor for this class, the user just has to define an
617  * // object with the appropriate properties.
618  *
619  * // Example:
620  * {
621  * 	<b>type : 'button',</b>
622  * 	id : 'buttonId',
623  * 	label : 'Click me',
624  * 	title : 'My title',
625  * 	onClick : function() {
626  * 		// this = CKEDITOR.ui.dialog.button
627  * 		alert( 'Clicked: ' + this.id );
628  * 	}
629  * }
630  */
631 
632 /**
633  * Whether the button is disabled.
634  * @name CKEDITOR.dialog.definition.button.prototype.disabled
635  * @type Boolean
636  * @field
637  * @example
638  */
639 
640 /**
641  * The label of the UI element.
642  * @name CKEDITOR.dialog.definition.button.prototype.label
643  * @type String
644  * @field
645  * @example
646  */
647 
648 // ----- checkbox ------
649 
650 /**
651  * The definition of a checkbox element.
652  * <div class="notapi">
653  * This class is not really part of the API. It just illustrates the properties
654  * that developers can use to define and create groups of checkbox buttons.
655  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.checkbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
656  * </div>
657  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
658  * @name CKEDITOR.dialog.definition.checkbox
659  * @extends CKEDITOR.dialog.definition.uiElement
660  * @constructor
661  * @example
662  * // There is no constructor for this class, the user just has to define an
663  * // object with the appropriate properties.
664  *
665  * // Example:
666  * {
667  * 	<b>type : 'checkbox',</b>
668  * 	id : 'agree',
669  * 	label : 'I agree',
670  * 	'default' : 'checked',
671  * 	onClick : function() {
672  * 		// this = CKEDITOR.ui.dialog.checkbox
673  * 		alert( 'Checked: ' + this.getValue() );
674  * 	}
675  * }
676  */
677 
678 /**
679  * (Optional) The validation function.
680  * @name CKEDITOR.dialog.definition.checkbox.prototype.validate
681  * @field
682  * @type Function
683  * @example
684  */
685 
686 /**
687  * The label of the UI element.
688  * @name CKEDITOR.dialog.definition.checkbox.prototype.label
689  * @type String
690  * @field
691  * @example
692  */
693 
694 /**
695  * The default state.
696  * @name CKEDITOR.dialog.definition.checkbox.prototype.default
697  * @type String
698  * @field
699  * @default
700  * '' (unchecked)
701  * @example
702  */
703 
704 // ----- file -----
705 
706 /**
707  * The definition of a file upload input.
708  * <div class="notapi">
709  * This class is not really part of the API. It just illustrates the properties
710  * that developers can use to define and create file upload elements.
711  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.file} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
712  * </div>
713  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
714  * @name CKEDITOR.dialog.definition.file
715  * @extends CKEDITOR.dialog.definition.labeledElement
716  * @constructor
717  * @example
718  * // There is no constructor for this class, the user just has to define an
719  * // object with the appropriate properties.
720  *
721  * // Example:
722  * {
723  * 	<b>type : 'file'</b>,
724  * 	id : 'upload',
725  * 	label : 'Select file from your computer',
726  * 	size : 38
727  * },
728  * {
729  * 	type : 'fileButton',
730  * 	id : 'fileId',
731  * 	label : 'Upload file',
732  * 	'for' : [ 'tab1', 'upload' ]
733  * 	filebrowser : {
734  * 		onSelect : function( fileUrl, data ) {
735  * 			alert( 'Successfully uploaded: ' + fileUrl );
736  * 		}
737  * 	}
738  * }
739  */
740 
741 /**
742  * (Optional) The validation function.
743  * @name CKEDITOR.dialog.definition.file.prototype.validate
744  * @field
745  * @type Function
746  * @example
747  */
748 
749 /**
750  * (Optional) The action attribute of the form element associated with this file upload input.
751  * If empty, CKEditor will use path to server connector for currently opened folder.
752  * @name CKEDITOR.dialog.definition.file.prototype.action
753  * @type String
754  * @field
755  * @example
756  */
757 
758 /**
759  * The size of the UI element.
760  * @name CKEDITOR.dialog.definition.file.prototype.size
761  * @type Number
762  * @field
763  * @example
764  */
765 
766 // ----- fileButton -----
767 
768 /**
769  * The definition of a button for submitting the file in a file upload input.
770  * <div class="notapi">
771  * This class is not really part of the API. It just illustrates the properties
772  * that developers can use to define and create a button for submitting the file in a file upload input.
773  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.fileButton} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
774  * </div>
775  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
776  * @name CKEDITOR.dialog.definition.fileButton
777  * @extends CKEDITOR.dialog.definition.uiElement
778  * @constructor
779  * @example
780  * // There is no constructor for this class, the user just has to define an
781  * // object with the appropriate properties.
782  *
783  * // Example:
784  * {
785  * 	type : 'file',
786  * 	id : 'upload',
787  * 	label : 'Select file from your computer',
788  * 	size : 38
789  * },
790  * {
791  * 	<b>type : 'fileButton'</b>,
792  * 	id : 'fileId',
793  * 	label : 'Upload file',
794  * 	'for' : [ 'tab1', 'upload' ]
795  * 	filebrowser : {
796  * 		onSelect : function( fileUrl, data ) {
797  * 			alert( 'Successfully uploaded: ' + fileUrl );
798  * 		}
799  * 	}
800  * }
801  */
802 
803 /**
804  * (Optional) The validation function.
805  * @name CKEDITOR.dialog.definition.fileButton.prototype.validate
806  * @field
807  * @type Function
808  * @example
809  */
810 
811 /**
812  * The label of the UI element.
813  * @name CKEDITOR.dialog.definition.fileButton.prototype.label
814  * @type String
815  * @field
816  * @example
817  */
818 
819 /**
820  * The instruction for CKEditor how to deal with file upload.
821  * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.
822  * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser
823  * @type String|Object
824  * @field
825  * @example
826  * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.
827  * filebrowser : 'tab1:txtUrl'
828  *
829  * // Call custom onSelect function when file is successfully uploaded.
830  * filebrowser : {
831  * 	onSelect : function( fileUrl, data ) {
832  * 		alert( 'Successfully uploaded: ' + fileUrl );
833  * 	}
834  * }
835  */
836 
837 /**
838  * An array that contains pageId and elementId of the file upload input element for which this button is created.
839  * @name CKEDITOR.dialog.definition.fileButton.prototype.for
840  * @type String
841  * @field
842  * @example
843  * [ pageId, elementId ]
844  */
845 
846 // ----- html -----
847 
848 /**
849  * The definition of a raw HTML element.
850  * <div class="notapi">
851  * This class is not really part of the API. It just illustrates the properties
852  * that developers can use to define and create elements made from raw HTML code.
853  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.html} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
854  * </div>
855  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.<br />
856  * To access HTML elements use {@link CKEDITOR.dom.document#getById}
857  * @name CKEDITOR.dialog.definition.html
858  * @extends CKEDITOR.dialog.definition.uiElement
859  * @constructor
860  * @example
861  * // There is no constructor for this class, the user just has to define an
862  * // object with the appropriate properties.
863  *
864  * // Example 1:
865  * {
866  * 	<b>type : 'html',</b>
867  * 	html : '<h3>This is some sample HTML content.</h3>'
868  * }
869  * @example
870  * // Example 2:
871  * // Complete sample with document.getById() call when the "Ok" button is clicked.
872  * var dialogDefinition =
873  * {
874  * 	title : 'Sample dialog',
875  * 	minWidth : 300,
876  * 	minHeight : 200,
877  * 	onOk : function() {
878  * 		// "this" is now a CKEDITOR.dialog object.
879  * 		var document = this.getElement().getDocument();
880  * 		// document = CKEDITOR.dom.document
881  * 		var element = <b>document.getById( 'myDiv' );</b>
882  * 		if ( element )
883  * 			alert( element.getHtml() );
884  * 	},
885  * 	contents : [
886  * 		{
887  * 			id : 'tab1',
888  * 			label : '',
889  * 			title : '',
890  * 			elements :
891  * 			[
892  * 				{
893  * 					<b>type : 'html',</b>
894  * 					html : '<b><div id="myDiv">Sample <b>text</b>.</div></b><div id="otherId">Another div.</div>'
895  * 				},
896  * 			]
897  * 		}
898  * 	],
899  * 	buttons : [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]
900  * };
901  */
902 
903 /**
904  * (Required) HTML code of this element.
905  * @name CKEDITOR.dialog.definition.html.prototype.html
906  * @type String
907  * @field
908  * @example
909  */
910 
911 // ----- radio ------
912 
913 /**
914  * The definition of a radio group.
915  * <div class="notapi">
916  * This class is not really part of the API. It just illustrates the properties
917  * that developers can use to define and create groups of radio buttons.
918  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.radio} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
919  * </div>
920  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
921  * @name CKEDITOR.dialog.definition.radio
922  * @extends CKEDITOR.dialog.definition.labeledElement
923  * @constructor
924  * @example
925  * // There is no constructor for this class, the user just has to define an
926  * // object with the appropriate properties.
927  *
928  * // Example:
929  * {
930  * 	<b>type : 'radio',</b>
931  * 	id : 'country',
932  * 	label : 'Which country is bigger',
933  * 	items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,
934  * 	style : 'color:green',
935  * 	'default' : 'DE',
936  * 	onClick : function() {
937  * 		// this = CKEDITOR.ui.dialog.radio
938  * 		alert( 'Current value: ' + this.getValue() );
939  * 	}
940  * }
941  */
942 
943 /**
944  * The default value.
945  * @name CKEDITOR.dialog.definition.radio.prototype.default
946  * @type String
947  * @field
948  * @example
949  */
950 
951 /**
952  * (Optional) The validation function.
953  * @name CKEDITOR.dialog.definition.radio.prototype.validate
954  * @field
955  * @type Function
956  * @example
957  */
958 
959 /**
960  *  An array of options. Each option is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value' is missing, then the value would be assumed to be the same as the description.
961  * @name CKEDITOR.dialog.definition.radio.prototype.items
962  * @field
963  * @type Array
964  * @example
965  */
966 
967 // ----- selectElement ------
968 
969 /**
970  * The definition of a select element.
971  * <div class="notapi">
972  * This class is not really part of the API. It just illustrates the properties
973  * that developers can use to define and create select elements.
974  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.select} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
975  * </div>
976  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
977  * @name CKEDITOR.dialog.definition.select
978  * @extends CKEDITOR.dialog.definition.labeledElement
979  * @constructor
980  * @example
981  * // There is no constructor for this class, the user just has to define an
982  * // object with the appropriate properties.
983  *
984  * // Example:
985  * {
986  * 	<b>type : 'select',</b>
987  * 	id : 'sport',
988  * 	label : 'Select your favourite sport',
989  * 	items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
990  * 	'default' : 'Football',
991  * 	onChange : function( api ) {
992  * 		// this = CKEDITOR.ui.dialog.select
993  * 		alert( 'Current value: ' + this.getValue() );
994  * 	}
995  * }
996  */
997 
998 /**
999  * The default value.
1000  * @name CKEDITOR.dialog.definition.select.prototype.default
1001  * @type String
1002  * @field
1003  * @example
1004  */
1005 
1006 /**
1007  * (Optional) The validation function.
1008  * @name CKEDITOR.dialog.definition.select.prototype.validate
1009  * @field
1010  * @type Function
1011  * @example
1012  */
1013 
1014 /**
1015  *  An array of options. Each option is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value' is missing, then the value would be assumed to be the same as the description.
1016  * @name CKEDITOR.dialog.definition.select.prototype.items
1017  * @field
1018  * @type Array
1019  * @example
1020  */
1021 
1022 /**
1023  * (Optional) Set this to true if you'd like to have a multiple-choice select box.
1024  * @name CKEDITOR.dialog.definition.select.prototype.multiple
1025  * @type Boolean
1026  * @field
1027  * @example
1028  * @default false
1029  */
1030 
1031 /**
1032  * (Optional) The number of items to display in the select box.
1033  * @name CKEDITOR.dialog.definition.select.prototype.size
1034  * @type Number
1035  * @field
1036  * @example
1037  */
1038 
1039 // ----- textInput -----
1040 
1041 /**
1042  * The definition of a text field (single line).
1043  * <div class="notapi">
1044  * This class is not really part of the API. It just illustrates the properties
1045  * that developers can use to define and create text fields.
1046  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textInput} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
1047  * </div>
1048  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
1049  * @name CKEDITOR.dialog.definition.textInput
1050  * @extends CKEDITOR.dialog.definition.labeledElement
1051  * @constructor
1052  * @example
1053  * // There is no constructor for this class, the user just has to define an
1054  * // object with the appropriate properties.
1055  *
1056  * {
1057  * 	<b>type : 'text',</b>
1058  * 	id : 'name',
1059  * 	label : 'Your name',
1060  * 	'default' : '',
1061  * 	validate : function() {
1062  * 		if ( !this.getValue() )
1063  * 		{
1064  * 			api.openMsgDialog( '', 'Name cannot be empty.' );
1065  * 			return false;
1066  * 		}
1067  * 	}
1068  * }
1069  */
1070 
1071 /**
1072  * The default value.
1073  * @name CKEDITOR.dialog.definition.textInput.prototype.default
1074  * @type String
1075  * @field
1076  * @example
1077  */
1078 
1079 /**
1080  * (Optional) The maximum length.
1081  * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength
1082  * @type Number
1083  * @field
1084  * @example
1085  */
1086 
1087 /**
1088  * (Optional) The size of the input field.
1089  * @name CKEDITOR.dialog.definition.textInput.prototype.size
1090  * @type Number
1091  * @field
1092  * @example
1093  */
1094 
1095 /**
1096  * (Optional) The validation function.
1097  * @name CKEDITOR.dialog.definition.textInput.prototype.validate
1098  * @field
1099  * @type Function
1100  * @example
1101  */
1102 
1103 // ----- textarea ------
1104 
1105 /**
1106  * The definition of a text field (multiple lines).
1107  * <div class="notapi">
1108  * This class is not really part of the API. It just illustrates the properties
1109  * that developers can use to define and create textarea.
1110  * <br /><br />Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textarea} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
1111  * </div>
1112  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
1113  * @name CKEDITOR.dialog.definition.textarea
1114  * @extends CKEDITOR.dialog.definition.labeledElement
1115  * @constructor
1116  * @example
1117  * // There is no constructor for this class, the user just has to define an
1118  * // object with the appropriate properties.
1119  *
1120  * // Example:
1121  * {
1122  * 	<b>type : 'textarea',</b>
1123  * 	id : 'message',
1124  * 	label : 'Your comment',
1125  * 	'default' : '',
1126  * 	validate : function() {
1127  * 		if ( this.getValue().length < 5 )
1128  * 		{
1129  * 			api.openMsgDialog( 'The comment is too short.' );
1130  * 			return false;
1131  * 		}
1132  * 	}
1133  * }
1134  */
1135 
1136 /**
1137  * The number of rows.
1138  * @name CKEDITOR.dialog.definition.textarea.prototype.rows
1139  * @type Number
1140  * @field
1141  * @example
1142  */
1143 
1144 /**
1145  * The number of columns.
1146  * @name CKEDITOR.dialog.definition.textarea.prototype.cols
1147  * @type Number
1148  * @field
1149  * @example
1150  */
1151 
1152 /**
1153  * (Optional) The validation function.
1154  * @name CKEDITOR.dialog.definition.textarea.prototype.validate
1155  * @field
1156  * @type Function
1157  * @example
1158  */
1159 
1160 /**
1161  * The default value.
1162  * @name CKEDITOR.dialog.definition.textarea.prototype.default
1163  * @type String
1164  * @field
1165  * @example
1166  */
1167