Integrated latest changes at 12-11-2025 10:30:26 AM

Author: SyncfusionBuild

ej2-javascript/rich-text-editor/smart-editing/mail-merge.md

@@ -27,6 +27,8 @@ To enable mail merge functionality, the Rich Text Editor toolbar is extended wit
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 const mailMergeEditor: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
       items: [
@@ -40,6 +42,8 @@ const mailMergeEditor: RichTextEditor = new RichTextEditor({
 });
 mailMergeEditor.appendTo('#mailMergeEditor');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -48,6 +52,8 @@ mailMergeEditor.appendTo('#mailMergeEditor');
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mailMergeEditor = new ej.richtexteditor.RichTextEditor({
   toolbarSettings: {
       items: [
@@ -61,6 +67,8 @@ var mailMergeEditor = new ej.richtexteditor.RichTextEditor({
 });
 mailMergeEditor.appendTo('#mailMergeEditor');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -74,6 +82,8 @@ The **DropDownButton** component displays a list of merge fields such as First N
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 let insertField: DropDownButton = new DropDownButton({
    items: [
       { text: 'First Name' },
@@ -100,6 +110,8 @@ function onItemSelect(args: MenuEventArgs): void {
    );
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -108,6 +120,8 @@ function onItemSelect(args: MenuEventArgs): void {
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var insertField = new ej.splitbuttons.DropDownButton({
   items: [
     { text: 'First Name' },
@@ -139,6 +153,8 @@ function onItemSelect(args) {
   }
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -152,10 +168,12 @@ The **Mention** control provides an alternative way to insert placeholders by ty
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 const mentionObj: Mention = new Mention({
    dataSource: mergeData,
    target: '#mailMergeEditor',
-   mentionChar: <code>&#123;&#123;</code>,
+   mentionChar: `{{`,
    fields: { text: 'text' },
    allowSpaces: true,
    popupWidth: '250px',
@@ -164,6 +182,8 @@ const mentionObj: Mention = new Mention({
 });
 mentionObj.appendTo('#mentionField');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -172,18 +192,22 @@ mentionObj.appendTo('#mentionField');
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mergeObj = new ej.dropdowns.Mention({
   dataSource: mergeData,
   fields: { text: 'Name', value: 'Field' },
   displayTemplate: '<span>{{${Field}}}</span>',
   popupWidth: '250px',
   popupHeight: '200px',
   target: mailMergeEditor.inputElement,
-  mentionChar: <code>&#123;&#123;</code> ,
+  mentionChar: `{{` ,
   allowSpaces: true,
 });
 mergeObj.appendTo('#mentionField');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -195,7 +219,9 @@ When the **Merge Data** button is clicked, the editor content is processed to re
 {% if page.publishingplatform == "typescript" %}
 
 {% tabs %}
-{% highlight %}
+{% highlight ts tabtitle="app.ts" %}
+
+{% raw %}
 
 document.getElementById('merge_data')?.addEventListener('click', onClickHandler);
 
@@ -209,6 +235,8 @@ function replacePlaceholders(template: string, data: { [key: string]: string }):
    return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => data[key.trim()] || match);
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -217,6 +245,8 @@ function replacePlaceholders(template: string, data: { [key: string]: string }):
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mergeField = document.getElementById('merge_data');
 if (mergeField) {
   mergeField.addEventListener('click', onClickHandler);
@@ -242,6 +272,8 @@ function replacePlaceholders(template, data) {
   });
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}