Index: /CKEditor/trunk/_dev/docs_build/template/static/default.css =================================================================== --- /CKEditor/trunk/_dev/docs_build/template/static/default.css (revision 6491) +++ /CKEditor/trunk/_dev/docs_build/template/static/default.css (revision 6492) @@ -38,7 +38,7 @@ margin-top: 14px; float: left; - width: 220px; + width: 240px; position: absolute; - left: 8px; + left: 2px; background-color: #F3F3F3; padding: 8px; @@ -47,5 +47,5 @@ #content { - margin-left: 250px; + margin-left: 260px; } @@ -159,2 +159,9 @@ font-size: 10px; } + +.notapi { + padding:10px; + margin:10px; + border:1px #000 solid; + background:#E0E0E0; +} Index: /CKEditor/trunk/_source/plugins/dialog/dialogDefinition.js =================================================================== --- /CKEditor/trunk/_source/plugins/dialog/dialogDefinition.js (revision 6491) +++ /CKEditor/trunk/_source/plugins/dialog/dialogDefinition.js (revision 6492) @@ -10,7 +10,10 @@ /** + * The definition of a dialog window. + *
* This class is not really part of the API. It just illustrates the properties * that developers can use to define and create dialogs. - * @name CKEDITOR.dialog.dialogDefinition + *
+ * @name CKEDITOR.dialog.definition * @constructor * @example @@ -47,5 +50,5 @@ /** * The dialog title, displayed in the dialog's header. Required. - * @name CKEDITOR.dialog.dialogDefinition.prototype.title + * @name CKEDITOR.dialog.definition.prototype.title * @field * @type String @@ -60,5 +63,5 @@ * CKEDITOR.DIALOG_RESIZE_HEIGHT
* CKEDITOR.DIALOG_RESIZE_BOTH
- * @name CKEDITOR.dialog.dialogDefinition.prototype.resizable + * @name CKEDITOR.dialog.definition.prototype.resizable * @field * @type Number @@ -69,5 +72,5 @@ /** * The minimum width of the dialog, in pixels. - * @name CKEDITOR.dialog.dialogDefinition.prototype.minWidth + * @name CKEDITOR.dialog.definition.prototype.minWidth * @field * @type Number @@ -78,5 +81,5 @@ /** * The minimum height of the dialog, in pixels. - * @name CKEDITOR.dialog.dialogDefinition.prototype.minHeight + * @name CKEDITOR.dialog.definition.prototype.minHeight * @field * @type Number @@ -87,6 +90,6 @@ /** * The buttons in the dialog, defined as an array of - * {@link CKEDITOR.dialog.buttonDefinition} objects. - * @name CKEDITOR.dialog.dialogDefinition.prototype.buttons + * {@link CKEDITOR.dialog.definition.button} objects. + * @name CKEDITOR.dialog.definition.prototype.buttons * @field * @type Array @@ -97,6 +100,6 @@ /** * The contents in the dialog, defined as an array of - * {@link CKEDITOR.dialog.contentDefinition} objects. Required. - * @name CKEDITOR.dialog.dialogDefinition.prototype.contents + * {@link CKEDITOR.dialog.definition.content} objects. Required. + * @name CKEDITOR.dialog.definition.prototype.contents * @field * @type Array @@ -106,5 +109,5 @@ /** * The function to execute when OK is pressed. - * @name CKEDITOR.dialog.dialogDefinition.prototype.onOk + * @name CKEDITOR.dialog.definition.prototype.onOk * @field * @type Function @@ -114,5 +117,5 @@ /** * The function to execute when Cancel is pressed. - * @name CKEDITOR.dialog.dialogDefinition.prototype.onCancel + * @name CKEDITOR.dialog.definition.prototype.onCancel * @field * @type Function @@ -122,14 +125,22 @@ /** * The function to execute when the dialog is displayed for the first time. - * @name CKEDITOR.dialog.dialogDefinition.prototype.onLoad - * @field - * @type Function - * @example - */ - -/** - * This class is not really part of the API. It just illustrates the properties - * that developers can use to define and create dialog content pages. - * @name CKEDITOR.dialog.contentDefinition + * @name CKEDITOR.dialog.definition.prototype.onLoad + * @field + * @type Function + * @example + */ + +/** + * The function to execute when the dialog is loaded (executed every time the dialog is opened). + * @name CKEDITOR.dialog.definition.prototype.onShow + * @field + * @type Function + * @example + */ + +/** + *
This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create dialog content pages.
+ * @name CKEDITOR.dialog.definition.content * @constructor * @example @@ -140,5 +151,5 @@ /** * The id of the content page. - * @name CKEDITOR.dialog.contentDefinition.prototype.id + * @name CKEDITOR.dialog.definition.content.prototype.id * @field * @type String @@ -148,5 +159,5 @@ /** * The tab label of the content page. - * @name CKEDITOR.dialog.contentDefinition.prototype.label + * @name CKEDITOR.dialog.definition.content.prototype.label * @field * @type String @@ -156,5 +167,5 @@ /** * The popup message of the tab label. - * @name CKEDITOR.dialog.contentDefinition.prototype.title + * @name CKEDITOR.dialog.definition.content.prototype.title * @field * @type String @@ -164,5 +175,5 @@ /** * The CTRL hotkey for switching to the tab. - * @name CKEDITOR.dialog.contentDefinition.prototype.accessKey + * @name CKEDITOR.dialog.definition.content.prototype.accessKey * @field * @type String @@ -173,6 +184,6 @@ /** * The UI elements contained in this content page, defined as an array of - * {@link CKEDITOR.dialog.uiElementDefinition} objects. - * @name CKEDITOR.dialog.contentDefinition.prototype.elements + * {@link CKEDITOR.dialog.definition.uiElement} objects. + * @name CKEDITOR.dialog.definition.content.prototype.elements * @field * @type Array @@ -181,135 +192,870 @@ /** - * This class is not really part of the API. It just illustrates the properties - * that developers can use to define and create dialog buttons. - * @name CKEDITOR.dialog.buttonDefinition - * @constructor - * @example - * // There is no constructor for this class, the user just has to define an - * // object with the appropriate properties. - */ - -/** - * The id of the dialog button. Required. - * @name CKEDITOR.dialog.buttonDefinition.prototype.id - * @type String - * @field - * @example - */ - -/** - * The label of the dialog button. Required. - * @name CKEDITOR.dialog.buttonDefinition.prototype.label - * @type String - * @field - * @example - */ - -/** - * The popup message of the dialog button. - * @name CKEDITOR.dialog.buttonDefinition.prototype.title - * @type String - * @field - * @example - */ - -/** - * The CTRL hotkey for the button. - * @name CKEDITOR.dialog.buttonDefinition.prototype.accessKey - * @type String - * @field - * @example - * exitButton.accessKey = 'X'; // Button will be pressed when user presses CTRL-X + * The definition of user interface element (textarea, radio etc). + *
This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create dialog UI elements.
+ * @name CKEDITOR.dialog.definition.uiElement + * @constructor + * @see CKEDITOR.ui.dialog.uiElement + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + */ + +/** + * The id of the UI element. + * @name CKEDITOR.dialog.definition.uiElement.prototype.id + * @field + * @type String + * @example + */ + +/** + * The type of the UI element. Required. + * @name CKEDITOR.dialog.definition.uiElement.prototype.type + * @field + * @type String + * @example + */ + +/** + * The popup label of the UI element. + * @name CKEDITOR.dialog.definition.uiElement.prototype.title + * @field + * @type String + * @example + */ + +/** + * CSS class names to append to the UI element. + * @name CKEDITOR.dialog.definition.uiElement.prototype.className + * @field + * @type String + * @example + */ + +/** + * Inline CSS classes to append to the UI element. + * @name CKEDITOR.dialog.definition.uiElement.prototype.style + * @field + * @type String + * @example + */ + +/** + * Function to execute the first time the UI element is displayed. + * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad + * @field + * @type Function + * @example + */ + +/** + * Function to execute whenever the UI element's parent dialog is displayed. + * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow + * @field + * @type Function + * @example + */ + +/** + * Function to execute whenever the UI element's parent dialog is closed. + * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide + * @field + * @type Function + * @example + */ + +// ----- hbox ----- + +/** + * Horizontal layout box for dialog UI elements, auto-expends to available width of container. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create horizontal layouts. + *

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}. + *
+ * @name CKEDITOR.dialog.definition.hbox + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'hbox', + * widths : [ '25%', '25%', '50%' ], + * children : + * [ + * { + * type : 'text', + * id : 'id1', + * width : '40px', + * }, + * { + * type : 'text', + * id : 'id2', + * width : '40px', + * }, + * { + * type : 'text', + * id : 'id3' + * } + * ] + * } + */ + +/** + * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container. + * @name CKEDITOR.dialog.definition.hbox.prototype.children + * @field + * @type Array + * @example + */ + +/** + * (Optional) The widths of child cells. + * @name CKEDITOR.dialog.definition.hbox.prototype.widths + * @field + * @type Array + * @example + */ + +/** + * (Optional) The height of the layout. + * @name CKEDITOR.dialog.definition.hbox.prototype.height + * @field + * @type Number + * @example + */ + +/** + * The CSS styles to apply to this element. + * @name CKEDITOR.dialog.definition.hbox.prototype.styles + * @field + * @type String + * @example + */ + +/** + * (Optional) The padding width inside child cells. Example: 0, 1. + * @name CKEDITOR.dialog.definition.hbox.prototype.padding + * @field + * @type Number + * @example + */ + +/** + * (Optional) The alignment of the whole layout. Example: center, top. + * @name CKEDITOR.dialog.definition.hbox.prototype.align + * @field + * @type String + * @example + */ + +// ----- vbox ----- + +/** + * Vertical layout box for dialog UI elements. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create vertical layouts. + *

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}. + *
+ * + * @name CKEDITOR.dialog.definition.vbox + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'vbox', + * align : 'right', + * width : '200px', + * children : + * [ + * { + * type : 'text', + * id : 'age', + * label : 'Age' + * }, + * { + * type : 'text', + * id : 'sex', + * label : 'Sex' + * }, + * { + * type : 'text', + * id : 'nationality', + * label : 'Nationality' + * } + * ] + * } + */ + +/** + * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container. + * @name CKEDITOR.dialog.definition.vbox.prototype.children + * @field + * @type Array + * @example + */ + +/** + * (Optional) The width of the layout. + * @name CKEDITOR.dialog.definition.vbox.prototype.width + * @field + * @type Array + * @example + */ + +/** + * (Optional) The heights of individual cells. + * @name CKEDITOR.dialog.definition.vbox.prototype.heights + * @field + * @type Number + * @example + */ + +/** + * The CSS styles to apply to this element. + * @name CKEDITOR.dialog.definition.vbox.prototype.styles + * @field + * @type String + * @example + */ + +/** + * (Optional) The padding width inside child cells. Example: 0, 1. + * @name CKEDITOR.dialog.definition.vbox.prototype.padding + * @field + * @type Number + * @example + */ + +/** + * (Optional) The alignment of the whole layout. Example: center, top. + * @name CKEDITOR.dialog.definition.vbox.prototype.align + * @field + * @type String + * @example + */ + +/** + * (Optional) Whether the layout should expand vertically to fill its container. + * @name CKEDITOR.dialog.definition.vbox.prototype.expand + * @field + * @type Boolean + * @example + */ + +// ----- button ------ + +/** + * The definition of a button. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create buttons. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.button + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'button', + * id : 'buttonId', + * label : 'Click me', + * title : 'My title', + * onClick : function() { + * // this = CKEDITOR.ui.dialog.button + * alert( 'Clicked: ' + this.id ); + * } + * } */ /** * Whether the button is disabled. - * @name CKEDITOR.dialog.buttonDefinition.prototype.disabled + * @name CKEDITOR.dialog.definition.button.prototype.disabled * @type Boolean * @field + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.button.prototype.label + * @type String + * @field + * @example + */ + +// ----- checkbox ------ + +/** + * The definition of a checkbox element. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create groups of checkbox buttons. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.checkbox + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'checkbox', + * id : 'agree', + * label : 'I agree', + * 'default' : 'checked', + * onClick : function() { + * // this = CKEDITOR.ui.dialog.checkbox + * alert( 'Checked: ' + this.getValue() ); + * } + * } + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.checkbox.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.checkbox.prototype.label + * @type String + * @field + * @example + */ + +/** + * The default state. + * @name CKEDITOR.dialog.definition.checkbox.prototype.default + * @type String + * @field + * @default + * '' (unchecked) + * @example + */ + +// ----- file ----- + +/** + * The definition of a file upload input. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create file upload elements. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.file + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'file', + * id : 'upload', + * label : 'Select file from your computer', + * size : 38 + * }, + * { + * type : 'fileButton', + * id : 'fileId', + * label : 'Upload file', + * 'for' : [ 'tab1', 'upload' ] + * filebrowser : { + * onSelect : function( fileUrl, data ) { + * alert( 'Successfully uploaded: ' + fileUrl ); + * } + * } + * } + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.file.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.file.prototype.label + * @type String + * @field + * @example + */ + +/** + * (Optional) The action attribute of the form element associated with this file upload input. + * If empty, CKFinder will use path to server connector for currently opened folder. + * @name CKEDITOR.dialog.definition.file.prototype.action + * @type String + * @field + * @example + */ + +/** + * The size of the UI element. + * @name CKEDITOR.dialog.definition.file.prototype.size + * @type Number + * @field + * @example + */ + +// ----- fileButton ----- + +/** + * The definition of a button for submitting the file in a file upload input. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create a button for submitting the file in a file upload input. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.fileButton + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'file', + * id : 'upload', + * label : 'Select file from your computer', + * size : 38 + * }, + * { + * type : 'fileButton', + * id : 'fileId', + * label : 'Upload file', + * 'for' : [ 'tab1', 'upload' ] + * filebrowser : { + * onSelect : function( fileUrl, data ) { + * alert( 'Successfully uploaded: ' + fileUrl ); + * } + * } + * } + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.fileButton.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.fileButton.prototype.label + * @type String + * @field + * @example + */ + +/** + * The instruction for CKFinder how to deal with file upload. + * By default, the file and fileButton elements will not work "as expected" if this attribute is not set. + * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser + * @type String|Object + * @field + * @example + * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded. + * filebrowser : 'tab1:txtUrl' + * + * // Call custom onSelect function when file is successfully uploaded. + * filebrowser : { + * onSelect : function( fileUrl, data ) { + * alert( 'Successfully uploaded: ' + fileUrl ); + * } + * } + */ + +/** + * An array that contains pageId and elementId of the file upload input element for which this button is created. + * @name CKEDITOR.dialog.definition.fileButton.prototype.for + * @type String + * @field + * @example + * [ pageId, elementId ] + */ + +// ----- html ----- + +/** + * The definition of a raw HTML element. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create elements made from raw HTML code. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * To access HTML elements use {@link CKEDITOR.dom.document#getById} + * @name CKEDITOR.dialog.definition.html + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example 1: + * { + * type : 'html', + * html : '<h3>This is some sample HTML content.</h3>' + * } + * @example + * // Example 2: + * // Complete sample with document.getById() call when the "Ok" button is clicked. + * var dialogDefinition = + * { + * title : 'Sample dialog', + * minWidth : 300, + * minHeight : 200, + * onOk : function() { + * // "this" is now a CKFinder.dialog object. + * var document = this.getElement().getDocument(); + * // document = CKFinder.dom.document + * var element = document.getById( 'myDiv' ); + * if ( element ) + * alert( element.getHtml() ); + * }, + * contents : [ + * { + * id : 'tab1', + * label : '', + * title : '', + * elements : + * [ + * { + * type : 'html', + * html : '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>' + * }, + * ] + * } + * ], + * buttons : [ CKFinder.dialog.cancelButton, CKFinder.dialog.okButton ] + * }; + */ + +/** + * (Required) HTML code of this element. + * @name CKEDITOR.dialog.definition.html.prototype.html + * @type String + * @field + * @example + */ + +// ----- radio ------ + +/** + * The definition of a radio group. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create groups of radio buttons. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.radio + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'radio', + * id : 'country', + * label : 'Which country is bigger', + * items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] , + * style : 'color:green', + * 'default' : 'DE', + * onClick : function() { + * // this = CKEDITOR.ui.dialog.radio + * alert( 'Current value: ' + this.getValue() ); + * } + * } + */ + +/** + * The default value. + * @name CKEDITOR.dialog.definition.radio.prototype.default + * @type String + * @field + * @example + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.radio.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * 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. + * @name CKEDITOR.dialog.definition.radio.prototype.items + * @field + * @type Array + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.radio.prototype.label + * @type String + * @field + * @example + */ + +// ----- selectElement ------ + +/** + * The definition of a select element. + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create select elements. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.select + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'select', + * id : 'sport', + * label : 'Select your favourite sport', + * items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ], + * 'default' : 'Football', + * onChange : function( api ) { + * // this = CKEDITOR.ui.dialog.select + * alert( 'Current value: ' + this.getValue() ); + * } + * } + */ + +/** + * The default value. + * @name CKEDITOR.dialog.definition.select.prototype.default + * @type String + * @field + * @example + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.select.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * 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. + * @name CKEDITOR.dialog.definition.select.prototype.items + * @field + * @type Array + * @example + */ + +/** + * (Optional) Set this to true if you'd like to have a multiple-choice select box. + * @name CKEDITOR.dialog.definition.select.prototype.multiple + * @type Boolean + * @field + * @example * @default false - * @example - */ - -/** - * The function to execute when the button is clicked. - * @name CKEDITOR.dialog.buttonDefinition.prototype.onClick - * @type Function - * @field - * @example - */ - -/** - * This class is not really part of the API. It just illustrates the properties - * that developers can use to define and create dialog UI elements. - * @name CKEDITOR.dialog.uiElementDefinition - * @constructor - * @see CKEDITOR.ui.dialog.uiElement - * @example - * // There is no constructor for this class, the user just has to define an - * // object with the appropriate properties. - */ - -/** - * The id of the UI element. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.id - * @field - * @type String - * @example - */ - -/** - * The type of the UI element. Required. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.type - * @field - * @type String - * @example - */ - -/** - * The popup label of the UI element. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.title - * @field - * @type String - * @example - */ - -/** - * CSS class names to append to the UI element. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.className - * @field - * @type String - * @example - */ - -/** - * Inline CSS classes to append to the UI element. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.style - * @field - * @type String - * @example - */ - -/** - * Function to execute the first time the UI element is displayed. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.onLoad - * @field - * @type Function - * @example - */ - -/** - * Function to execute whenever the UI element's parent dialog is displayed. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.onShow - * @field - * @type Function - * @example - */ - -/** - * Function to execute whenever the UI element's parent dialog is closed. - * @name CKEDITOR.dialog.uiElementDefinition.prototype.onHide - * @field - * @type Function - * @example - */ + */ + +/** + * (Optional) The number of items to display in the select box. + * @name CKEDITOR.dialog.definition.select.prototype.size + * @type Number + * @field + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.select.prototype.label + * @type String + * @field + * @example + */ + +// ----- textInput ----- + +/** + * The definition of a text field (single line). + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create text fields. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.textInput + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * { + * type : 'text', + * id : 'name', + * label : 'Your name', + * 'default' : '', + * validate : function() { + * if ( !this.getValue() ) + * { + * api.openMsgDialog( '', 'Name cannot be empty.' ); + * return false; + * } + * } + * } + */ + +/** + * The default value. + * @name CKEDITOR.dialog.definition.textInput.prototype.default + * @type String + * @field + * @example + */ + +/** + * (Optional) The maximum length. + * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength + * @type Number + * @field + * @example + */ + +/** + * (Optional) The size of the input field. + * @name CKEDITOR.dialog.definition.textInput.prototype.size + * @type Number + * @field + * @example + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.textInput.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.textInput.prototype.label + * @type String + * @field + * @example + */ + +// ----- textarea ------ + +/** + * The definition of a text field (multiple lines). + *
+ * This class is not really part of the API. It just illustrates the properties + * that developers can use to define and create textarea. + *

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}. + *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. + * @name CKEDITOR.dialog.definition.textarea + * @extends CKEDITOR.dialog.definition.uiElement + * @constructor + * @example + * // There is no constructor for this class, the user just has to define an + * // object with the appropriate properties. + * + * // Example: + * { + * type : 'textarea', + * id : 'message', + * label : 'Your comment', + * 'default' : '', + * validate : function() { + * if ( this.getValue().length < 5 ) + * { + * api.openMsgDialog( 'The comment is too short.' ); + * return false; + * } + * } + * } + */ + +/** + * The number of rows. + * @name CKEDITOR.dialog.definition.textarea.prototype.rows + * @type Number + * @field + * @example + */ + +/** + * The number of columns. + * @name CKEDITOR.dialog.definition.textarea.prototype.cols + * @type Number + * @field + * @example + */ + +/** + * (Optional) The validation function. + * @name CKEDITOR.dialog.definition.textarea.prototype.validate + * @field + * @type Function + * @example + */ + +/** + * The default value. + * @name CKEDITOR.dialog.definition.textarea.prototype.default + * @type String + * @field + * @example + */ + +/** + * The label of the UI element. + * @name CKEDITOR.dialog.definition.textarea.prototype.label + * @type String + * @field + * @example + */ + Index: /CKEditor/trunk/_source/plugins/dialog/plugin.js =================================================================== --- /CKEditor/trunk/_source/plugins/dialog/plugin.js (revision 6491) +++ /CKEditor/trunk/_source/plugins/dialog/plugin.js (revision 6492) @@ -1266,7 +1266,75 @@ * A function returning the dialog's definition, or the URL to the .js file holding the function. * The function should accept an argument "editor" which is the current editor instance, and - * return an object conforming to {@link CKEDITOR.dialog.dialogDefinition}. + * return an object conforming to {@link CKEDITOR.dialog.definition}. + * @see CKEDITOR.dialog.definition * @example - * @see CKEDITOR.dialog.dialogDefinition + * // Full sample plugin, which does not only register a dialog window but also adds an item to the context menu. + * // To open the dialog window, choose "Open dialog" in the context menu. + * CKEDITOR.plugins.add( 'myplugin', + * { + * init: function( editor ) + * { + * editor.addCommand( 'mydialog',new CKEDITOR.dialogCommand( 'mydialog' ) ); + * + * if ( editor.contextMenu ) + * { + * editor.addMenuGroup( 'mygroup', 10 ); + * editor.addMenuItem( 'My Dialog', + * { + * label : 'Open dialog', + * command : 'mydialog', + * group : 'mygroup' + * }); + * editor.contextMenu.addListener( function( element ) + * { + * return { 'My Dialog' : CKEDITOR.TRISTATE_OFF }; + * }); + * } + * + * CKEDITOR.dialog.add( 'mydialog', function( api ) + * { + * // CKEDITOR.dialog.definition + * var dialogDefinition = + * { + * title : 'Sample dialog', + * minWidth : 390, + * minHeight : 130, + * contents : [ + * { + * id : 'tab1', + * label : 'Label', + * title : 'Title', + * expand : true, + * padding : 0, + * elements : + * [ + * { + * type : 'html', + * html : '<p>This is some sample HTML content.</p>' + * }, + * { + * type : 'textarea', + * id : 'textareaId', + * rows : 4, + * cols : 40 + * } + * ] + * } + * ], + * buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ], + * onOk : function() { + * // "this" is now a CKEDITOR.dialog object. + * // Accessing dialog elements: + * var textareaObj = this.getContentElement( 'tab1', 'textareaId' ); + * alert( "You have entered: " + textareaObj.getValue() ); + * } + * }; + * + * return dialogDefinition; + * } ); + * } + * } ); + * + * CKEDITOR.replace( 'editor1', { extraPlugins : 'myplugin' } ); */ add : function( name, dialogDefinition ) @@ -1459,6 +1527,6 @@ * passed to "dialogDefinition" event handlers. * @constructor - * @name CKEDITOR.dialog.dialogDefinitionObject - * @extends CKEDITOR.dialog.dialogDefinition + * @name CKEDITOR.dialog.definitionObject + * @extends CKEDITOR.dialog.definition * @example * CKEDITOR.on( 'dialogDefinition', function( evt ) @@ -1483,10 +1551,10 @@ definitionObject.prototype = - /** @lends CKEDITOR.dialog.dialogDefinitionObject.prototype */ + /** @lends CKEDITOR.dialog.definitionObject.prototype */ { /** * Gets a content definition. * @param {String} id The id of the content definition. - * @returns {CKEDITOR.dialog.contentDefinition} The content definition + * @returns {CKEDITOR.dialog.definition.content} The content definition * matching id. */ @@ -1499,5 +1567,5 @@ * Gets a button definition. * @param {String} id The id of the button definition. - * @returns {CKEDITOR.dialog.buttonDefinition} The button definition + * @returns {CKEDITOR.dialog.definition.button} The button definition * matching id. */ @@ -1509,5 +1577,5 @@ /** * Adds a content definition object under this dialog definition. - * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The + * @param {CKEDITOR.dialog.definition.content} contentDefinition The * content definition. * @param {String} [nextSiblingId] The id of an existing content @@ -1515,5 +1583,5 @@ * before. Omit if the new content definition is to be inserted as * the last item. - * @returns {CKEDITOR.dialog.contentDefinition} The inserted content + * @returns {CKEDITOR.dialog.definition.content} The inserted content * definition. */ @@ -1525,5 +1593,5 @@ /** * Adds a button definition object under this dialog definition. - * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The + * @param {CKEDITOR.dialog.definition.button} buttonDefinition The * button definition. * @param {String} [nextSiblingId] The id of an existing button @@ -1531,5 +1599,5 @@ * before. Omit if the new button definition is to be inserted as * the last item. - * @returns {CKEDITOR.dialog.buttonDefinition} The inserted button + * @returns {CKEDITOR.dialog.definition.button} The inserted button * definition. */ @@ -1542,5 +1610,5 @@ * Removes a content definition from this dialog definition. * @param {String} id The id of the content definition to be removed. - * @returns {CKEDITOR.dialog.contentDefinition} The removed content + * @returns {CKEDITOR.dialog.definition.content} The removed content * definition. */ @@ -1553,5 +1621,5 @@ * Removes a button definition from the dialog definition. * @param {String} id The id of the button definition to be removed. - * @returns {CKEDITOR.dialog.buttonDefinition} The removed button + * @returns {CKEDITOR.dialog.definition.button} The removed button * definition. */ @@ -1565,7 +1633,7 @@ * This class is not really part of the API. It is the template of the * objects representing content pages inside the - * CKEDITOR.dialog.dialogDefinitionObject. + * CKEDITOR.dialog.definitionObject. * @constructor - * @name CKEDITOR.dialog.contentDefinitionObject + * @name CKEDITOR.dialog.definition.contentObject * @example * CKEDITOR.on( 'dialogDefinition', function( evt ) @@ -1588,10 +1656,10 @@ contentObject.prototype = - /** @lends CKEDITOR.dialog.contentDefinitionObject.prototype */ + /** @lends CKEDITOR.dialog.definition.contentObject.prototype */ { /** * Gets a UI element definition under the content definition. * @param {String} id The id of the UI element definition. - * @returns {CKEDITOR.dialog.uiElementDefinition} + * @returns {CKEDITOR.dialog.definition.uiElement} */ get : function( id ) @@ -1602,5 +1670,5 @@ /** * Adds a UI element definition to the content definition. - * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The + * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition The * UI elemnet definition to be added. * @param {String} nextSiblingId The id of an existing UI element @@ -1608,5 +1676,5 @@ * before. Omit if the new button definition is to be inserted as * the last item. - * @returns {CKEDITOR.dialog.uiElementDefinition} The element + * @returns {CKEDITOR.dialog.definition.uiElement} The element * definition inserted. */ @@ -1620,5 +1688,5 @@ * @param {String} id The id of the UI element definition to be * removed. - * @returns {CKEDITOR.dialog.uiElementDefinition} The element + * @returns {CKEDITOR.dialog.definition.uiElement} The element * definition removed. * @example @@ -2070,5 +2138,5 @@ * @constructor * @param {CKEDITOR.dialog} dialog Parent dialog object. - * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element + * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element * definition. Accepted fields: *