2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @fileOverview Defines the "virtual" dialog, dialog content and dialog button
\r
8 * definition classes.
\r
12 * The definition of a dialog window.
\r
13 * <div class="notapi">
\r
14 * This class is not really part of the API. It just illustrates the properties
\r
15 * that developers can use to define and create dialogs.
\r
17 * @name CKEDITOR.dialog.definition
\r
20 * // There is no constructor for this class, the user just has to define an
\r
21 * // object with the appropriate properties.
\r
23 * CKEDITOR.dialog.add( 'testOnly', function( editor )
\r
26 * title : 'Test Dialog',
\r
27 * resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
\r
33 * label : 'First Tab',
\r
34 * title : 'First Tab Title',
\r
39 * label : 'Test Text 1',
\r
41 * 'default' : 'hello world!'
\r
51 * The dialog title, displayed in the dialog's header. Required.
\r
52 * @name CKEDITOR.dialog.definition.prototype.title
\r
59 * How the dialog can be resized, must be one of the four contents defined below.
\r
61 * <strong>CKEDITOR.DIALOG_RESIZE_NONE</strong><br />
\r
62 * <strong>CKEDITOR.DIALOG_RESIZE_WIDTH</strong><br />
\r
63 * <strong>CKEDITOR.DIALOG_RESIZE_HEIGHT</strong><br />
\r
64 * <strong>CKEDITOR.DIALOG_RESIZE_BOTH</strong><br />
\r
65 * @name CKEDITOR.dialog.definition.prototype.resizable
\r
68 * @default CKEDITOR.DIALOG_RESIZE_NONE
\r
73 * The minimum width of the dialog, in pixels.
\r
74 * @name CKEDITOR.dialog.definition.prototype.minWidth
\r
82 * The minimum height of the dialog, in pixels.
\r
83 * @name CKEDITOR.dialog.definition.prototype.minHeight
\r
92 * The initial width of the dialog, in pixels.
\r
93 * @name CKEDITOR.dialog.definition.prototype.width
\r
96 * @default @CKEDITOR.dialog.definition.prototype.minWidth
\r
102 * The initial height of the dialog, in pixels.
\r
103 * @name CKEDITOR.dialog.definition.prototype.height
\r
106 * @default @CKEDITOR.dialog.definition.prototype.minHeight
\r
112 * The buttons in the dialog, defined as an array of
\r
113 * {@link CKEDITOR.dialog.definition.button} objects.
\r
114 * @name CKEDITOR.dialog.definition.prototype.buttons
\r
117 * @default [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]
\r
122 * The contents in the dialog, defined as an array of
\r
123 * {@link CKEDITOR.dialog.definition.content} objects. Required.
\r
124 * @name CKEDITOR.dialog.definition.prototype.contents
\r
131 * The function to execute when OK is pressed.
\r
132 * @name CKEDITOR.dialog.definition.prototype.onOk
\r
139 * The function to execute when Cancel is pressed.
\r
140 * @name CKEDITOR.dialog.definition.prototype.onCancel
\r
147 * The function to execute when the dialog is displayed for the first time.
\r
148 * @name CKEDITOR.dialog.definition.prototype.onLoad
\r
155 * The function to execute when the dialog is loaded (executed every time the dialog is opened).
\r
156 * @name CKEDITOR.dialog.definition.prototype.onShow
\r
163 * <div class="notapi">This class is not really part of the API. It just illustrates the properties
\r
164 * that developers can use to define and create dialog content pages.</div>
\r
165 * @name CKEDITOR.dialog.definition.content
\r
168 * // There is no constructor for this class, the user just has to define an
\r
169 * // object with the appropriate properties.
\r
173 * The id of the content page.
\r
174 * @name CKEDITOR.dialog.definition.content.prototype.id
\r
181 * The tab label of the content page.
\r
182 * @name CKEDITOR.dialog.definition.content.prototype.label
\r
189 * The popup message of the tab label.
\r
190 * @name CKEDITOR.dialog.definition.content.prototype.title
\r
197 * The CTRL hotkey for switching to the tab.
\r
198 * @name CKEDITOR.dialog.definition.content.prototype.accessKey
\r
202 * contentDefinition.accessKey = 'Q'; // Switch to this page when CTRL-Q is pressed.
\r
206 * The UI elements contained in this content page, defined as an array of
\r
207 * {@link CKEDITOR.dialog.definition.uiElement} objects.
\r
208 * @name CKEDITOR.dialog.definition.content.prototype.elements
\r
215 * The definition of user interface element (textarea, radio etc).
\r
216 * <div class="notapi">This class is not really part of the API. It just illustrates the properties
\r
217 * that developers can use to define and create dialog UI elements.</div>
\r
218 * @name CKEDITOR.dialog.definition.uiElement
\r
220 * @see CKEDITOR.ui.dialog.uiElement
\r
222 * // There is no constructor for this class, the user just has to define an
\r
223 * // object with the appropriate properties.
\r
227 * The id of the UI element.
\r
228 * @name CKEDITOR.dialog.definition.uiElement.prototype.id
\r
235 * The type of the UI element. Required.
\r
236 * @name CKEDITOR.dialog.definition.uiElement.prototype.type
\r
243 * The popup label of the UI element.
\r
244 * @name CKEDITOR.dialog.definition.uiElement.prototype.title
\r
251 * CSS class names to append to the UI element.
\r
252 * @name CKEDITOR.dialog.definition.uiElement.prototype.className
\r
259 * Inline CSS classes to append to the UI element.
\r
260 * @name CKEDITOR.dialog.definition.uiElement.prototype.style
\r
267 * Horizontal alignment (in container) of the UI element.
\r
268 * @name CKEDITOR.dialog.definition.uiElement.prototype.align
\r
275 * Function to execute the first time the UI element is displayed.
\r
276 * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad
\r
283 * Function to execute whenever the UI element's parent dialog is displayed.
\r
284 * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow
\r
291 * Function to execute whenever the UI element's parent dialog is closed.
\r
292 * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide
\r
299 * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.setupContent} method is executed.
\r
300 * It usually takes care of the respective UI element as a standalone element.
\r
301 * @name CKEDITOR.dialog.definition.uiElement.prototype.setup
\r
308 * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.commitContent} method is executed.
\r
309 * It usually takes care of the respective UI element as a standalone element.
\r
310 * @name CKEDITOR.dialog.definition.uiElement.prototype.commit
\r
316 // ----- hbox -----
\r
319 * Horizontal layout box for dialog UI elements, auto-expends to available width of container.
\r
320 * <div class="notapi">
\r
321 * This class is not really part of the API. It just illustrates the properties
\r
322 * that developers can use to define and create horizontal layouts.
\r
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}.
\r
325 * @name CKEDITOR.dialog.definition.hbox
\r
326 * @extends CKEDITOR.dialog.definition.uiElement
\r
329 * // There is no constructor for this class, the user just has to define an
\r
330 * // object with the appropriate properties.
\r
334 * <b>type : 'hbox',</b>
\r
335 * widths : [ '25%', '25%', '50%' ],
\r
357 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
\r
358 * @name CKEDITOR.dialog.definition.hbox.prototype.children
\r
365 * (Optional) The widths of child cells.
\r
366 * @name CKEDITOR.dialog.definition.hbox.prototype.widths
\r
373 * (Optional) The height of the layout.
\r
374 * @name CKEDITOR.dialog.definition.hbox.prototype.height
\r
381 * The CSS styles to apply to this element.
\r
382 * @name CKEDITOR.dialog.definition.hbox.prototype.styles
\r
389 * (Optional) The padding width inside child cells. Example: 0, 1.
\r
390 * @name CKEDITOR.dialog.definition.hbox.prototype.padding
\r
397 * (Optional) The alignment of the whole layout. Example: center, top.
\r
398 * @name CKEDITOR.dialog.definition.hbox.prototype.align
\r
404 // ----- vbox -----
\r
407 * Vertical layout box for dialog UI elements.
\r
408 * <div class="notapi">
\r
409 * This class is not really part of the API. It just illustrates the properties
\r
410 * that developers can use to define and create vertical layouts.
\r
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}.
\r
413 * <style type="text/css">.details .detailList {display:none;} </style>
\r
414 * @name CKEDITOR.dialog.definition.vbox
\r
415 * @extends CKEDITOR.dialog.definition.uiElement
\r
418 * // There is no constructor for this class, the user just has to define an
\r
419 * // object with the appropriate properties.
\r
423 * <b>type : 'vbox',</b>
\r
440 * id : 'nationality',
\r
441 * label : 'Nationality'
\r
448 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
\r
449 * @name CKEDITOR.dialog.definition.vbox.prototype.children
\r
456 * (Optional) The width of the layout.
\r
457 * @name CKEDITOR.dialog.definition.vbox.prototype.width
\r
464 * (Optional) The heights of individual cells.
\r
465 * @name CKEDITOR.dialog.definition.vbox.prototype.heights
\r
472 * The CSS styles to apply to this element.
\r
473 * @name CKEDITOR.dialog.definition.vbox.prototype.styles
\r
480 * (Optional) The padding width inside child cells. Example: 0, 1.
\r
481 * @name CKEDITOR.dialog.definition.vbox.prototype.padding
\r
488 * (Optional) The alignment of the whole layout. Example: center, top.
\r
489 * @name CKEDITOR.dialog.definition.vbox.prototype.align
\r
496 * (Optional) Whether the layout should expand vertically to fill its container.
\r
497 * @name CKEDITOR.dialog.definition.vbox.prototype.expand
\r
503 // ----- labeled element ------
\r
506 * The definition of labeled user interface element (textarea, textInput etc).
\r
507 * <div class="notapi">This class is not really part of the API. It just illustrates the properties
\r
508 * that developers can use to define and create dialog UI elements.</div>
\r
509 * @name CKEDITOR.dialog.definition.labeledElement
\r
510 * @extends CKEDITOR.dialog.definition.uiElement
\r
512 * @see CKEDITOR.ui.dialog.labeledElement
\r
514 * // There is no constructor for this class, the user just has to define an
\r
515 * // object with the appropriate properties.
\r
519 * The label of the UI element.
\r
520 * @name CKEDITOR.dialog.definition.labeledElement.prototype.label
\r
526 * label : 'My Label '
\r
531 * (Optional) Specify the layout of the label. Set to 'horizontal' for horizontal layout.
\r
532 * The default layout is vertical.
\r
533 * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelLayout
\r
539 * label : 'My Label ',
\r
540 * <strong> labelLayout : 'horizontal',</strong>
\r
545 * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the
\r
546 * label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}.
\r
547 * @name CKEDITOR.dialog.definition.labeledElement.prototype.widths
\r
553 * label : 'My Label ',
\r
554 * labelLayout : 'horizontal',
\r
555 * <strong> widths : [100, 200],</strong>
\r
560 * Specify the inline style of the uiElement label.
\r
561 * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelStyle
\r
567 * label : 'My Label ',
\r
568 * <strong> labelStyle : 'color: red',</strong>
\r
574 * Specify the inline style of the input element.
\r
575 * @name CKEDITOR.dialog.definition.labeledElement.prototype.inputStyle
\r
582 * label : 'My Label ',
\r
583 * <strong> inputStyle : 'text-align:center',</strong>
\r
588 * Specify the inline style of the input element container .
\r
589 * @name CKEDITOR.dialog.definition.labeledElement.prototype.controlStyle
\r
596 * label : 'My Label ',
\r
597 * <strong> controlStyle : 'width:3em',</strong>
\r
602 // ----- button ------
\r
605 * The definition of a button.
\r
606 * <div class="notapi">
\r
607 * This class is not really part of the API. It just illustrates the properties
\r
608 * that developers can use to define and create buttons.
\r
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}.
\r
611 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
612 * @name CKEDITOR.dialog.definition.button
\r
613 * @extends CKEDITOR.dialog.definition.uiElement
\r
616 * // There is no constructor for this class, the user just has to define an
\r
617 * // object with the appropriate properties.
\r
621 * <b>type : 'button',</b>
\r
623 * label : 'Click me',
\r
624 * title : 'My title',
\r
625 * onClick : function() {
\r
626 * // this = CKEDITOR.ui.dialog.button
\r
627 * alert( 'Clicked: ' + this.id );
\r
633 * Whether the button is disabled.
\r
634 * @name CKEDITOR.dialog.definition.button.prototype.disabled
\r
641 * The label of the UI element.
\r
642 * @name CKEDITOR.dialog.definition.button.prototype.label
\r
648 // ----- checkbox ------
\r
651 * The definition of a checkbox element.
\r
652 * <div class="notapi">
\r
653 * This class is not really part of the API. It just illustrates the properties
\r
654 * that developers can use to define and create groups of checkbox buttons.
\r
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}.
\r
657 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
658 * @name CKEDITOR.dialog.definition.checkbox
\r
659 * @extends CKEDITOR.dialog.definition.uiElement
\r
662 * // There is no constructor for this class, the user just has to define an
\r
663 * // object with the appropriate properties.
\r
667 * <b>type : 'checkbox',</b>
\r
669 * label : 'I agree',
\r
670 * 'default' : 'checked',
\r
671 * onClick : function() {
\r
672 * // this = CKEDITOR.ui.dialog.checkbox
\r
673 * alert( 'Checked: ' + this.getValue() );
\r
679 * (Optional) The validation function.
\r
680 * @name CKEDITOR.dialog.definition.checkbox.prototype.validate
\r
687 * The label of the UI element.
\r
688 * @name CKEDITOR.dialog.definition.checkbox.prototype.label
\r
695 * The default state.
\r
696 * @name CKEDITOR.dialog.definition.checkbox.prototype.default
\r
704 // ----- file -----
\r
707 * The definition of a file upload input.
\r
708 * <div class="notapi">
\r
709 * This class is not really part of the API. It just illustrates the properties
\r
710 * that developers can use to define and create file upload elements.
\r
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}.
\r
713 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
714 * @name CKEDITOR.dialog.definition.file
\r
715 * @extends CKEDITOR.dialog.definition.labeledElement
\r
718 * // There is no constructor for this class, the user just has to define an
\r
719 * // object with the appropriate properties.
\r
723 * <b>type : 'file'</b>,
\r
725 * label : 'Select file from your computer',
\r
729 * type : 'fileButton',
\r
731 * label : 'Upload file',
\r
732 * 'for' : [ 'tab1', 'upload' ]
\r
734 * onSelect : function( fileUrl, data ) {
\r
735 * alert( 'Successfully uploaded: ' + fileUrl );
\r
742 * (Optional) The validation function.
\r
743 * @name CKEDITOR.dialog.definition.file.prototype.validate
\r
750 * (Optional) The action attribute of the form element associated with this file upload input.
\r
751 * If empty, CKEditor will use path to server connector for currently opened folder.
\r
752 * @name CKEDITOR.dialog.definition.file.prototype.action
\r
759 * The size of the UI element.
\r
760 * @name CKEDITOR.dialog.definition.file.prototype.size
\r
766 // ----- fileButton -----
\r
769 * The definition of a button for submitting the file in a file upload input.
\r
770 * <div class="notapi">
\r
771 * This class is not really part of the API. It just illustrates the properties
\r
772 * that developers can use to define and create a button for submitting the file in a file upload input.
\r
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}.
\r
775 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
776 * @name CKEDITOR.dialog.definition.fileButton
\r
777 * @extends CKEDITOR.dialog.definition.uiElement
\r
780 * // There is no constructor for this class, the user just has to define an
\r
781 * // object with the appropriate properties.
\r
787 * label : 'Select file from your computer',
\r
791 * <b>type : 'fileButton'</b>,
\r
793 * label : 'Upload file',
\r
794 * 'for' : [ 'tab1', 'upload' ]
\r
796 * onSelect : function( fileUrl, data ) {
\r
797 * alert( 'Successfully uploaded: ' + fileUrl );
\r
804 * (Optional) The validation function.
\r
805 * @name CKEDITOR.dialog.definition.fileButton.prototype.validate
\r
812 * The label of the UI element.
\r
813 * @name CKEDITOR.dialog.definition.fileButton.prototype.label
\r
820 * The instruction for CKEditor how to deal with file upload.
\r
821 * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.
\r
822 * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser
\r
823 * @type String|Object
\r
826 * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.
\r
827 * filebrowser : 'tab1:txtUrl'
\r
829 * // Call custom onSelect function when file is successfully uploaded.
\r
831 * onSelect : function( fileUrl, data ) {
\r
832 * alert( 'Successfully uploaded: ' + fileUrl );
\r
838 * An array that contains pageId and elementId of the file upload input element for which this button is created.
\r
839 * @name CKEDITOR.dialog.definition.fileButton.prototype.for
\r
843 * [ pageId, elementId ]
\r
846 // ----- html -----
\r
849 * The definition of a raw HTML element.
\r
850 * <div class="notapi">
\r
851 * This class is not really part of the API. It just illustrates the properties
\r
852 * that developers can use to define and create elements made from raw HTML code.
\r
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}.
\r
855 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.<br />
\r
856 * To access HTML elements use {@link CKEDITOR.dom.document#getById}
\r
857 * @name CKEDITOR.dialog.definition.html
\r
858 * @extends CKEDITOR.dialog.definition.uiElement
\r
861 * // There is no constructor for this class, the user just has to define an
\r
862 * // object with the appropriate properties.
\r
866 * <b>type : 'html',</b>
\r
867 * html : '<h3>This is some sample HTML content.</h3>'
\r
871 * // Complete sample with document.getById() call when the "Ok" button is clicked.
\r
872 * var dialogDefinition =
\r
874 * title : 'Sample dialog',
\r
877 * onOk : function() {
\r
878 * // "this" is now a CKEDITOR.dialog object.
\r
879 * var document = this.getElement().getDocument();
\r
880 * // document = CKEDITOR.dom.document
\r
881 * var element = <b>document.getById( 'myDiv' );</b>
\r
883 * alert( element.getHtml() );
\r
893 * <b>type : 'html',</b>
\r
894 * html : '<b><div id="myDiv">Sample <b>text</b>.</div></b><div id="otherId">Another div.</div>'
\r
899 * buttons : [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]
\r
904 * (Required) HTML code of this element.
\r
905 * @name CKEDITOR.dialog.definition.html.prototype.html
\r
911 // ----- radio ------
\r
914 * The definition of a radio group.
\r
915 * <div class="notapi">
\r
916 * This class is not really part of the API. It just illustrates the properties
\r
917 * that developers can use to define and create groups of radio buttons.
\r
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}.
\r
920 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
921 * @name CKEDITOR.dialog.definition.radio
\r
922 * @extends CKEDITOR.dialog.definition.labeledElement
\r
925 * // There is no constructor for this class, the user just has to define an
\r
926 * // object with the appropriate properties.
\r
930 * <b>type : 'radio',</b>
\r
932 * label : 'Which country is bigger',
\r
933 * items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,
\r
934 * style : 'color:green',
\r
935 * 'default' : 'DE',
\r
936 * onClick : function() {
\r
937 * // this = CKEDITOR.ui.dialog.radio
\r
938 * alert( 'Current value: ' + this.getValue() );
\r
944 * The default value.
\r
945 * @name CKEDITOR.dialog.definition.radio.prototype.default
\r
952 * (Optional) The validation function.
\r
953 * @name CKEDITOR.dialog.definition.radio.prototype.validate
\r
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.
\r
961 * @name CKEDITOR.dialog.definition.radio.prototype.items
\r
967 // ----- selectElement ------
\r
970 * The definition of a select element.
\r
971 * <div class="notapi">
\r
972 * This class is not really part of the API. It just illustrates the properties
\r
973 * that developers can use to define and create select elements.
\r
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}.
\r
976 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
977 * @name CKEDITOR.dialog.definition.select
\r
978 * @extends CKEDITOR.dialog.definition.labeledElement
\r
981 * // There is no constructor for this class, the user just has to define an
\r
982 * // object with the appropriate properties.
\r
986 * <b>type : 'select',</b>
\r
988 * label : 'Select your favourite sport',
\r
989 * items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
\r
990 * 'default' : 'Football',
\r
991 * onChange : function( api ) {
\r
992 * // this = CKEDITOR.ui.dialog.select
\r
993 * alert( 'Current value: ' + this.getValue() );
\r
999 * The default value.
\r
1000 * @name CKEDITOR.dialog.definition.select.prototype.default
\r
1007 * (Optional) The validation function.
\r
1008 * @name CKEDITOR.dialog.definition.select.prototype.validate
\r
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.
\r
1016 * @name CKEDITOR.dialog.definition.select.prototype.items
\r
1023 * (Optional) Set this to true if you'd like to have a multiple-choice select box.
\r
1024 * @name CKEDITOR.dialog.definition.select.prototype.multiple
\r
1032 * (Optional) The number of items to display in the select box.
\r
1033 * @name CKEDITOR.dialog.definition.select.prototype.size
\r
1039 // ----- textInput -----
\r
1042 * The definition of a text field (single line).
\r
1043 * <div class="notapi">
\r
1044 * This class is not really part of the API. It just illustrates the properties
\r
1045 * that developers can use to define and create text fields.
\r
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}.
\r
1048 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
1049 * @name CKEDITOR.dialog.definition.textInput
\r
1050 * @extends CKEDITOR.dialog.definition.labeledElement
\r
1053 * // There is no constructor for this class, the user just has to define an
\r
1054 * // object with the appropriate properties.
\r
1057 * <b>type : 'text',</b>
\r
1059 * label : 'Your name',
\r
1061 * validate : function() {
\r
1062 * if ( !this.getValue() )
\r
1064 * api.openMsgDialog( '', 'Name cannot be empty.' );
\r
1072 * The default value.
\r
1073 * @name CKEDITOR.dialog.definition.textInput.prototype.default
\r
1080 * (Optional) The maximum length.
\r
1081 * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength
\r
1088 * (Optional) The size of the input field.
\r
1089 * @name CKEDITOR.dialog.definition.textInput.prototype.size
\r
1096 * (Optional) The validation function.
\r
1097 * @name CKEDITOR.dialog.definition.textInput.prototype.validate
\r
1103 // ----- textarea ------
\r
1106 * The definition of a text field (multiple lines).
\r
1107 * <div class="notapi">
\r
1108 * This class is not really part of the API. It just illustrates the properties
\r
1109 * that developers can use to define and create textarea.
\r
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}.
\r
1112 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
\r
1113 * @name CKEDITOR.dialog.definition.textarea
\r
1114 * @extends CKEDITOR.dialog.definition.labeledElement
\r
1117 * // There is no constructor for this class, the user just has to define an
\r
1118 * // object with the appropriate properties.
\r
1122 * <b>type : 'textarea',</b>
\r
1124 * label : 'Your comment',
\r
1126 * validate : function() {
\r
1127 * if ( this.getValue().length < 5 )
\r
1129 * api.openMsgDialog( 'The comment is too short.' );
\r
1137 * The number of rows.
\r
1138 * @name CKEDITOR.dialog.definition.textarea.prototype.rows
\r
1145 * The number of columns.
\r
1146 * @name CKEDITOR.dialog.definition.textarea.prototype.cols
\r
1153 * (Optional) The validation function.
\r
1154 * @name CKEDITOR.dialog.definition.textarea.prototype.validate
\r
1161 * The default value.
\r
1162 * @name CKEDITOR.dialog.definition.textarea.prototype.default
\r