Skip to content

Commit 8c5ff05

Browse files
rparthi-1687rparthi-1687
authored
Merge pull request #4359 from syncfusion-content/EJ2-966016-enableTsHF
966016: UG Documentation on How to Dynamically enable or disable text selection.
2 parents 326f370 + d7a6d72 commit 8c5ff05

File tree

4 files changed

+187
-0
lines changed

4 files changed

+187
-0
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/enable-text-selection.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
layout: post
3+
title: Enable or Disable Text Selection in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
4+
description: Learn here all about enabling text selection in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: PDF Viewer
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Enable or Disable Text Selection in Syncfusion PDF Viewer
12+
13+
The Syncfusion PDF Viewer provides the `EnableTextSelection` property, which allows you to control whether users can select text within the displayed PDF document. This feature can be toggled programmatically during runtime.
14+
15+
## Configure Text Selection on Initialization
16+
17+
You can set the initial text selection behavior when initializing the PDF Viewer control by configuring the `EnableTextSelection` property. By default, text selection is enabled, but you can disable it as shown in the following example:
18+
19+
{% tabs %}
20+
{% highlight html tabtitle="Standalone" %}
21+
22+
@using Syncfusion.EJ2
23+
@{
24+
ViewBag.Title = "Home Page";
25+
}
26+
27+
<div>
28+
<div style="height:500px;width:100%;">
29+
@Html.EJS().PdfViewer("pdfviewer")
30+
.DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf")
31+
.ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib")
32+
.EnableTextSelection(false)
33+
.Render()
34+
</div>
35+
</div>
36+
37+
{% endhighlight %}
38+
{% endtabs %}
39+
40+
## Toggle Text Selection Dynamically
41+
42+
You can change the text selection behavior at runtime using buttons, menu options, or other UI elements. The following example demonstrates how to toggle text selection with button clicks:
43+
44+
{% tabs %}
45+
{% highlight html tabtitle="Standalone" %}
46+
47+
@using Syncfusion.EJ2
48+
@{
49+
ViewBag.Title = "Home Page";
50+
}
51+
52+
<div>
53+
<div style="height:500px;width:100%;">
54+
<button onclick="enableTextSelection()">EnableTextSelection</button>
55+
<button onclick="disableTextSelection()">DisableTextSelection</button>
56+
@Html.EJS().PdfViewer("pdfviewer")
57+
.DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf")
58+
.ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib")
59+
.EnableTextSelection(false)
60+
.Render()
61+
</div>
62+
</div>
63+
64+
<script type="text/javascript">
65+
function enableTextSelection() {
66+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
67+
viewer.enableTextSelection = true;
68+
}
69+
70+
function disableTextSelection() {
71+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
72+
viewer.enableTextSelection = false;
73+
}
74+
</script>
75+
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
## Use Cases and Considerations
80+
81+
- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
82+
- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
83+
- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
84+
- **Controlled Access**: Implement conditional text selection depending on user permissions or document sections.
85+
86+
## Default Behavior
87+
88+
By default, text selection is enabled in the PDF Viewer. Set the `EnableTextSelection` property to `false` explicitly if you want to disable this functionality.
89+
90+
N> When text selection is disabled, users will not be able to select or copy text from the document, which can be useful for protecting document content in certain scenarios.
91+
92+
[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/enable-text-selection.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
layout: post
3+
title: Enable or Disable Text Selection in ASP.NET Core PDF Viewer | Syncfusion
4+
description: Learn how to enable text selection in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Enable or Disable Text Selection in Syncfusion PDF Viewer
12+
13+
The Syncfusion PDF Viewer provides the `enableTextSelection` property, which allows you to control whether users can select text within the displayed PDF document. This feature can be toggled programmatically during runtime.
14+
15+
## Configure Text Selection on Initialization
16+
17+
You can set the initial text selection behavior when initializing the PDF Viewer control by configuring the `enableTextSelection` property. By default, text selection is enabled, but you can disable it as shown in the following example:
18+
19+
{% tabs %}
20+
{% highlight cshtml tabtitle="Standalone" %}
21+
22+
@page "{handler?}"
23+
@model IndexModel
24+
@{
25+
ViewData["Title"] = "Home page";
26+
}
27+
28+
<div class="text-center">
29+
<ejs-pdfviewer id="pdfviewer"
30+
style="height:600px"
31+
resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"
32+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
33+
enableTextSelection="false">
34+
</ejs-pdfviewer>
35+
</div>
36+
37+
{% endhighlight %}
38+
{% endtabs %}
39+
40+
## Toggle Text Selection Dynamically
41+
42+
You can change the text selection behavior at runtime using buttons, menu options, or other UI elements. The following example demonstrates how to toggle text selection with button clicks:
43+
44+
{% tabs %}
45+
{% highlight cshtml tabtitle="Standalone" %}
46+
47+
@page "{handler?}"
48+
@model IndexModel
49+
@{
50+
ViewData["Title"] = "Home page";
51+
}
52+
53+
<div class="text-center">
54+
<button onclick="enableTextSelection()">Enable Text Selection</button>
55+
<button onclick="disableTextSelection()">Disable Text Selection</button>
56+
<ejs-pdfviewer id="pdfviewer"
57+
style="height:600px"
58+
resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"
59+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
60+
enableTextSelection="false">
61+
</ejs-pdfviewer>
62+
</div>
63+
64+
<script type="text/javascript">
65+
// You can dynamically toggle text selection with JavaScript
66+
function enableTextSelection() {
67+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
68+
viewer.enableTextSelection = true;
69+
}
70+
71+
function disableTextSelection() {
72+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
73+
viewer.enableTextSelection = false;
74+
}
75+
</script>
76+
77+
{% endhighlight %}
78+
{% endtabs %}
79+
80+
## Use Cases and Considerations
81+
82+
- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
83+
- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
84+
- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
85+
- **Controlled Access**: Implement conditional text selection depending on user permissions or document sections.
86+
87+
## Default Behavior
88+
89+
By default, text selection is enabled in the PDF Viewer. Set the `enableTextSelection` property to `false` explicitly if you want to disable this functionality.
90+
91+
N> When text selection is disabled, users will not be able to select or copy text from the document, which can be useful for protecting document content in certain scenarios.
92+
93+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)

‎ej2-asp-core-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2026,6 +2026,7 @@
20262026
<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
20272027
<li><a href="/ej2-asp-core/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
20282028
<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
2029+
<li><a href="/ej2-asp-core/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
20292030
</ul>
20302031
</li>
20312032
<li>Troubleshooting

‎ej2-asp-mvc-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1986,6 +1986,7 @@
19861986
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
19871987
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
19881988
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
1989+
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
19891990
</ul>
19901991
</li>
19911992
<li>Troubleshooting

0 commit comments

Comments
 (0)