dialogDefinition.js 26 KB

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