Mail merge in Angular Rich Text Editor component

18 Nov 20187 minutes to read

The Rich Text Editor can be customized to implement Mail Merge functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports.

This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation.

Adding custom toolbar items for inserting merge fields

To enable mail merge functionality, the Rich Text Editor toolbar is extended with two custom buttons: Insert Field and Merge Data. These buttons are added using the template property in toolbarSettings.items, which points to custom HTML elements (#insertField and #merge_data).

• Insert Field: Opens a dropdown list of merge fields for inserting placeholders like `` into the editor.
• Merge Data: Replaces all placeholders in the editor with actual values from a predefined data source.

@Component({
  imports: [
    RichTextEditorAllModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id="mailMergeEditor" #mailMergeEditor [toolbarSettings]="tools" ></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {

    public tools: object = {
            items: [
                'Bold', 'Italic', 'Underline', '|',
                'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|',
                'CreateLink', 'Image', 'CreateTable', '|',
                { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' },
                { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' },
                'SourceCode', '|', 'Undo', 'Redo'
            ],
    };
}

Using DropDownButton for selecting placeholders

The DropDownButton component displays a list of merge fields such as First Name, Last Name, and Company Name. When a user selects an item, the corresponding placeholder (e.g., ) is inserted at the current cursor position using the insertHTML command.

@Component({
  imports: [
    RichTextEditorAllModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<button class="e-rte-dropdown-btn e-control e-dropdown-btn e-lib e-btn e-rte-dropdown-popup e-rte-dropdown-items e-formats-tbar-btn e-rte-elements e-rte-dropdown-menu" id="insertField" ejs-dropdownbutton [items]="items" [content]="dropdownContent" (select)="onItemSelect($event)"></button>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {

    public dropdownContent : string = `<span style="display:inline-flex;"><span class="e-rte-dropdown-btn-text">Insert Field</span></span>`;
   
    onItemSelect(args: MenuEventArgs): void {
        if (args.item.text != null) {
            const value = this.textToValueMap[args.item.text];
            const trimmedValue = value.trim();
            this.mailMergeEditor.formatter.editorManager.nodeSelection.restore();
            this.mailMergeEditor.executeCommand(
                'insertHTML',
                `<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
                { undo: true }
            );
        }
    }
}

Populating merge fields using Mention

The Mention component provides an alternative way to insert placeholders by typing the {{ character inside the editor. A popup list of merge fields appears, allowing quick selection without using the toolbar.

@Component({
  imports: [
    RichTextEditorAllModule, MentionModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-mention #mentionObj [dataSource]="mergeData" target="#mailMergeEditor" [mentionChar]="mentionChar"
        [fields]='fieldsData' [suggestionCount]="8" [allowSpaces]="true" popupWidth='250px' popupHeight='200px'>
        <ng-template #displayTemplate let-data>
            <span> {{ "{{"+ data.value + "}}" }} </span>
        </ng-template>
    </ejs-mention>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {
    public fieldsData: { [key: string]: string } = { text: 'text' };
    public mentionChar: string = `{{`;
    public mergeData: any = [
        { text: 'First Name', value: 'FirstName' },
        { text: 'Last Name', value: 'LastName' },
        { text: 'Support Email', value: 'SupportEmail' },
        { text: 'Company Name', value: 'CompanyName' },
        { text: 'Promo Code', value: 'PromoCode' },
        { text: 'Support Phone Number', value: 'SupportPhoneNumber' },
        { text: 'Customer ID', value: 'CustomerID' },
        { text: 'Expiration Date', value: 'ExpirationDate' },
        { text: 'Subscription Plan', value: 'SubscriptionPlan' },
    ];

}

Replacing placeholders with actual data dynamically

When the Merge Data button is clicked, the editor content is processed to replace all placeholders with actual values from the placeholderData object. This is done using a regular expression in the replacePlaceholders() function.

app.component.ts

{% include code-snippet/rich-text-editor-sdk/angular/rich-text-editor/mail-merge/src/app.component.ts %}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));