Skip to content

Commit b906f97

Browse files
Kokila13081999Kokila13081999
committed
988174: Rich Text Editor Missing topics Are Added
1 parent e2d1b51 commit b906f97

File tree

11 files changed

+340
-6
lines changed

11 files changed

+340
-6
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
public class HomeController : Controller
2+
{
3+
4+
public ActionResult Index()
5+
{
6+
ViewBag.value = @"<p>This is paragraph one.</p><p>This is paragraph two.</p>"
7+
return View();
8+
}
9+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectCell()">
3+
Select Paragraph
4+
</button>
5+
6+
@Html.EJS().RichTextEditor("cellSelectionRTE").Value(ViewBag.value).Render()
7+
8+
<script>
9+
function selectCell() {
10+
const panel = document.getElementById("cellSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
11+
const cells = panel.querySelectorAll('td');
12+
13+
if (cells.length > 2) {
14+
const cell = cells[2]; // Third cell
15+
const range = document.createRange();
16+
range.selectNode(cell);
17+
18+
const selection = window.getSelection();
19+
if (selection) {
20+
selection.removeAllRanges();
21+
selection.addRange(range);
22+
}
23+
24+
cell.style.backgroundColor = '#cce5ff';
25+
cell.classList.add('e-cell-select');
26+
}
27+
28+
}
29+
</script>
30+

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectCell()">
3+
Select Cell
4+
</button>
5+
6+
<ejs-richtexteditor id="cellSelectionRTE" value="@ViewBag.value">
7+
</ejs-richtexteditor>
8+
9+
<script>
10+
function selectCell() {
11+
const panel = document.getElementById("cellSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
12+
const cells = panel.querySelectorAll('td');
13+
14+
if (cells.length > 2) {
15+
const cell = cells[2]; // Third cell
16+
const range = document.createRange();
17+
range.selectNode(cell);
18+
19+
const selection = window.getSelection();
20+
if (selection) {
21+
selection.removeAllRanges();
22+
selection.addRange(range);
23+
}
24+
25+
cell.style.backgroundColor = '#cce5ff';
26+
cell.classList.add('e-cell-select');
27+
}
28+
29+
}
30+
</script>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
public class HomeController : Controller
2+
{
3+
4+
public ActionResult Index()
5+
{
6+
ViewBag.value = @"<p>This is paragraph one.</p><p>This is paragraph two.</p>"
7+
return View();
8+
}
9+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectParagraph()">
3+
Select Paragraph
4+
</button>
5+
6+
@Html.EJS().RichTextEditor("nodeSelectionRTE").Value(ViewBag.value).Render()
7+
8+
@section Scripts {
9+
<script>
10+
function selectParagraph() {
11+
const panel = document.getElementById("nodeSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
12+
const paragraphs = panel.querySelectorAll('p');
13+
14+
if (paragraphs.length > 1) {
15+
const range = document.createRange();
16+
range.selectNode(paragraphs[1]); // Select the second paragraph
17+
const selection = window.getSelection();
18+
if (selection) {
19+
selection.removeAllRanges();
20+
selection.addRange(range);
21+
}
22+
}
23+
}
24+
</script>
25+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectParagraph()">
2+
Select Paragraph
3+
</button>
4+
5+
<ejs-richtexteditor id="nodeSelectionRTE" value="@ViewBag.value">
6+
</ejs-richtexteditor>
7+
8+
<script>
9+
function selectParagraph() {
10+
const panel = document.getElementById("nodeSelectionRTE").ej2_instances[0].contentModule.getEditPanel();
11+
const paragraphs = panel.querySelectorAll('p');
12+
13+
if (paragraphs.length > 1) {
14+
const range = document.createRange();
15+
range.selectNode(paragraphs[1]); // Select the second paragraph
16+
17+
const selection = window.getSelection();
18+
if (selection) {
19+
selection.removeAllRanges();
20+
selection.addRange(range);
21+
}
22+
23+
}
24+
}
25+
</script>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/controller.cs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
public class HomeController : Controller
2+
{
3+
4+
public ActionResult Index()
5+
{
6+
ViewBag.value = @"<p>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.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li><li><p>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>"
7+
return View();
8+
}
9+
}

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/razor‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectAllContent()">
3+
Select All
4+
</button>
5+
6+
@Html.EJS().RichTextEditor("selectAll").Value(ViewBag.value).Render()
7+
8+
<script>
9+
function selectAllContent() {
10+
document.getElementById("selectAll").ej2_instances[0].selectAll();
11+
12+
}
13+
</script>
14+

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/select-all/tagHelper‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<button class="e-btn" style="margin-bottom: 20px;" onclick="selectAllContent()">
2+
Select All
3+
</button>
4+
5+
<ejs-richtexteditor id="selectAll" value="@ViewBag.value">
6+
</ejs-richtexteditor>
7+
8+
<script>
9+
function selectAllContent() {
10+
document.getElementById("selectAll").ej2_instances[0].selectAll();
11+
12+
}
13+
</script>

‎ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Text Selection Using Slider in ##Platform_Name## Rich Text Editor Control
11+
# Selection in ##Platform_Name## Rich Text Editor Control
12+
13+
## Text selection
1214

1315
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.
1416

1517
This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis.
1618

17-
> **Note:** The example below assumes the Rich Text Editor contains plain text wrapped in a single `<p>` tag for simplicity.
18-
1919
{% if page.publishingplatform == "aspnet-core" %}
2020

2121
{% tabs %}
@@ -38,3 +38,88 @@ This functionality is useful for scenarios where precise text selection is neede
3838
{% endhighlight %}
3939
{% endtabs %}
4040
{% endif %}
41+
42+
## Node selection
43+
44+
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.
45+
46+
The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` API.
47+
48+
{% if page.publishingplatform == "aspnet-core" %}
49+
50+
{% tabs %}
51+
{% highlight cshtml tabtitle="CSHTML" %}
52+
{% include code-snippet/rich-text-editor/node-selection/tagHelper %}
53+
{% endhighlight %}
54+
{% highlight c# tabtitle="Controller.cs" %}
55+
{% include code-snippet/rich-text-editor/node-selection/controller.cs %}
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
{% elsif page.publishingplatform == "aspnet-mvc" %}
60+
61+
{% tabs %}
62+
{% highlight razor tabtitle="CSHTML" %}
63+
{% include code-snippet/rich-text-editor/node-selection/razor %}
64+
{% endhighlight %}
65+
{% highlight c# tabtitle="Controller.cs" %}
66+
{% include code-snippet/rich-text-editor/node-selection/controller.cs %}
67+
{% endhighlight %}
68+
{% endtabs %}
69+
{% endif %}
70+
71+
## Cell selection
72+
73+
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.
74+
75+
The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs.
76+
77+
{% if page.publishingplatform == "aspnet-core" %}
78+
79+
{% tabs %}
80+
{% highlight cshtml tabtitle="CSHTML" %}
81+
{% include code-snippet/rich-text-editor/cell-selection/tagHelper %}
82+
{% endhighlight %}
83+
{% highlight c# tabtitle="Controller.cs" %}
84+
{% include code-snippet/rich-text-editor/cell-selection/controller.cs %}
85+
{% endhighlight %}
86+
{% endtabs %}
87+
88+
{% elsif page.publishingplatform == "aspnet-mvc" %}
89+
90+
{% tabs %}
91+
{% highlight razor tabtitle="CSHTML" %}
92+
{% include code-snippet/rich-text-editor/cell-selection/razor %}
93+
{% endhighlight %}
94+
{% highlight c# tabtitle="Controller.cs" %}
95+
{% include code-snippet/rich-text-editor/cell-selection/controller.cs %}
96+
{% endhighlight %}
97+
{% endtabs %}
98+
{% endif %}
99+
100+
## Select all content
101+
102+
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.
103+
104+
{% if page.publishingplatform == "aspnet-core" %}
105+
106+
{% tabs %}
107+
{% highlight cshtml tabtitle="CSHTML" %}
108+
{% include code-snippet/rich-text-editor/select-all/tagHelper %}
109+
{% endhighlight %}
110+
{% highlight c# tabtitle="Controller.cs" %}
111+
{% include code-snippet/rich-text-editor/select-all/controller.cs %}
112+
{% endhighlight %}
113+
{% endtabs %}
114+
115+
{% elsif page.publishingplatform == "aspnet-mvc" %}
116+
117+
{% tabs %}
118+
{% highlight razor tabtitle="CSHTML" %}
119+
{% include code-snippet/rich-text-editor/select-all/razor %}
120+
{% endhighlight %}
121+
{% highlight c# tabtitle="Controller.cs" %}
122+
{% include code-snippet/rich-text-editor/select-all/controller.cs %}
123+
{% endhighlight %}
124+
{% endtabs %}
125+
{% endif %}

0 commit comments

Comments
 (0)