988174: Rich Text Editor Missing topics Are Added

ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs

@@ -0,0 +1,9 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>This is paragraph one.</p><p>This is paragraph two.</p>"
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor

@@ -0,0 +1,30 @@
+
+<button class="e-btn" style="margin-bottom: 20px;" onclick="selectCell()">
+    Select Paragraph
+</button>
+
+@Html.EJS().RichTextEditor("cellSelectionRTE").Value(ViewBag.value).Render()
+
+<script>
+    function selectCell() {
+        const panel = document.getElementById("cellSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
+        const cells = panel.querySelectorAll('td');
+
+        if (cells.length > 2) {
+            const cell = cells[2]; // Third cell
+            const range = document.createRange();
+            range.selectNode(cell);
+
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+
+            cell.style.backgroundColor = '#cce5ff';
+            cell.classList.add('e-cell-select');
+        }
+
+    }
+</script>
+

ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper

@@ -0,0 +1,30 @@
+
+<button class="e-btn" style="margin-bottom: 20px;" onclick="selectCell()">
+    Select Cell
+</button>
+
+<ejs-richtexteditor id="cellSelectionRTE" value="@ViewBag.value">
+</ejs-richtexteditor>
+
+<script>
+    function selectCell() {
+        const panel = document.getElementById("cellSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
+        const cells = panel.querySelectorAll('td');
+
+        if (cells.length > 2) {
+            const cell = cells[2]; // Third cell
+            const range = document.createRange();
+            range.selectNode(cell);
+
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+
+            cell.style.backgroundColor = '#cce5ff';
+            cell.classList.add('e-cell-select');
+        }
+
+    }
+</script>

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

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

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

@@ -0,0 +1,158 @@
+
+@using Syncfusion.EJ2.DropDowns
+
+@{
+
+    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>
+    <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>
+    <p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
+    <p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
+    <p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
+    <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>
+    <p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
+    char mentionChar = '{';
+    var tools = new object[]
+    {
+        "Bold",
+        "Italic",
+        "Underline",
+        "|",
+        "Formats",
+        "Alignments",
+        "OrderedList",
+        "UnorderedList",
+        "|",
+        "CreateLink",
+        "Image",
+        "CreateTable",
+        "|",
+        new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" },
+        new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" },
+        "SourceCode",
+        "|",
+        "Undo",
+        "Redo",
+    };
+    var items = new List<object>
+    {
+        new { text = "First Name" },
+        new { text = "Last Name" },
+        new { text = "Support Email" },
+        new { text = "Company Name" },
+        new { text = "Promo Code" },
+        new { text = "Support Phone Number" },
+        new { text = "Customer ID" },
+        new { text = "Expiration Date" },
+        new { text = "Subscription Plan" }
+    };
+
+    var mergeData = new List<object>
+    {
+        new { text = "First Name", value = "FirstName" },
+        new { text = "Last Name", value = "LastName" },
+        new { text = "Support Email", value = "SupportEmail" },
+        new { text = "Company Name", value = "CompanyName" },
+        new { text = "Promo Code", value = "PromoCode" },
+        new { text = "Support Phone Number", value = "SupportPhoneNumber" },
+        new { text = "Customer ID", value = "CustomerID" },
+        new { text = "Expiration Date", value = "ExpirationDate" },
+        new { text = "Subscription Plan", value = "SubscriptionPlan" }
+    };
+}
+<div class="control-section">
+    <div class="control-wrapper">
+        @Html.EJS().RichTextEditor("mailMergeEditor").ActionBegin("actionBeginHandler").ActionComplete("actionCompleteHandler").SaveInterval(1).Created("created").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render()
+        @Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render()
+        @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()
+        @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()
+    </div>
+</div>
+
+
+
+<script>
+    var mailMergeEditor;
+    var mentionObj;
+    const textToValueMap = {
+        'First Name': 'FirstName',
+        'Last Name': 'LastName',
+        'Support Email': 'SupportEmail',
+        'Company Name': 'CompanyName',
+        'Promo Code': 'PromoCode',
+        'Support Phone Number': 'SupportPhoneNumber',
+        'Customer ID': 'CustomerID',
+        'Expiration Date': 'ExpirationDate',
+        'Subscription Plan': 'SubscriptionPlan'
+    };
+    var placeholderData = {
+        "FirstName": "John",
+        "LastName": "Doe",
+        "PromoCode": "ABC123",
+        "SubscriptionPlan": "Premium",
+        "CustomerID": "123456",
+        "ExpirationDate": "2024-12-31",
+        "SupportEmail": "support@example.com",
+        "SupportPhoneNumber": "+1-800-555-5555",
+        "CompanyName": "Example Inc."
+    };
+    function created() {
+        mailMergeEditor = this;
+    }
+    function onMentionCreate() {
+        mentionObj = this;
+    }
+    function actionBeginHandler(args) {
+        if (
+            args.requestType === 'EnterAction' &&
+            mentionObj.element.classList.contains('e-popup-open')
+        ) {
+            args.cancel = true;
+        }
+    }
+    function onDropDownClose() {
+        if (mailMergeEditor) {
+            mailMergeEditor.focusIn();
+        }
+    }
+    function onItemSelect(args) {
+        if (args.item.text != null) {
+            const value = textToValueMap[args.item.text];
+            const trimmedValue = value.trim();
+            mailMergeEditor.formatter.editorManager.nodeSelection.restore();
+            mailMergeEditor.executeCommand(
+                'insertHTML',
+                `<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
+                { undo: true }
+            );
+        }
+    }
+    function actionCompleteHandler(e) {
+        if (e.requestType === 'SourceCode') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.add('e-overlay');
+        } else if (e.requestType === 'Preview') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.remove('e-overlay');
+        }
+    }
+    function onClickHandler() {
+        if (mailMergeEditor) {
+            let editorContent = mailMergeEditor.value;
+            let mergedContent = replacePlaceholders(editorContent, placeholderData);
+            if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) {
+                mailMergeEditor.formatter.saveData();
+            }
+            mailMergeEditor.value = mergedContent;
+            mailMergeEditor.formatter.saveData();
+        } else {
+            console.log('MailMergeEditor is not initialized.');
+        }
+    }
+    function replacePlaceholders(template, data) {
+        return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
+            var value = data[key.trim()];
+            var result = value !== undefined ? value : match;
+            return result;
+        });
+    }
+</script>