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 %}