13 September 2024

Instead of stacking elements vertically in rows, we use an hbox layout, which arranges the child elements horizontally (in a single row). hbox is CKEditor's way of arranging elements in a horizontal box, essentially allowing you to create columns.

Source code viewer
  1. CKEDITOR.dialog.add('exampleDialog', function (editor) {
  2.     return {
  3.         title: 'Example Dialog',
  4.         minWidth: 400,
  5.         minHeight: 200,
  6.         contents: [
  7.             {
  8.                 id: 'tab-basic',
  9.                 label: 'Basic Settings',
  10.                 elements: [
  11.                     {
  12.                         type: 'hbox',  // Use hbox layout to create horizontal boxes (columns)
  13.                         widths: ['50%', '50%'], // Define column widths (50% for each column)
  14.                         children: [
  15.                             {
  16.                                 type: 'fieldset',
  17.                                 label: 'Column 1',
  18.                                 children: [
  19.                                     {
  20.                                         type: 'text',
  21.                                         id: 'field1',
  22.                                         label: 'Field 1'
  23.                                     },
  24.                                     {
  25.                                         type: 'text',
  26.                                         id: 'field2',
  27.                                         label: 'Field 2'
  28.                                     }
  29.                                 ]
  30.                             },
  31.                             {
  32.                                 type: 'fieldset',
  33.                                 label: 'Column 2',
  34.                                 children: [
  35.                                     {
  36.                                         type: 'text',
  37.                                         id: 'field3',
  38.                                         label: 'Field 3'
  39.                                     },
  40.                                     {
  41.                                         type: 'text',
  42.                                         id: 'field4',
  43.                                         label: 'Field 4'
  44.                                     }
  45.                                 ]
  46.                             }
  47.                         ]
  48.                     }
  49.                 ]
  50.             }
  51.         ],
  52.     };
  53. });
Programming Language: Javascript