Skip to content

Commit 7ec4281

Browse files
Kokila13081999Kokila13081999
committed
988174: Rich Text Editor Missing topics Are Added
1 parent 042b07a commit 7ec4281

File tree

5 files changed

+343
-0
lines changed

5 files changed

+343
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
public class HomeController : Controller
2+
{
3+
4+
public ActionResult Index()
5+
{
6+
return View();
7+
}
8+
}

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
2+
@using Syncfusion.EJ2.DropDowns
3+
4+
@{
5+
6+
string rteValue = @"<p>Dear <span contenteditable=""false"" class=""e-mention-chip""><span>{{FirstName}}</span></span> <span contenteditable=""false"" class=""e-mention-chip""><span>{{LastName}}</span></span>,</p>
7+
<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{PromoCode}}</span></span>.</p>
8+
<p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
9+
<p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
10+
<p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
11+
<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
12+
<p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
13+
char mentionChar = '{';
14+
var tools = new object[]
15+
{
16+
"Bold",
17+
"Italic",
18+
"Underline",
19+
"|",
20+
"Formats",
21+
"Alignments",
22+
"OrderedList",
23+
"UnorderedList",
24+
"|",
25+
"CreateLink",
26+
"Image",
27+
"CreateTable",
28+
"|",
29+
new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" },
30+
new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" },
31+
"SourceCode",
32+
"|",
33+
"Undo",
34+
"Redo",
35+
};
36+
var items = new List<object>
37+
{
38+
new { text = "First Name" },
39+
new { text = "Last Name" },
40+
new { text = "Support Email" },
41+
new { text = "Company Name" },
42+
new { text = "Promo Code" },
43+
new { text = "Support Phone Number" },
44+
new { text = "Customer ID" },
45+
new { text = "Expiration Date" },
46+
new { text = "Subscription Plan" }
47+
};
48+
49+
var mergeData = new List<object>
50+
{
51+
new { text = "First Name", value = "FirstName" },
52+
new { text = "Last Name", value = "LastName" },
53+
new { text = "Support Email", value = "SupportEmail" },
54+
new { text = "Company Name", value = "CompanyName" },
55+
new { text = "Promo Code", value = "PromoCode" },
56+
new { text = "Support Phone Number", value = "SupportPhoneNumber" },
57+
new { text = "Customer ID", value = "CustomerID" },
58+
new { text = "Expiration Date", value = "ExpirationDate" },
59+
new { text = "Subscription Plan", value = "SubscriptionPlan" }
60+
};
61+
}
62+
<div class="control-section">
63+
<div class="control-wrapper">
64+
@Html.EJS().RichTextEditor("mailMergeEditor").ActionBegin("actionBeginHandler").ActionComplete("actionCompleteHandler").SaveInterval(1).Created("created").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render()
65+
@Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render()
66+
@Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Close("onDropDownClose").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render()
67+
@Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate("<span> {{${Value}}} </span>").PopupWidth("250px").PopupHeight("200px").Render()
68+
</div>
69+
</div>
70+
71+
72+
73+
<script>
74+
var mailMergeEditor;
75+
var mentionObj;
76+
const textToValueMap = {
77+
'First Name': 'FirstName',
78+
'Last Name': 'LastName',
79+
'Support Email': 'SupportEmail',
80+
'Company Name': 'CompanyName',
81+
'Promo Code': 'PromoCode',
82+
'Support Phone Number': 'SupportPhoneNumber',
83+
'Customer ID': 'CustomerID',
84+
'Expiration Date': 'ExpirationDate',
85+
'Subscription Plan': 'SubscriptionPlan'
86+
};
87+
var placeholderData = {
88+
"FirstName": "John",
89+
"LastName": "Doe",
90+
"PromoCode": "ABC123",
91+
"SubscriptionPlan": "Premium",
92+
"CustomerID": "123456",
93+
"ExpirationDate": "2024-12-31",
94+
"SupportEmail": "support@example.com",
95+
"SupportPhoneNumber": "+1-800-555-5555",
96+
"CompanyName": "Example Inc."
97+
};
98+
function created() {
99+
mailMergeEditor = this;
100+
}
101+
function onMentionCreate() {
102+
mentionObj = this;
103+
}
104+
function actionBeginHandler(args) {
105+
if (
106+
args.requestType === 'EnterAction' &&
107+
mentionObj.element.classList.contains('e-popup-open')
108+
) {
109+
args.cancel = true;
110+
}
111+
}
112+
function onDropDownClose() {
113+
if (mailMergeEditor) {
114+
mailMergeEditor.focusIn();
115+
}
116+
}
117+
function onItemSelect(args) {
118+
if (args.item.text != null) {
119+
const value = textToValueMap[args.item.text];
120+
const trimmedValue = value.trim();
121+
mailMergeEditor.formatter.editorManager.nodeSelection.restore();
122+
mailMergeEditor.executeCommand(
123+
'insertHTML',
124+
`<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
125+
{ undo: true }
126+
);
127+
}
128+
}
129+
function actionCompleteHandler(e) {
130+
if (e.requestType === 'SourceCode') {
131+
mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
132+
mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.add('e-overlay');
133+
} else if (e.requestType === 'Preview') {
134+
mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
135+
mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.remove('e-overlay');
136+
}
137+
}
138+
function onClickHandler() {
139+
if (mailMergeEditor) {
140+
let editorContent = mailMergeEditor.value;
141+
let mergedContent = replacePlaceholders(editorContent, placeholderData);
142+
if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) {
143+
mailMergeEditor.formatter.saveData();
144+
}
145+
mailMergeEditor.value = mergedContent;
146+
mailMergeEditor.formatter.saveData();
147+
} else {
148+
console.log('MailMergeEditor is not initialized.');
149+
}
150+
}
151+
function replacePlaceholders(template, data) {
152+
return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
153+
var value = data[key.trim()];
154+
var result = value !== undefined ? value : match;
155+
return result;
156+
});
157+
}
158+
</script>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
@{
2+
string rteValue = @"<p>Dear <span contenteditable=""false"" class=""e-mention-chip""><span>{{FirstName}}</span></span> <span contenteditable=""false"" class=""e-mention-chip""><span>{{LastName}}</span></span>,</p>
3+
<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{PromoCode}}</span></span>.</p>
4+
<p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
5+
<p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
6+
<p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
7+
<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
8+
<p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
9+
char mentionChar = '{';
10+
var tools = new object[]
11+
{
12+
"Bold",
13+
"Italic",
14+
"Underline",
15+
"|",
16+
"Formats",
17+
"Alignments",
18+
"OrderedList",
19+
"UnorderedList",
20+
"|",
21+
"CreateLink",
22+
"Image",
23+
"CreateTable",
24+
"|",
25+
new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" },
26+
new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" },
27+
"SourceCode",
28+
"|",
29+
"Undo",
30+
"Redo",
31+
};
32+
var items = new List<object>
33+
{
34+
new { text = "First Name" },
35+
new { text = "Last Name" },
36+
new { text = "Support Email" },
37+
new { text = "Company Name" },
38+
new { text = "Promo Code" },
39+
new { text = "Support Phone Number" },
40+
new { text = "Customer ID" },
41+
new { text = "Expiration Date" },
42+
new { text = "Subscription Plan" }
43+
};
44+
45+
var mergeData = new List<object>
46+
{
47+
new { text = "First Name", value = "FirstName" },
48+
new { text = "Last Name", value = "LastName" },
49+
new { text = "Support Email", value = "SupportEmail" },
50+
new { text = "Company Name", value = "CompanyName" },
51+
new { text = "Promo Code", value = "PromoCode" },
52+
new { text = "Support Phone Number", value = "SupportPhoneNumber" },
53+
new { text = "Customer ID", value = "CustomerID" },
54+
new { text = "Expiration Date", value = "ExpirationDate" },
55+
new { text = "Subscription Plan", value = "SubscriptionPlan" }
56+
};
57+
}
58+
59+
60+
61+
<div class="control-section">
62+
<div class="sample-container">
63+
<div class="default-section">
64+
<ejs-richtexteditor id="mailMergeEditor" value="@rteValue" actionBegin="actionBeginHandler" actionComplete="actionCompleteHandler" created="created" saveInterval="1">
65+
<e-richtexteditor-toolbarsettings items="@tools"></e-richtexteditor-toolbarsettings>
66+
</ejs-richtexteditor>
67+
<ejs-button id="merge_data" content="Merge Data" onclick="onClickHandler()" cssClass="e-tbar-btn e-btn" tabindex="-1" style="width: 100%"></ejs-button>
68+
<ejs-dropdownbutton id="insert_Field" select="onItemSelect" close="onDropDownClose" content="Insert Field" items="items" cssClass="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu"></ejs-dropdownbutton>
69+
<ejs-mention id="mentionField" target="#mailMergeEditor_rte-edit-view" mentionChar="@mentionChar" created="onMentionCreate" dataSource="@mergeData" popupHeight="200px" popupWidth="250px" allowSpaces="true" displayTemplate="<span> {{${value}}} </span>">
70+
<e-mention-fields text="text"></e-mention-fields>
71+
</ejs-mention>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<script>
77+
var mailMergeEditor;
78+
var mentionObj;
79+
80+
const textToValueMap = {
81+
'First Name': 'FirstName',
82+
'Last Name': 'LastName',
83+
'Support Email': 'SupportEmail',
84+
'Company Name': 'CompanyName',
85+
'Promo Code': 'PromoCode',
86+
'Support Phone Number': 'SupportPhoneNumber',
87+
'Customer ID': 'CustomerID',
88+
'Expiration Date': 'ExpirationDate',
89+
'Subscription Plan': 'SubscriptionPlan'
90+
};
91+
92+
var placeholderData = {
93+
"FirstName": "John",
94+
"LastName": "Doe",
95+
"PromoCode": "ABC123",
96+
"SubscriptionPlan": "Premium",
97+
"CustomerID": "123456",
98+
"ExpirationDate": "2024-12-31",
99+
"SupportEmail": "support@example.com",
100+
"SupportPhoneNumber": "+1-800-555-5555",
101+
"CompanyName": "Example Inc."
102+
};
103+
104+
function created() {
105+
mailMergeEditor = this;
106+
}
107+
108+
function onMentionCreate() {
109+
mentionObj = this;
110+
}
111+
112+
function actionBeginHandler(args) {
113+
if (
114+
args.requestType === 'EnterAction' &&
115+
mentionObj.element.classList.contains('e-popup-open')
116+
) {
117+
args.cancel = true;
118+
}
119+
}
120+
121+
function actionCompleteHandler(e) {
122+
if (e.requestType === 'SourceCode') {
123+
mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
124+
mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.add('e-overlay');
125+
} else if (e.requestType === 'Preview') {
126+
mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
127+
mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.remove('e-overlay');
128+
}
129+
}
130+
131+
function onDropDownClose() {
132+
if (mailMergeEditor) {
133+
mailMergeEditor.focusIn();
134+
}
135+
}
136+
137+
function onItemSelect(args) {
138+
if (args.item.text != null) {
139+
const value = textToValueMap[args.item.text];
140+
const trimmedValue = value.trim();
141+
mailMergeEditor.formatter.editorManager.nodeSelection.restore();
142+
mailMergeEditor.executeCommand(
143+
'insertHTML',
144+
`<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
145+
{ undo: true }
146+
);
147+
}
148+
}
149+
150+
function onClickHandler() {
151+
if (mailMergeEditor) {
152+
let editorContent = mailMergeEditor.value;
153+
let mergedContent = replacePlaceholders(editorContent, placeholderData);
154+
if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) {
155+
mailMergeEditor.formatter.saveData();
156+
}
157+
mailMergeEditor.value = mergedContent;
158+
mailMergeEditor.formatter.saveData();
159+
} else {
160+
console.log('MailMergeEditor is not initialized.');
161+
}
162+
}
163+
164+
function replacePlaceholders(template, data) {
165+
return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
166+
var value = data[key.trim()];
167+
var result = value !== undefined ? value : match;
168+
return result;
169+
});
170+
}
171+
</script>

‎ej2-asp-core-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2192,6 +2192,7 @@
21922192
<li><a href="/ej2-asp-core/rich-text-editor/tools/custom-tools">Custom Tools</a></li>
21932193
<li><a href="/ej2-asp-core/rich-text-editor/tools/text-formatting">Text formatting and structural</a></li>
21942194
<li><a href="/ej2-asp-core/rich-text-editor/tools/styling-tools">Styling Tools</a></li>
2195+
<li><a href="/ej2-asp-core/rich-text-editor/tools/fullscreen-tool">Expanding Editor to Fullscreen View</a></li>
21952196
</ul>
21962197
</li>
21972198
<li>Editor Types
@@ -2215,6 +2216,7 @@
22152216
<li><a href="/ej2-asp-core/rich-text-editor/smart-editing/mentions">Mention Integration</a></li>
22162217
<li><a href="/ej2-asp-core/rich-text-editor/smart-editing/slash-menu">Slash Commands</a></li>
22172218
<li><a href="/ej2-asp-core/rich-text-editor/smart-editing/emoji-picker">Emoji Picker</a></li>
2219+
<li><a href="/ej2-asp-core/rich-text-editor/smart-editing/mail-merge">Mail Merge Integration</a></li>
22182220
</ul>
22192221
</li>
22202222
<li>Validation and Security
@@ -2225,6 +2227,7 @@
22252227
</ul>
22262228
</li>
22272229
<li><a href="/ej2-asp-core/rich-text-editor/link">Link Manipulation</a></li>
2230+
<li><a href="/ej2-asp-core/rich-text-editor/selection">Selection</a></li>
22282231
<li><a href="/ej2-asp-core/rich-text-editor/disable-editor">Disabling the Rich Text Editor</a></li>
22292232
<li><a href="/ej2-asp-core/rich-text-editor/character-count">Character Count</a></li>
22302233
<li><a href="/ej2-asp-core/rich-text-editor/code-view-support">Code View Support</a></li>

‎ej2-asp-mvc-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2136,6 +2136,7 @@
21362136
<li><a href="/ej2-asp-mvc/rich-text-editor/tools/custom-tools">Custom Tools</a></li>
21372137
<li><a href="/ej2-asp-mvc/rich-text-editor/tools/text-formatting">Text formatting and structural</a></li>
21382138
<li><a href="/ej2-asp-mvc/rich-text-editor/tools/styling-tools">Styling Tools</a></li>
2139+
<li><a href="/ej2-asp-mvc/rich-text-editor/tools/fullscreen-tool">Expanding Editor to Fullscreen View</a></li>
21392140
</ul>
21402141
</li>
21412142
<li>Editor Types
@@ -2159,6 +2160,7 @@
21592160
<li><a href="/ej2-asp-mvc/rich-text-editor/smart-editing/mentions">Mention Integration</a></li>
21602161
<li><a href="/ej2-asp-mvc/rich-text-editor/smart-editing/slash-menu">Slash Commands</a></li>
21612162
<li><a href="/ej2-asp-mvc/rich-text-editor/smart-editing/emoji-picker">Emoji Picker</a></li>
2163+
<li><a href="/ej2-asp-mvc/rich-text-editor/smart-editing/mail-merge">Mail Merge Integration</a></li>
21622164
</ul>
21632165
</li>
21642166
<li>Validation and Security
@@ -2169,6 +2171,7 @@
21692171
</ul>
21702172
</li>
21712173
<li><a href="/ej2-asp-mvc/rich-text-editor/style-encapsulation">Style Encapsulation</a></li>
2174+
<li><a href="/ej2-asp-mvc/rich-text-editor/selection">Selection</a></li>
21722175
<li><a href="/ej2-asp-mvc/rich-text-editor/disable-editor">Disabling the Rich Text Editor</a></li>
21732176
<li><a href="/ej2-asp-mvc/rich-text-editor/character-count">Character Count</a></li>
21742177
<li><a href="/ej2-asp-mvc/rich-text-editor/code-view-support">Code View Support</a></li>

0 commit comments

Comments
 (0)