From 9055823bd032369c3b0644bd586a1a8d0c3ee627 Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Thu, 30 Oct 2025 17:27:49 +0530 Subject: [PATCH 1/8] 988174: Rich Text Editor Missing topics Are Added --- .../rich-text-editor/mail-merge/controller.cs | 8 + .../rich-text-editor/mail-merge/razor | 158 ++++++++++++++++ .../rich-text-editor/mail-merge/tagHelper | 171 ++++++++++++++++++ .../mention-min-length/EmployeeData.cs | 28 +++ .../rich-text-editor/mention-min-length/razor | 10 + .../mention-min-length/tagHelper | 12 ++ .../mention-suggestion-count/EmployeeData.cs | 38 ++++ .../mention-suggestion-count/razor | 69 +++++++ .../mention-suggestion-count/tagHelper | 12 ++ .../nested-quotation-formatting/controller.cs | 16 ++ .../nested-quotation-formatting/razor | 1 + .../nested-quotation-formatting/tagHelper | 1 + .../nesting-table/controller.cs | 38 ++++ .../rich-text-editor/nesting-table/razor | 1 + .../rich-text-editor/nesting-table/tagHelper | 3 + .../rich-text-editor/selection/controller.cs | 8 + .../rich-text-editor/selection/razor | 45 +++++ .../rich-text-editor/selection/tagHelper | 51 ++++++ .../rich-text-editor/slashmenu/controller.cs | 16 +- .../rich-text-editor/slashmenu/razor | 6 + .../rich-text-editor/slashmenu/tagHelper | 6 + .../rich-text-editor/EJ2_ASP.MVC/selection.md | 40 ++++ .../EJ2_ASP.MVC/smart-editing/mail-merge.md | 38 ++++ .../EJ2_ASP.MVC/smart-editing/mentions.md | 69 ++++++- .../rich-text-editor/EJ2_ASP.MVC/style.md | 49 ++++- .../rich-text-editor/EJ2_ASP.MVC/table.md | 33 ++++ .../EJ2_ASP.MVC/tools/fullscreen-tool.md | 46 +++++ .../EJ2_ASP.MVC/tools/text-formatting.md | 41 +++++ .../EJ2_ASP.NETCORE/selection.md | 40 ++++ .../smart-editing/mail-merge.md | 38 ++++ .../EJ2_ASP.NETCORE/smart-editing/mentions.md | 69 ++++++- .../rich-text-editor/EJ2_ASP.NETCORE/style.md | 12 +- .../rich-text-editor/EJ2_ASP.NETCORE/table.md | 33 ++++ .../EJ2_ASP.NETCORE/tools/fullscreen-tool.md | 46 +++++ .../EJ2_ASP.NETCORE/tools/text-formatting.md | 41 +++++ .../rich-text-editor/images/list-editing.gif | Bin 0 -> 4533811 bytes ej2-asp-core-toc.html | 3 + 37 files changed, 1282 insertions(+), 14 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md create mode 100644 ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs new file mode 100644 index 0000000000..969244f6f9 --- /dev/null +++ b/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(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor new file mode 100644 index 0000000000..f941acb0be --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor @@ -0,0 +1,158 @@ + +@using Syncfusion.EJ2.DropDowns + +@{ + + string rteValue = @"

Dear {{FirstName}} {{LastName}},

+

We are thrilled to have you with us! Your unique promotional code for this month is: {{PromoCode}}.

+

Your current subscription plan is: {{SubscriptionPlan}}.

+

Your customer ID is: {{CustomerID}}.

+

Your promotional code expires on: {{ExpirationDate}}.

+

Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at {{SupportEmail}} or call us at {{SupportPhoneNumber}}.

+

Best regards,
The {{CompanyName}} Team

"; + 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 + { + 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 + { + 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" } + }; +} +
+
+ @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(" {{${Value}}} ").PopupWidth("250px").PopupHeight("200px").Render() +
+
+ + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper new file mode 100644 index 0000000000..55a5431e75 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper @@ -0,0 +1,171 @@ +@{ + string rteValue = @"

Dear {{FirstName}} {{LastName}},

+

We are thrilled to have you with us! Your unique promotional code for this month is: {{PromoCode}}.

+

Your current subscription plan is: {{SubscriptionPlan}}.

+

Your customer ID is: {{CustomerID}}.

+

Your promotional code expires on: {{ExpirationDate}}.

+

Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at {{SupportEmail}} or call us at {{SupportPhoneNumber}}.

+

Best regards,
The {{CompanyName}} Team

"; + 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 + { + 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 + { + 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" } + }; +} + + + +
+
+
+ + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs new file mode 100644 index 0000000000..c96c18f023 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs @@ -0,0 +1,28 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace WebApplication1.Models +{ + public class EmployeeData + { + public string Name { get; set; } + public string EmailId { get; set; } + + public List EmployeeList() + { + List mention = new List() + { + new EmployeeData { Name = "Selma Rose" EmailId = "selma@gmail.com" }, + new EmployeeData { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new EmployeeData { Name = "Camden Kate", EmailId = "camden@gmail.com" }, + new EmployeeData { Name = "Mary Kate", EmailId = "mary@gmail.com" }, + new EmployeeData { Name = "Ursula Ann", EmailId = "ursula@gmail.com" }, + new EmployeeData { Name = "Margaret", EmailId = "margaret@gmail.com" }, + }; + return mention; + } + + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor new file mode 100644 index 0000000000..42915f1ff8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor @@ -0,0 +1,10 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria​

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + +@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render() + +@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable)data).MinLength(3).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper new file mode 100644 index 0000000000..fa5be5259d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper @@ -0,0 +1,12 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria​

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs new file mode 100644 index 0000000000..2e51584906 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs @@ -0,0 +1,38 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace WebApplication1.Models +{ + public class EmployeeData + { + public string Name { get; set; } + public string EmailId { get; set; } + + public List EmployeeList() + { + List mention = new List() + { + new EmployeeData { Name = "Selma Rose" EmailId = "selma@gmail.com" }, + new EmployeeData { Name = "Russo Kay", EmailId = "russo@gmail.com" }, + new EmployeeData { Name = "Camden Kate", EmailId = "camden@gmail.com" }, + new EmployeeData { Name = "Mary Kate", EmailId = "mary@gmail.com" }, + new EmployeeData { Name = "Ursula Ann", EmailId = "ursula@gmail.com" }, + new EmployeeData { Name = "Margaret", EmailId = "margaret@gmail.com" }, + new EmployeeData { Name = "Laura Grace", EmailId = "laura@gmail.com" }, + new EmployeeData { Name = "Robert", EmailId = "robert@gmail.com" }, + new EmployeeData { Name = "Albert", EmailId = "albert@gmail.com" }, + new EmployeeData { Name = "Michale", EmailId = "michale@gmail.com" }, + new EmployeeData { Name = "Andrew James", EmailId = "james@gmail.com" }, + new EmployeeData { Name = "Rosalie", EmailId = "rosalie@gmail.com" }, + new EmployeeData { Name = "Stella Ruth", EmailId = "stella@gmail.com" }, + new EmployeeData { Name = "Richard Rose", EmailId = "richard@gmail.com" }, + new EmployeeData { Name = "Gabrielle", EmailId = "gabrielle@gmail.com" }, + new EmployeeData { Name = "Thomas", EmailId = "thomas@gmail.com" }, + }; + return mention; + } + + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor new file mode 100644 index 0000000000..95fccade70 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor @@ -0,0 +1,69 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria​

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + +@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render() + +@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).SuggestionCount(5).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper new file mode 100644 index 0000000000..4182f96fc7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper @@ -0,0 +1,12 @@ +@{ + List data = new EmployeeData().EmployeeList(); + + string value = @"

Hello @@Maria​

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

"; +} + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs new file mode 100644 index 0000000000..79a629048a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs @@ -0,0 +1,16 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"
+

Outer Quote: The Rich Text Editor provides a flexible way to format quotations.

+
+

Inner Quote: You can even nest blockquotes to represent quoted replies or layered citations.

+
+

Deep Quote: This is useful in forums, emails, or academic writing where multiple levels of quoting are needed.

+
+
+
"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor new file mode 100644 index 0000000000..1852352154 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("editor").Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper new file mode 100644 index 0000000000..6a3eb6cee1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper @@ -0,0 +1 @@ + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs new file mode 100644 index 0000000000..e002c46254 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/controller.cs @@ -0,0 +1,38 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @" + + + + + + + + + + + + +
DepartmentDetails
Sales + + + + + + + + + + + + + +
EmployeeTarget
John Doe$50,000
Jane Smith$60,000
+
MarketingCampaign planning in progress
"; + ViewBag.items = new[] { "CreateTable" }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor new file mode 100644 index 0000000000..c251cf9dee --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("table").ToolbarSettings(e => { e.Items((object)ViewBag.items); }).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper new file mode 100644 index 0000000000..4fa431e596 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/nesting-table/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs new file mode 100644 index 0000000000..969244f6f9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/controller.cs @@ -0,0 +1,8 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor new file mode 100644 index 0000000000..c40d57d450 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor @@ -0,0 +1,45 @@ +@{ + var sliderValue = new int[] { 0, 50 }; +} + +
+ + @Html.EJS().Slider("range").Value(sliderValue).Type(Syncfusion.EJ2.Inputs.SliderType.Range).Min(0).Max(400).Change("onChange").Render() +
+ +
+ @Html.EJS().RichTextEditor("editor").Height("400px").ContentTemplate(@

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager.

).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper new file mode 100644 index 0000000000..4f7bc3d9cb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper @@ -0,0 +1,51 @@ +@{ +var sliderValue = new int[] { 0, 50 }; +} + +
+ + +
+ +
+ + +

+ The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager. +

+ + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/controller.cs index 0692f3ac0a..e37415605c 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/controller.cs +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/controller.cs @@ -27,7 +27,21 @@ public ActionResult Index() iconCss= "e-icons e-signature", type= "Custom", command= "Signature" - } + }, + new { + text: 'HorizontalLine', + description: 'Insert a horizontal line', + iconCss: 'e-icons e-horizontal-line', + type: 'Custom', + command: 'HorizontalLine', + }, + new { + text: 'CheckList', + description: 'Insert a check list', + iconCss: 'e-icons e-checklist', + type: 'Custom', + command: 'CheckList', + }, } } return View(); diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/razor index 5ef521ee18..d04723da1b 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/razor @@ -13,5 +13,11 @@ if (args.itemData.command === "Signature") { rteObj.executeCommand("insertHTML", signature, { undo: true }); } + if (args.itemData.command === 'HorizontalLine') { + rteObj.executeCommand('insertHTML', '
'); + } + if (args.itemData.command === 'CheckList') { + rteObj.executeCommand('insertHTML',`
  • Task 1
  • Task 2
`); + } } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/tagHelper index d25ba0cdad..eb8a8ae918 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu/tagHelper @@ -21,5 +21,11 @@ if (args.itemData.command === "Signature") { rteObj.executeCommand("insertHTML", signature, { undo: true }); } + if (args.itemData.command === 'HorizontalLine') { + rteObj.executeCommand('insertHTML', '
'); + } + if (args.itemData.command === 'CheckList') { + rteObj.executeCommand('insertHTML',`
  • Task 1
  • Task 2
`); + } } \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md new file mode 100644 index 0000000000..49b75f88a3 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -0,0 +1,40 @@ +--- +layout: post +title: Slider-Based Text Selection in ##Platform_Name## Rich Text Editor Component +description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Slider-Based Text Selection +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Text Selection Using Slider in ##Platform_Name## Rich Text Editor Control + +The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. + +This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. + +> **Note:** The example below assumes the Rich Text Editor contains plain text wrapped in a single `

` tag for simplicity. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md new file mode 100644 index 0000000000..fe10eb7882 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Mail merge in ##Platform_Name## RichTextEditor | Syncfusion +description: Learn about Mail merge in Syncfusion ##Platform_Name## RichTextEditor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Mail merge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Mail merge in ##Platform_Name## Rich Text Editor control + +The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. + +This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md index 76711876e9..6e805c379e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md @@ -12,15 +12,82 @@ documentation: ug By integrating the [Mention](https://ej2.syncfusion.com/aspnetmvc/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy. +## Setup and configuration + Use the [Target](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_Target) property of the Mention component to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text. +## Using mentions + When the user types the `@` symbol followed by a character, the Rich Text Editor displays a list of suggestions. Users can then select an item from the list by: * Clicking on it * Typing the name of the item they want to tag -In the following sample, we configured the following properties with popup dimensions. +## Customizing suggestion list + +### Minimum input length for Mention suggestions + +You can control when the suggestion list appears by setting the [MinLength](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MinLength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance. + +By default, `MinLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters. + +In the following example, the `MinLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-min-length/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list count + +You can control the number of items displayed in the Mention suggestion list using the [SuggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user. + +By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs. + +In the example below, the `SuggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@). + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list using templates + +#### Item template + +You can customize how each item appears in the suggestion list using the [ItemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name. + +#### Display template + +Use the [DisplayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) property to define how the selected mention appears in the editor content. + +For example, by default, the mention chip renders as: + +``` +@Selma Rose + +``` + +Using the `DisplayTemplate` property, you can customize it to render as a clickable link: + +``` +@Maria + +``` + +This allows you to create more interactive and informative mentions within the editor. + +In the following sample, we configured the following properties: +* [DisplayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) -Used to customize how the selected value appears in the editor content. * [AllowSpaces](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching. * [SuggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. * [ItemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) - Used to display the customized appearance in suggestion list. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md index c68fc25d9d..318e25ac26 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md @@ -12,7 +12,20 @@ documentation: ug The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences. -## Customizing Rich Text Editor Content +## Styling the placeholder text + +Use the following CSS to customize the default color in the Rich Text Editor's placeholder. + +```CSS + +.e-richtexteditor .e-rte-placeholder { + color: blue; + font-family: monospace; +} + +``` + +## Styling the editor content area Use the following CSS to modify the default style of the Rich Text Editor's content area, including font properties, background, and text color. @@ -32,7 +45,7 @@ Use the following CSS to modify the default style of the Rich Text Editor's cont } ``` -## Customizing Rich Text Editor Toolbar +## Customizing the toolbar appearance Use the following CSS to customize the default color in the Rich Text Editor's toolbar icon. @@ -63,7 +76,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's t } ``` -## Customizing Character Count Display +## Styling the character count display Use the following CSS to customize the default color in the Rich Text Editor's character count. @@ -79,7 +92,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's c } ``` -## Customizing Border Color +## Modifying the editor container border Use the following CSS to customize the border color in the Rich Text Editor's container. @@ -90,4 +103,30 @@ Use the following CSS to customize the border color in the Rich Text Editor's co border-radius: 4px; } -``` \ No newline at end of file +``` + +## Highlighting specific text programmatically + +Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor's `executeCommand` method. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} +{% endhighlight %} +{% endtabs} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md index e1d5871de8..a86bf81259 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md @@ -61,6 +61,39 @@ You can insert `Rows` above or below the selected table cell using the quick too ![Rich Text Editor table column](./images/table_column.png) +## Table column resizing + +The Rich Text Editor supports resizing of table columns, allowing users to adjust the size of individual columns to better fit their content. To resize a column, hover the pointer near the edge of a table cell until the resize cursor appears. Then, click and drag the cell border to modify the column size as needed. + +This feature provides flexibility in organizing tabular data and ensures that tables remain clear, structured, and easy to read, especially when working with varying content lengths or complex layouts. + +## Nesting tables + +The Rich Text Editor allows users to insert tables within other table cells, enabling the creation of nested tables. This feature is useful for building complex layouts such as structured forms, hierarchical data views, or detailed reports. Users can manually insert a nested table by placing the cursor inside a cell and using the table toolbar option or HTML source editing. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Quick insert for table rows and columns The Rich Text Editor offers a simple and intuitive way to add rows and columns to your tables without interrupting your workflow. You can expand tables directly from the interface, no need to use toolbar buttons. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md new file mode 100644 index 0000000000..ab3d3aef9d --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Fullscreen Mode in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Fullscreen Mode in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Fullscreen Mode +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Fullscreen Mode in ##Platform_Name## Rich Text Editor + +The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. + +You can enable fullscreen mode using the FullScreen icon toolbar button. Once activated, the editor transitions into fullscreen view, hiding other page elements and maximizing the editing area. + +## How it works + +Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled, the editor: + +- Expands to fill the entire browser window. +- Adjusts its layout to optimize space for content and tools. +- Can be exited by clicking the same icon again or pressing the `Esc` key. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md index 4a07d31b28..71052747ef 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -200,6 +200,14 @@ The following example demonstrates how to customize the bullet format lists in t {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ### Checklist The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution. @@ -422,6 +430,39 @@ Use the `Blockquote` tool in the editor below to see the feature in action. > In a markdown editor, blockquotes are represented using the `>` symbol. +### Nested blockquotes + +The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another. + +While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways: + +1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly. +2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property. +3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Horizontal line The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (

) help visually separate sections of content, enhancing readability and structural clarity. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md new file mode 100644 index 0000000000..49b75f88a3 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -0,0 +1,40 @@ +--- +layout: post +title: Slider-Based Text Selection in ##Platform_Name## Rich Text Editor Component +description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Slider-Based Text Selection +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Text Selection Using Slider in ##Platform_Name## Rich Text Editor Control + +The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. + +This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. + +> **Note:** The example below assumes the Rich Text Editor contains plain text wrapped in a single `

` tag for simplicity. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md new file mode 100644 index 0000000000..fe10eb7882 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Mail merge in ##Platform_Name## RichTextEditor | Syncfusion +description: Learn about Mail merge in Syncfusion ##Platform_Name## RichTextEditor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Mail merge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Mail merge in ##Platform_Name## Rich Text Editor control + +The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. + +This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mail-merge/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mail-merge/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md index 0554f97257..05e4ac9ff0 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md @@ -12,15 +12,82 @@ documentation: ug By integrating the [Mention](https://ej2.syncfusion.com/aspnetcore/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy. +## Setup and configuration + Use the [target](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_Target) property of the Mention component to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text. +## Using mentions + When the user types the `@` symbol followed by a character, the Rich Text Editor displays a list of suggestions. Users can then select an item from the list by: * Clicking on it * Typing the name of the item they want to tag -In the following sample, we configured the following properties with popup dimensions. +## Customizing suggestion list + +### Minimum input length for Mention suggestions + +You can control when the suggestion list appears by setting the [minLength](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MinLength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance. + +By default, `minLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters. + +In the following example, the `minLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-min-length/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list count + +You can control the number of items displayed in the Mention suggestion list using the [suggestionCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user. + +By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs. + +In the example below, the `suggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@). + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/mention-suggestion-count/EmployeeData.cs %} +{% endhighlight %} +{% endtabs %} + +### Customizing suggestion list using templates + +#### Item template + +You can customize how each item appears in the suggestion list using the [itemTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name. + +#### Display template + +Use the [displayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) property to define how the selected mention appears in the editor content. + +For example, by default, the mention chip renders as: + +``` +@Selma Rose + +``` + +Using the `displayTemplate` property, you can customize it to render as a clickable link: + +``` +@Maria + +``` + +This allows you to create more interactive and informative mentions within the editor. + +In the following sample, we configured the following properties: +* [displayTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_DisplayTemplate) -Used to customize how the selected value appears in the editor content. * [allowSpaces](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching. * [suggestionCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. * [itemTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_ItemTemplate) - Used to display the customized appearance in suggestion list. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md index 682a1cb524..b8035c1902 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md @@ -12,7 +12,7 @@ documentation: ug The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences. -## Customizing placeholder text +## Styling the placeholder text Use the following CSS to customize the default color in the Rich Text Editor's placeholder. @@ -25,7 +25,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's p ``` -## Customizing editor content +## Styling the editor content area Use the following CSS to modify the default style of the Rich Text Editor's content area, including font properties, background, and text color. @@ -45,7 +45,7 @@ Use the following CSS to modify the default style of the Rich Text Editor's cont } ``` -## Customizing editor toolbar +## Customizing the toolbar appearance Use the following CSS to customize the default color in the Rich Text Editor's toolbar icon. @@ -76,7 +76,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's t } ``` -## Customizing character count display +## Styling the character count display Use the following CSS to customize the default color in the Rich Text Editor's character count. @@ -92,7 +92,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's c } ``` -## Customizing border color +## Modifying the editor container border Use the following CSS to customize the border color in the Rich Text Editor's container. @@ -105,7 +105,7 @@ Use the following CSS to customize the border color in the Rich Text Editor's co ``` -## Highlight the specific lines +## Highlighting specific text programmatically Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor's `executeCommand` method. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md index 1db2fe505c..5c7f9eb720 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md @@ -61,6 +61,39 @@ You can insert `Rows` above or below the selected table cell using the quick too ![Rich Text Editor table column](./images/table_column.png) +## Table column resizing + +The Rich Text Editor supports resizing of table columns, allowing users to adjust the size of individual columns to better fit their content. To resize a column, hover the pointer near the edge of a table cell until the resize cursor appears. Then, click and drag the cell border to modify the column size as needed. + +This feature provides flexibility in organizing tabular data and ensures that tables remain clear, structured, and easy to read, especially when working with varying content lengths or complex layouts. + +## Nesting tables + +The Rich Text Editor allows users to insert tables within other table cells, enabling the creation of nested tables. This feature is useful for building complex layouts such as structured forms, hierarchical data views, or detailed reports. Users can manually insert a nested table by placing the cursor inside a cell and using the table toolbar option or HTML source editing. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nesting-table/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nesting-table/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Quick insert for table rows and columns The Rich Text Editor offers a simple and intuitive way to add rows and columns to your tables without interrupting your workflow. You can expand tables directly from the interface, no need to use toolbar buttons. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md new file mode 100644 index 0000000000..ab3d3aef9d --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Fullscreen Mode in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Fullscreen Mode in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Fullscreen Mode +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Fullscreen Mode in ##Platform_Name## Rich Text Editor + +The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. + +You can enable fullscreen mode using the FullScreen icon toolbar button. Once activated, the editor transitions into fullscreen view, hiding other page elements and maximizing the editing area. + +## How it works + +Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled, the editor: + +- Expands to fill the entire browser window. +- Adjusts its layout to optimize space for content and tools. +- Can be exited by clicking the same icon again or pressing the `Esc` key. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/fullscreen/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/fullscreen/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md index 336e9141d0..31e61a795a 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md @@ -200,6 +200,14 @@ The following example demonstrates how to customize the bullet format lists in t {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ### Checklist The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution. @@ -422,6 +430,39 @@ Use the `Blockquote` tool in the editor below to see the feature in action. > In a markdown editor, blockquotes are represented using the `>` symbol. +### Nested blockquotes + +The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another. + +While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways: + +1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly. +2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property. +3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Horizontal line The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (

) help visually separate sections of content, enhancing readability and structural clarity. diff --git a/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif new file mode 100644 index 0000000000000000000000000000000000000000..2b004d0e7ba2b809f77a662ca68e80c83b070bd3 GIT binary patch literal 4533811 zcmd4YXH*kW`zZQJgV4eddNn}k9gz|cLnu-NLq|YFK&2>#B7&fX5ISOLf(S^L-h+Uk zp-B~KA|fKai2^q4+`Q+1?)h?VIrn_JYwg)+2c{$o}1~OiRgw1!~v9L5Q8Ca7Y)ZpaBM?AdyHgz>W|g37M~5 zg)8CU0EGz(xS2dxdWdjl9-ZD#&#a}>%hm}5*A)6fSxAT-xH|^!3WK{dpzs*jPY3OA z1ZHOmmfqgfJnzi)12ANLrfl7kS?8r39QNC3bTRww3Z@9#t=rkHWV@B}K zoY^G=5U7!nDa9PLal#tADIvR=yD2jo%#R0`xr-aq=pWnlP635o zcfH4U!7-5eN^b?`E!g#Tr88@gu3?t~+J)?P&DaUs*>%-|!ZV=VjGbMIUBByC%Gen5 zERkclNaT77avhgqx0^YZ;+l!e9K(%`dAp8zkBu>7GLL#AnK7ArGMP0PzzjInm6^G| zn@7mY^RBfMK9Ec~ki;EGdLKxFDRy=TGqnLBc9ym42MdIQGVovlJn&9A@Wy3^2#3_t z5Aq@pyuA;+!CDRB-7@-&hMlDXxZ9O-P_}+RSU(71-XUg#eh@-G0O`B`8R~Yft|6|G z%meGl6##-1GjAyDjzRJ&x(_xK^~QtJmU-rl#r?@bNB!pq8%qZ6VvLi-ESgG(GUV;6 z+=rUVMzYnthx06&%U?Xu4cVR_YJT+cAwGs(+_I%&qQpEy@$7I*<c(4yg8c(Q#~ITKN2v z0_!KOA2XZO)}Ow3@_6?>>bf%@s
  • Editor Types @@ -2255,6 +2256,7 @@
  • Mention Integration
  • Slash Commands
  • Emoji Picker
    • +
  • Mail Merge Integration
  • Validation and Security @@ -2265,6 +2267,7 @@
  • Link Manipulation
    • +
  • Selection
  • Disabling the Rich Text Editor
  • Character Count
  • Code View Support
    • From a2e8b32efc328e345033b422ba2282497d6d783f Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Thu, 30 Oct 2025 17:41:57 +0530 Subject: [PATCH 2/8] 988174: Rich Text Editor Missing topics Are Added --- .../EJ2_ASP.MVC/tools/text-formatting.md | 16 ++++++++-------- .../EJ2_ASP.NETCORE/tools/text-formatting.md | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md index 71052747ef..50ce849adc 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -200,14 +200,6 @@ The following example demonstrates how to customize the bullet format lists in t {% endtabs %} {% endif %} -## Nested list creation using Tab key - -In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. - -Please refer to the below video for visual behavior and interaction examples: - -![Rich Text Editor list editing behaviour](../images/list-editing.gif) - ### Checklist The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution. @@ -249,6 +241,14 @@ Below is an example of how to configure the Checklist in the Rich Text Editor: {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ## Increase and decrease indent The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md index 31e61a795a..b4960173d6 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md @@ -200,14 +200,6 @@ The following example demonstrates how to customize the bullet format lists in t {% endtabs %} {% endif %} -## Nested list creation using Tab key - -In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. - -Please refer to the below video for visual behavior and interaction examples: - -![Rich Text Editor list editing behaviour](../images/list-editing.gif) - ### Checklist The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution. @@ -249,6 +241,14 @@ Below is an example of how to configure the Checklist in the Rich Text Editor: {% endtabs %} {% endif %} +## Nested list creation using Tab key + +In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one. + +Please refer to the below video for visual behavior and interaction examples: + +![Rich Text Editor list editing behaviour](../images/list-editing.gif) + ## Increase and decrease indent The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand. From a1f7b9cbe1c48812f4bebb50688dd348727112d3 Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Thu, 30 Oct 2025 17:59:23 +0530 Subject: [PATCH 3/8] 988174: Rich Text Editor Missing topics Are Added --- .../rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md index 05e4ac9ff0..407b7ade15 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md @@ -79,7 +79,7 @@ For example, by default, the mention chip renders as: Using the `displayTemplate` property, you can customize it to render as a clickable link: ``` -@Maria +@Selma Rose ``` From 49b440221c721ebf4298aa1189741f486573054e Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Fri, 31 Oct 2025 09:57:42 +0530 Subject: [PATCH 4/8] 988174: Rich Text Editor Missing topics Are Added --- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md | 2 +- .../rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md | 4 ++-- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md | 3 ++- .../rich-text-editor/EJ2_ASP.NETCORE/selection.md | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md index 49b75f88a3..d9ed1f08de 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Slider-Based Text Selection in ##Platform_Name## Rich Text Editor Component +title: Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Slider-Based Text Selection diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md index 6e805c379e..f8d284446b 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Mentions in the ASP.NET Core Rich Text Editor Control +# Mentions in the ##Platform_Name## Rich Text Editor Control By integrating the [Mention](https://ej2.syncfusion.com/aspnetmvc/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy. @@ -79,7 +79,7 @@ For example, by default, the mention chip renders as: Using the `DisplayTemplate` property, you can customize it to render as a clickable link: ``` -@Maria +@Selma Rose ``` diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md index 318e25ac26..a3925c516c 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md @@ -129,4 +129,5 @@ Programmatically highlight a portion of the text in the editor by setting the ba {% highlight c# tabtitle="Controller.cs" %} {% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} {% endhighlight %} -{% endtabs} \ No newline at end of file +{% endtabs} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md index 49b75f88a3..a1e80761a6 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Slider-Based Text Selection in ##Platform_Name## Rich Text Editor Component +title: Slider-Based Text Selection in Sycnfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Slider-Based Text Selection From aef232c8ee12795020b0c5b0308542cbf237536b Mon Sep 17 00:00:00 2001 From: Kokila13081999 <93525217+Kokila13081999@users.noreply.github.com> Date: Fri, 31 Oct 2025 09:58:43 +0530 Subject: [PATCH 5/8] Update fullscreen-tool.md --- .../rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md index ab3d3aef9d..b07bb37f67 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/fullscreen-tool.md @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Fullscreen Mode in ##Platform_Name## Rich Text Editor +# Fullscreen Mode in ##Platform_Name## Rich Text Editor Control The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. @@ -43,4 +43,4 @@ Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled {% include code-snippet/rich-text-editor/fullscreen/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} \ No newline at end of file +{% endif %} From ceb4f50b8dfdc94d947507bb1ed64ab8e948b7c7 Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Mon, 3 Nov 2025 11:24:14 +0530 Subject: [PATCH 6/8] 988174: Rich Text Editor Missing topics Are Added --- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md | 2 +- .../rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md index a3925c516c..b8035c1902 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md @@ -129,5 +129,5 @@ Programmatically highlight a portion of the text in the editor by setting the ba {% highlight c# tabtitle="Controller.cs" %} {% include code-snippet/rich-text-editor/highlight-specific-line/controller.cs %} {% endhighlight %} -{% endtabs} +{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md index ab3d3aef9d..81892bfef4 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/fullscreen-tool.md @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Fullscreen Mode in ##Platform_Name## Rich Text Editor +# Fullscreen Mode in ##Platform_Name## Rich Text Editor Control The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features. From e2d1b51a581abf160d457894eb621110b3a17580 Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Mon, 3 Nov 2025 11:42:01 +0530 Subject: [PATCH 7/8] 988174: Rich Text Editor Missing topics Are Added --- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md | 2 +- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md | 2 +- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md | 2 +- ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md index d9ed1f08de..adf3077d45 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor Component +title: Selection in Syncfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Slider-Based Text Selection diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md index b8035c1902..b08f535f31 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/style.md @@ -1,6 +1,6 @@ --- layout: post -title: Style in ##Platform_Name## Rich Text Editor Component +title: Style in Syncfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Style in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md index a1e80761a6..adf3077d45 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Slider-Based Text Selection in Sycnfusion ##Platform_Name## Rich Text Editor Component +title: Selection in Syncfusion ##Platform_Name## Rich Text Editor Component description: Learn here all about Slider-Based Text Selection in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Slider-Based Text Selection diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md index b8035c1902..222232f792 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/style.md @@ -1,6 +1,6 @@ --- layout: post -title: Style in ##Platform_Name## Rich Text Editor Component +title: Style in Syncfusion ##Platform_Name## Rich Text Editor Control description: Learn here all about Style in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style From b906f97fb1cec7d12cc271c25dd5988bc11a408a Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Mon, 3 Nov 2025 18:45:52 +0530 Subject: [PATCH 8/8] 988174: Rich Text Editor Missing topics Are Added --- .../cell-selection/controller.cs | 9 ++ .../rich-text-editor/cell-selection/razor | 30 ++++++ .../rich-text-editor/cell-selection/tagHelper | 30 ++++++ .../node-selection/controller.cs | 9 ++ .../rich-text-editor/node-selection/razor | 25 +++++ .../rich-text-editor/node-selection/tagHelper | 25 +++++ .../rich-text-editor/select-all/controller.cs | 9 ++ .../rich-text-editor/select-all/razor | 14 +++ .../rich-text-editor/select-all/tagHelper | 13 +++ .../rich-text-editor/EJ2_ASP.MVC/selection.md | 91 ++++++++++++++++++- .../EJ2_ASP.NETCORE/selection.md | 91 ++++++++++++++++++- 11 files changed, 340 insertions(+), 6 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/controller.cs new file mode 100644 index 0000000000..e16ed69923 --- /dev/null +++ b/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 = @"

    This is paragraph one.

    This is paragraph two.

    " + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor new file mode 100644 index 0000000000..f0195c47c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/razor @@ -0,0 +1,30 @@ + + + +@Html.EJS().RichTextEditor("cellSelectionRTE").Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper new file mode 100644 index 0000000000..f11fcd223b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/cell-selection/tagHelper @@ -0,0 +1,30 @@ + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs new file mode 100644 index 0000000000..e16ed69923 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

    This is paragraph one.

    This is paragraph two.

    " + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor new file mode 100644 index 0000000000..08a10a34e4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/razor @@ -0,0 +1,25 @@ + + + +@Html.EJS().RichTextEditor("nodeSelectionRTE").Value(ViewBag.value).Render() + +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper new file mode 100644 index 0000000000..e4bafb11c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/node-selection/tagHelper @@ -0,0 +1,25 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs new file mode 100644 index 0000000000..4e3fc17612 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

    The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

    Key features:

    • Provides <IFRAME> and <DIV> modes

    • Capable of handling markdown editing.

    • Contains a modular library to load the necessary functionality on demand.

    • Provides a fully customizable toolbar.

    • Provides HTML view to edit the source directly for developers.

    • Supports third-party library integration.

    • Allows preview of modified content before saving it.

    • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

    • Contains undo/redo manager.

    • Creates bulleted and numbered lists.

    " + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor new file mode 100644 index 0000000000..c9197b8d78 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor @@ -0,0 +1,14 @@ + + + +@Html.EJS().RichTextEditor("selectAll").Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper new file mode 100644 index 0000000000..6a81cc41a1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper @@ -0,0 +1,13 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md index adf3077d45..04c0f8181e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -8,14 +8,14 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Selection Using Slider in ##Platform_Name## Rich Text Editor Control +# Selection in ##Platform_Name## Rich Text Editor Control + +## Text selection The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. -> **Note:** The example below assumes the Rich Text Editor contains plain text wrapped in a single `

    ` tag for simplicity. - {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -38,3 +38,88 @@ This functionality is useful for scenarios where precise text selection is neede {% endhighlight %} {% endtabs %} {% endif %} + +## Node selection + +Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection. + +The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` API. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Cell selection + +Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction. + +The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Select all content + +To select all content within the Rich Text Editor, use the `selectAll` method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md index adf3077d45..04c0f8181e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -8,14 +8,14 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Selection Using Slider in ##Platform_Name## Rich Text Editor Control +# Selection in ##Platform_Name## Rich Text Editor Control + +## Text selection The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. -> **Note:** The example below assumes the Rich Text Editor contains plain text wrapped in a single `

    ` tag for simplicity. - {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -38,3 +38,88 @@ This functionality is useful for scenarios where precise text selection is neede {% endhighlight %} {% endtabs %} {% endif %} + +## Node selection + +Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection. + +The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` API. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/node-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/node-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Cell selection + +Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction. + +The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/cell-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/cell-selection/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Select all content + +To select all content within the Rich Text Editor, use the `selectAll` method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/select-all/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/select-all/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file