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