Example of Mail Merge in React Rich Text Editor Component

All Controls
/
Rich-text-editor
/
MailMerge

This sample demonstrates how to implement a mail merge in the Rich Text Editor sample by inserting placeholders into the editor using custom toolbar item, which are then replaced with actual data to create personalized content.

More Details...

Loading....
Description

The mail merge in the Rich Text Editor sample enables users to insert placeholders for personalized content. These placeholders are replaced with actual data when generating the final content, making it easy to create customized letters, invoices, and more.

The following configurations are used in this sample:

  • The Button and DropDownButton control are configured in the custom toolbar of the Rich Text Editor.
  • The Button click action performs the merge of the editor placeholder content.
  • The DropDownButton control provides a list of available fields, such as "First Name" or "Email Address." A selected field from this dropdown is inserted into the editor as a placeholder.
  • The Button and DropDownButton control are configured in the custom toolbar of the Rich Text Editor.
  • The Button click action performs the merge of the editor placeholder content.
  • The DropDownButton control provides a list of available fields, such as "First Name" or "Email Address." A selected field from this dropdown is inserted into the editor as a placeholder.
  • The Mention control allows insertion of merge fields by pressing the mention character, such as {"{"}{"{"}, in the editor and selecting an item. These chips make it easy to see and select fields directly within the content.