How to Customize No-Border Table Style in JavaScript RichTextEditor?

This article provides guidance on how to customize the table style in JavaScript RichTextEditor to achieve a no-border effect using the quick toolbar. Although there is no built-in support for removing borders directly from the quick toolbar, you can implement this functionality using the toolbarClick event and template options in quickToolbarSettings

Integrating a Custom Button and Managing Toolbar Click Events

1. Initialize the RichTextEditor: Set up the RichTextEditor with the necessary toolbar settings and quick toolbar options.

2. Add Custom Button: Include a custom button in the quick toolbar for removing table borders.

3. Handle Toolbar Click Event: Implement the logic to remove the table borders when the custom button is clicked.

Here is a sample code snippet demonstrating how to achieve this:

var selection = new ej.richtexteditor.NodeSelection();
var range;
var saveSelection;

var defaultRTE = new ej.richtexteditor.RichTextEditor({
  undoRedoTimer: 200,
  toolbarSettings: {
    items: ['CreateTable', 'Undo', 'Redo'],
  },
  quickToolbarSettings: {
    table: [
      'TableHeader',
      'TableRows',
      'TableColumns',
      'TableCell',
      '-',
      'Styles',
      'TableRemove',
      'TableCellVerticalAlign',
      {
        tooltipText: 'Remove Border',
        template:
          '<button class="e-tbar-btn e-btn" id="withoutBorder"><span class="e-btn-icon e-icons e-font"></span>',
      },
    ],
  },
  toolbarClick: toolbarClick,
});

defaultRTE.appendTo('#defaultRTE');

function toolbarClick(e) {
  const nodeObj = new ej.richtexteditor.NodeSelection();
  const editorRange = nodeObj.getRange(defaultRTE.contentModule.getDocument());
  const imgEle = nodeObj.getNodeCollection(editorRange)[0];
  range = selection.getRange(document);
  saveSelection = selection.save(editorRange, document);

  if (e.item.tooltipText === 'Remove Border') {
    if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
      defaultRTE.formatter.saveData();
    }
    var tableElement = window.getSelection().anchorNode.parentElement;
    tableElement.closest('table').style.border = 'hidden';
    var length = tableElement
      .closest('table')
      .querySelectorAll('.e-rte-table td').length;
    for (let i = 0; i < length; i++) {
      tableElement.closest('table').querySelectorAll('.e-rte-table td')[
        i
      ].style.border = 'none';
    }
    saveSelection.restore();
    defaultRTE.formatter.saveData();
    defaultRTE.formatter.enableUndo(defaultRTE);
  }
}

Explanation

• Toolbar Settings: The toolbarSettings property defines the items available in the main toolbar, while quickToolbarSettings allows customization of the quick toolbar for tables.
• Custom Button: A button labeled “Remove Border” is added to the quick toolbar, which triggers the border removal functionality.
• Event Handling: The toolbarClick function checks if the “Remove Border” button was clicked and applies the necessary styles to remove borders from the selected table.

Conclusion

By following the steps outlined above, you can effectively customize the table style in RichTextEditor to remove borders using the quick toolbar. This approach enhances the editing experience by providing users with a straightforward method to modify table appearances.

I hope you enjoyed learning how to customize no-border table style in JavaScript RichTextEditor.
You can refer to our JavaScript Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Rich Text Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Additional References

• RichTextEditor Documentation
• Quick Toolbar Customization