bueditor.button.custom_table.yml in BUEditor 8.2

config/install/bueditor.button.custom_table.yml

File

config/install/bueditor.button.custom_table.yml

# Custom button that inserts table html.
id: custom_table
label: 'Table'
tooltip: 'Insert table'
cname: 'ficon-table'
code: |
  js:
  // Form fields
  var fields = [
    {type: 'number', value: 2, required: true, attributes: {min: 1}, name: 'rows', title: 'Rows'},
    {type: 'number', value: 2, required: true, attributes: {min: 1}, name: 'cols', title: 'Columns'}
  ];
  // Submit handler
  var submitHandler = function(htmlObj, Popup, E) {
    // Get number of cols and rows.
    var i, attr = htmlObj.attributes, cols = Math.max(attr.cols * 1, 1), rows = Math.max(attr.rows * 1, 1);
    // Prevent them to be printed as attribute values.
    attr.cols = attr.rows = null;
    // Create cells
    var cells = '';
    for (i = 0; i < cols; i++) {
      cells += '\n    ' + BUE.html('td', 'Data' + (i + 1));
    }
    // Create table body
    var body = '';
    for (i = 0; i < rows; i++) {
      body += '\n  ' + BUE.html('tr', cells + '\n  ', {'class': i % 2 ? 'even' : 'odd'});
    }
    body = BUE.html('tbody', body + '\n');
    // Create table head
    var head = BUE.html('thead', '\n  '+ BUE.html('tr', cells.replace(/td/g, 'th').replace(/Data/g, 'Header') + '\n  ') + '\n');
    // Create the table
    var table = BUE.html('table', '\n' + head + '\n' + body + '\n', attr);
    // Insert
    E.setSelection(table, 'end');
  };
  // Open tag dialog
  E.tagDialog('custom_table', fields, {title: 'Insert table', submit: submitHandler});
langcode: en