Skip to content

966016: UG Documentation on How to Dynamically enable or disable text selection. #4359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: hotfix/hotfix-v30.1.37
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
layout: post
title: Enable or Disable Text Selection in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
description: Learn here all about enabling text selection in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: PDF Viewer
publishingplatform: ##Platform_Name##
documentation: ug
---

# Enable or Disable Text Selection in Syncfusion PDF Viewer

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.

## Configure Text Selection on Initialization

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:

{% tabs %}
{% highlight html tabtitle="Standalone" %}

@using Syncfusion.EJ2
@{
ViewBag.Title = "Home Page";
}

<div>
<div style="height:500px;width:100%;">
@Html.EJS().PdfViewer("pdfviewer")
.DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf")
.ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib")
.EnableTextSelection(false)
.Render()
</div>
</div>

{% endhighlight %}
{% endtabs %}

## Toggle Text Selection Dynamically

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:

{% tabs %}
{% highlight html tabtitle="Standalone" %}

@using Syncfusion.EJ2
@{
ViewBag.Title = "Home Page";
}

<div>
<div style="height:500px;width:100%;">
<button onclick="enableTextSelection()">EnableTextSelection</button>
<button onclick="disableTextSelection()">DisableTextSelection</button>
@Html.EJS().PdfViewer("pdfviewer")
.DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf")
.ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib")
.EnableTextSelection(false)
.Render()
</div>
</div>

<script type="text/javascript">
function enableTextSelection() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.enableTextSelection = true;
}

function disableTextSelection() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.enableTextSelection = false;
}
</script>

{% endhighlight %}
{% endtabs %}

## Use Cases and Considerations

- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
- **Controlled Access**: Implement conditional text selection depending on user permissions or document sections.

## Default Behavior

By default, text selection is enabled in the PDF Viewer. Set the `EnableTextSelection` property to `false` explicitly if you want to disable this functionality.

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.

[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
layout: post
title: Enable or Disable Text Selection in ASP.NET Core PDF Viewer | Syncfusion
description: Learn how to enable text selection in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Enable or Disable Text Selection in Syncfusion PDF Viewer

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.

## Configure Text Selection on Initialization

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:

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}

@page "{handler?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
enableTextSelection="false">
</ejs-pdfviewer>
</div>

{% endhighlight %}
{% endtabs %}

## Toggle Text Selection Dynamically

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:

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}

@page "{handler?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
<button onclick="enableTextSelection()">Enable Text Selection</button>
<button onclick="disableTextSelection()">Disable Text Selection</button>
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
enableTextSelection="false">
</ejs-pdfviewer>
</div>

<script type="text/javascript">
// You can dynamically toggle text selection with JavaScript
function enableTextSelection() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.enableTextSelection = true;
}

function disableTextSelection() {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.enableTextSelection = false;
}
</script>

{% endhighlight %}
{% endtabs %}

## Use Cases and Considerations

- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
- **Controlled Access**: Implement conditional text selection depending on user permissions or document sections.

## Default Behavior

By default, text selection is enabled in the PDF Viewer. Set the `enableTextSelection` property to `false` explicitly if you want to disable this functionality.

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.

[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)
1 change: 1 addition & 0 deletions ej2-asp-core-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -2023,6 +2023,7 @@
<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
<li><a href="/ej2-asp-core/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
<li><a href="/ej2-asp-core/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
</ul>
</li>
<li>Troubleshooting
Expand Down
1 change: 1 addition & 0 deletions ej2-asp-mvc-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -1983,6 +1983,7 @@
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
</ul>
</li>
<li>Troubleshooting
Expand Down