How to Add Line Spacing to EJ2 JavaScript RichTextEditor?

To enhance the formatting capabilities of the JavaScript RichTextEditor, you may want to include a line spacing option within the toolbar. This can be achieved by utilizing the custom toolbar feature of the RichTextEditor. Below is a step-by-step guide on how to add a line spacing tool to the RichTextEditor’s toolbar.

Step 1: Initialize the RichTextEditor

First, create a new instance of the RichTextEditor and define the toolbar settings with a custom button for line height.

let defaultRTE = new RichTextEditor({
  toolbarSettings: {
    items: [
      // Custom button for line height
      {
        tooltipText: 'Line Height',
        template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="lineheight_tbar" style="width:100%"></button>',
      },
      // Other toolbar items
      'Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', 'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', 'Outdent', 'Indent', '|', 'CreateTable', 'CreateLink', 'Image', '|', 'ClearFormat', 'Print', 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo',
    ],
  },
  created: created,
});
defaultRTE.appendTo('#defaultRTE');

Step 2: Define the Created Event

Within the created event, instantiate a SplitButton with predefined line height options and append it to the toolbar.

var editorManager;
function created() {
  editorManager = defaultRTE.formatter.editorManager;
  let splitButton = new SplitButton({
    items: [
      { text: '1' },
      { text: '1.5' },
      { text: '2' },
      { text: '2.5' },
      { text: '3' },
    ],
    iconCss: 'e-icons e-btn-icons e-line-height',
    select: onSelect.bind(this),
  });
  splitButton.appendTo('#lineheight_tbar');
}

Step 3: Implement the onSelect Function

The onSelect function applies the selected line height to the text within the editor.

function onSelect(args) {
  if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
    defaultRTE.formatter.saveData();
  }
  let nodes = editorManager.domNode.blockNodes();
  for (let i = 0; nodes.length > i; i++) {
    (nodes[i] as HTMLElement).style.lineHeight = args.item.text;
  }
  defaultRTE.formatter.saveData();
  defaultRTE.formatter.enableUndo(defaultRTE);
}

By following these steps, you can successfully add a line spacing tool to the EJ2 RichTextEditor’s toolbar, allowing users to adjust the line height of their text content.

Additional References

• EJ2 RichTextEditor Documentation: https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started/
• EJ2 SplitButton Documentation: https://ej2.syncfusion.com/documentation/split-button/getting-started/

Conclusion

I hope you enjoyed learning about how to add line spacing to EJ2 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!