diff --git a/ej2-javascript/rich-text-editor/smart-editing/mail-merge.md b/ej2-javascript/rich-text-editor/smart-editing/mail-merge.md
index 184e8e37b..cdcd509be 100644
--- a/ej2-javascript/rich-text-editor/smart-editing/mail-merge.md
+++ b/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: {{,
+ mentionChar: `{{`,
fields: { text: 'text' },
allowSpaces: true,
popupWidth: '250px',
@@ -164,6 +182,8 @@ const mentionObj: Mention = new Mention({
});
mentionObj.appendTo('#mentionField');
+{% endraw %}
+
{% endhighlight %}
{% endtabs %}
@@ -172,6 +192,8 @@ mentionObj.appendTo('#mentionField');
{% tabs %}
{% highlight js tabtitle="index.js" %}
+{% raw %}
+
var mergeObj = new ej.dropdowns.Mention({
dataSource: mergeData,
fields: { text: 'Name', value: 'Field' },
@@ -179,11 +201,13 @@ var mergeObj = new ej.dropdowns.Mention({
popupWidth: '250px',
popupHeight: '200px',
target: mailMergeEditor.inputElement,
- mentionChar: {{ ,
+ 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 %}