1004886: Text Selection in Vue PDF Viewer

Document-Processing-toc.html

@@ -1776,7 +1776,12 @@
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/print">Print</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/download">Download</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/event">Events</a></li>
-							<li><a href="/document-processing/pdf/pdf-viewer/vue/textselection">Text Selection</a></li>
+							<li><a href="/document-processing/pdf/pdf-viewer/vue/text-selection/overview">Text Selection</a>
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/enable-text-selection">Toggle text selection</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/text-selection/text-selection-api-events">Text Selection API and Events</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/globalization">Globalization</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/content-security-policy">Content Security Policy</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to-overview">How To</a>

Document-Processing/PDF/PDF-Viewer/vue/how-to/enable-text-selection.md

@@ -8,16 +8,83 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Enable or disable text selection in PDF Viewer
+# Enable or disable text selection in Vue PDF Viewer
 
-The Syncfusion PDF Viewer exposes the `enableTextSelection` property to control whether users can select text within the displayed PDF document. This setting can be configured at initialization and toggled programmatically at runtime.
+This guide explains how to enable or disable text selection in the Syncfusion Vue PDF Viewer using both initialization-time settings and runtime toggling.
 
-## Configure text selection on initialization
+**Outcome:** By the end of this guide, you will be able to control whether users can select text in the PDF Viewer.
 
-Set the initial text-selection behavior by configuring the `enableTextSelection` property in the component template. The example below shows a complete component that initializes the viewer with text selection disabled.
+## Steps to toggle text selection
+
+### 1. Disable text selection at initialization
+
+Follow one of these steps to disable text selection when the viewer first loads:
+
+**Remove the text selection module**
+
+Remove the [`TextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textselection) module in the provide array to disable text selection during initialization.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+<template>
+  <div id="app">
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 100%">
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib'
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
+      ThumbnailView, Print, TextSearch, FormFields, FormDesigner, PageOrganizer
+    ]
+  }
+};
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Set `enableTextSelection` to false**
+
+Use the [`enableTextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextselection) property during initialization to disable or enable text selection. The following example disables text selection during initialization:
 
 {% tabs %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="App.vue" %}
 
 <template>
   <div id="app">
@@ -27,8 +94,7 @@ Set the initial text-selection behavior by configuring the `enableTextSelection`
       :documentPath="documentPath"
       :resourceUrl="resourceUrl"
       :enableTextSelection="false"
-      style="height: 640px;"
-    >
+      style="height: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -40,65 +106,57 @@ import {
   Magnification,
   Navigation,
   Annotation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
   TextSelection,
   TextSearch,
   FormFields,
   FormDesigner,
-  PageOrganizer,
+  PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
+
 export default {
   name: 'App',
   components: {
-    'ejs-pdfviewer': PdfViewerComponent,
+    'ejs-pdfviewer': PdfViewerComponent
   },
   data() {
     return {
-        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
-        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib'
     };
   },
   provide: {
     PdfViewer: [
-      Toolbar,
-      Magnification,
-      Navigation,
-      Annotation,
-      TextSelection,
-      TextSearch,
-      FormFields,
-      FormDesigner,
-      PageOrganizer,
-    ],
-  },
+      Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
+      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+    ]
+  }
 };
 </script>
 
 {% endhighlight %}
 {% endtabs %}
 
-## Toggle dynamically
+### 2. Toggle text selection at runtime
 
-To toggle text selection at runtime:
+The [`enableTextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextselection) property can also be used to toggle text selection at runtime.
 
 {% tabs %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="App.vue" %}
 
 <template>
   <div id="app">
-  <button @click="enableTextSelection" style="margin-bottom: 20px;">
-      enableTextSelection
-    </button>
-    <button @click="disableTextSelection" style="margin-bottom: 20px;">
-      disableTextSelection
-    </button>
+    <button @click="enableTextSelection" style="margin-right: 10px;">Enable Text Selection</button>
+    <button @click="disableTextSelection" style="margin-bottom: 20px;">Disable Text Selection</button>
     <ejs-pdfviewer
       id="pdfViewer"
       ref="pdfviewer"
       :documentPath="documentPath"
       :resourceUrl="resourceUrl"
-      :enableTextSelection="false"
-      style="height: 640px;"
-    >
+      style="height: 100%">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -110,60 +168,69 @@ import {
   Magnification,
   Navigation,
   Annotation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
   TextSelection,
   TextSearch,
   FormFields,
   FormDesigner,
-  PageOrganizer,
+  PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
+
 export default {
   name: 'App',
   components: {
-    'ejs-pdfviewer': PdfViewerComponent,
+    'ejs-pdfviewer': PdfViewerComponent
   },
   data() {
     return {
-        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
-        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib'
     };
   },
   provide: {
     PdfViewer: [
-      Toolbar,
-      Magnification,
-      Navigation,
-      Annotation,
-      TextSelection,
-      TextSearch,
-      FormFields,
-      FormDesigner,
-      PageOrganizer,
-    ],
+      Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
+      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
+    ]
   },
   methods: {
     enableTextSelection() {
-      var viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.enableTextSelection = true;
+      if (this.$refs.pdfviewer) {
+        this.$refs.pdfviewer.ej2Instances.enableTextSelection = true;
+      }
     },
     disableTextSelection() {
-      var viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.enableTextSelection = false;
-  },
+      if (this.$refs.pdfviewer) {
+        this.$refs.pdfviewer.ej2Instances.enableTextSelection = false;
+      }
+    }
   }
 };
 </script>
 
 {% endhighlight %}
 {% endtabs %}
 
-## Use Cases and Considerations
+N> When text selection is disabled, the viewer automatically switches to pan mode.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to)
+
+## Use cases and considerations
 
 - Document protection: Disable text selection to help prevent copying sensitive content.
 - Read-only documents: Provide a cleaner viewing experience by preventing selection.
 - Interactive apps: Toggle selection based on user roles or document states.
 
-## Default Behavior
+N> Text selection is enabled by default. Set `enableTextSelection` to `false` to disable it.
+
+## Troubleshooting
+
+If text selection remains active, ensure that the [`TextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textselection) is removed in `provide` or [`enableTextSelection`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextselection) is set to `false`.
 
-Text selection is enabled by default. Set `enableTextSelection` to `false` to disable it.
+## See also
 
-[View Sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to)
+- [Text Selection API reference](../text-selection/reference)
+- [Vue PDF Viewer events](../events)

Document-Processing/PDF/PDF-Viewer/vue/text-selection/overview.md

@@ -0,0 +1,49 @@
+---
+layout: post
+title: Text selection in Vue PDF Viewer | Syncfusion
+description: Learn the text selection concepts, copy behavior, and interaction capabilities of the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: Text selection
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text selection in Vue PDF Viewer
+
+The Text Selection module in the Syncfusion Vue PDF Viewer enables users to select and copy text from a loaded PDF document. Text selection is available by default and gives users direct interaction with the content through dragging, keyboard shortcuts, and context menus.
+
+This overview explains the behavior of text selection, how copy actions work, and how it relates to other interaction features in the viewer.
+
+## Capabilities of text selection
+
+Text selection allows users to:
+
+- Highlight text using mouse or touch  
+- Copy the selected text to the clipboard  
+- Access contextual commands such as Copy through the built‑in context menu  
+- Use keyboard shortcuts such as Ctrl+C or Cmd+C to copy text  
+- Trigger application behavior through selection events  
+
+The feature behaves consistently across single-page and multi-page documents.
+
+## Copying text
+
+Copying is available through several user interaction methods.
+
+### Using the context menu
+
+When text is selected, the built‑in context menu shows a Copy option. Selecting this option copies the highlighted text to the clipboard. See the [context menu](../context-menu/builtin-context-menu#text-menu-items) documentation for further explanation.
+
+### Using keyboard shortcuts
+
+The following keyboard shortcuts copy the selected text:
+
+- Ctrl+C (Windows and Linux)  
+- Cmd+C (macOS)
+
+## Related topics
+
+These topics describe how selection interacts with other features or how copy behavior may be limited depending on viewer configuration or PDF security settings.
+
+- [Toggle text selection](../how-to/enable-text-selection)
+- [Text Selection API and Events](./text-selection-api-events)