diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 1e6f96bc0b..ae171d3205 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1776,7 +1776,12 @@
  • Print
  • Download
  • Events
    • -
  • Text Selection
    • +
  • Text Selection + +
  • Globalization
  • Content Security Policy
  • How To diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to/enable-text-selection.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/enable-text-selection.md index 658f963e80..cd60823de7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/enable-text-selection.md +++ b/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" %} + + + + + +{% 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" %} @@ -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 + ] + } }; {% 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" %} @@ -110,45 +168,45 @@ 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; + } + } } }; @@ -156,14 +214,23 @@ export default { {% 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) \ No newline at end of file +- [Text Selection API reference](../text-selection/reference) +- [Vue PDF Viewer events](../events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/text-selection/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/text-selection/overview.md new file mode 100644 index 0000000000..6a408ed7ca --- /dev/null +++ b/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) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/text-selection/text-selection-api-events.md b/Document-Processing/PDF/PDF-Viewer/vue/text-selection/text-selection-api-events.md new file mode 100644 index 0000000000..8172c85e96 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/text-selection/text-selection-api-events.md @@ -0,0 +1,331 @@ +--- +layout: post +title: Text selection API and events in Vue PDF Viewer | Syncfusion +description: Reference documentation for text selection properties, methods, and events in the Syncfusion Vue PDF Viewer. +platform: document-processing +control: Text selection +documentation: ug +domainurl: ##DomainURL## +--- + +# Text selection API and events in Vue PDF Viewer + +This document provides the reference details for text selection APIs and events in the Syncfusion Vue PDF Viewer. It includes the available configuration property, programmatic methods, and event callbacks that allow applications to react to selection behavior. + +## Methods + +### selectTextRegion + +Programmatically selects text within a specified page and bounds. + +**Method signature:** + +```ts +selectTextRegion(pageNumber: number, bounds: IRectangle[]): void +``` + +**Parameters:** + +- pageNumber: number indicating the target page (1 based indexing) +- bounds: `IRectangle` array defining the selection region + +**Example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### copyText + +Copies the currently selected text to the clipboard. + +**Method signature:** + +```ts +copyText(): void +``` + +**Example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Events + +### textSelectionStart + +Triggered when the user begins selecting text. The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselectionstart) event fires when a user begins selecting text. Use it to track selection initiation, disable conflicting UI controls, or log analytics about user interaction patterns. + +Event arguments (`TextSelectionStartEventArgs`): +- `pageNumber`: Page where the selection started (1-based indexing) +- `bounds`: Bounding rectangle of the initial selection point +- `selectionBehavior`: Indicates whether the selection is new or continuing from a previous selection +- `name`: Event name identifier + +**Example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### textSelectionEnd + +Triggered when the selection operation completes. The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselectionend) event triggers after the user completes a text selection. Use it to capture the selected text content, enable context-sensitive options, or send selection data to your application backend for processing. + +Event arguments (`TextSelectionEndEventArgs`): +- `pageNumber`: Page where the selection ended (1-based indexing) +- `bounds`: Bounding rectangles defining the geometric region of the selected text +- `selectedText`: The full text extracted from the selection range +- `isSelectionCopied`: Boolean indicating whether the user copied the selection to clipboard +- `name`: Event name identifier + +**Example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## See also + +- [Toggle text selection](./toggle-text-selection) +- [Vue PDF Viewer events](../events) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/textselection.md b/Document-Processing/PDF/PDF-Viewer/vue/textselection.md deleted file mode 100644 index d868a4a176..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/textselection.md +++ /dev/null @@ -1,459 +0,0 @@ ---- -layout: post -title: Text selection in Vue PDF Viewer | Syncfusion -description: Learn how to configure text selection, react to selection events, and manage copy workflows in the Syncfusion Vue PDF Viewer component. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- -# Text selection in Vue PDF Viewer - -The text selection feature allows users to highlight and copy content from PDF documents directly in the viewer interface. The TextSelection module is enabled by default, enabling interactive selection and copy operations. You can also programmatically control selection behavior and respond to selection events to customize the user experience. - -## Enable or disable text selection - -Control text selection behavior with the `enableTextSelection` property. By default, text selection is enabled allowing users to select and copy text. Set to `false` to restrict user interactions: - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## Respond to text selection events - -The PDF Viewer fires selection events at key moments during the user's interaction with text, enabling you to build responsive workflows such as showing copy confirmations, tracking selections for audit trails, or updating related UI elements. - -### textSelectionStart - -The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionstart) event fires when a user begins selecting text. Use it to track selection initiation, disable conflicting UI controls, or log analytics about user interaction patterns. - -Event arguments (`TextSelectionStartEventArgs`): -- `pageNumber`: Zero-indexed page where selection started -- `bounds`: Bounding rectangle of the initial selection point -- `selectionBehavior`: Indicates whether the selection is new or continuing from a previous selection -- `name`: Event name ("textSelectionStart") - -{% tabs %} -{% highlight html tabtitle="Composition API" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API" %} - - - - - -{% endhighlight %} -{% endtabs %} - -### textSelectionEnd - -The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionend) event triggers after the user completes a text selection. Use it to capture the selected text content, enable context-sensitive options (e.g., "Add to notes" button), or send selection data to your application backend for processing. - -Event arguments (`TextSelectionEndEventArgs`): -- `pageNumber`: Zero-indexed page where selection ended -- `bounds`: Bounding rectangle(s) of the completed selection -- `selectedText`: The actual text content that was selected (plain text string) -- `isSelectionCopied`: Boolean indicating whether the user copied the selection to clipboard -- `name`: Event name ("textSelectionEnd") - -{% tabs %} -{% highlight html tabtitle="Composition API" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## See also - -- [Text search](./text-search) -- [Interaction modes](./interaction-mode) -- [Toolbar items](./toolbar)