- Create PDF Viewer Service in ASPNET MVC
- Create PDF Viewer Service in ASPNET Core diff --git a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md index a67d2a5e4..345642450 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in Angular The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md index 6323a45e0..9be77ea98 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md @@ -4,11 +4,10 @@ title: Form Field Events in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about form field event in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Form Field Events -publishingplatform: ASP.NET Core documentation: ug --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in ASP.NET CORE The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: @@ -114,7 +113,7 @@ The [formFieldClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej ## formFieldDoubleClick event -The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. +The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -156,7 +155,7 @@ The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfus ## formFieldFocusOut event -The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. +The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -198,7 +197,7 @@ The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion ## formFieldMouseLeave event -The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. +The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -240,7 +239,7 @@ The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusi ## formFieldMouseOver event -The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. +The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -286,7 +285,7 @@ The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusio ## formFieldMove event -The [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. +The [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -332,7 +331,7 @@ The [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2 ## formFieldPropertiesChange event -The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. +The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -393,7 +392,7 @@ The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/sy ## formFieldRemove event -The [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed. +The [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -435,7 +434,7 @@ The [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.e ## formFieldResize event -The [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized. +The [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -481,7 +480,7 @@ The [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.e ## formFieldSelect event -The [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. +The [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -523,7 +522,7 @@ The [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.e ## formFieldUnselect event -The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. +The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -565,7 +564,7 @@ The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion ## validateFormFields event -The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. +The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md index 0a54cedae..6eb8d0ced 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md @@ -1,14 +1,13 @@ --- layout: post -title: Add Save Button in Built-In Toolbar | Syncfusion +title: Add Save Button in Toolbar ASP.NET Core | Syncfusion description: Learn here all about adding save button in built-in Toolbar in Syncfusion ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET Core documentation: ug --- -# Add Save Button in Built-In toolbar +# Add Save Button in Built-In toolbar in ASP.NET Core PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md index 8dc096f03..4658bce2b 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md @@ -4,11 +4,10 @@ title: Form Field Events in EJ2 ASP.NET MVC PDF Viewer | Syncfusion description: Learn here all about different form field event in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Form Field Events -publishingplatform: ASP.NET MVC documentation: ug --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in ASP.NET MVC The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: @@ -100,7 +99,7 @@ The [formFieldClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2 ## formFieldDoubleClick event -The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. +The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -135,7 +134,7 @@ The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusi ## formFieldFocusOut event -The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. +The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -170,7 +169,7 @@ The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion. ## formFieldMouseLeave event -The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. +The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -205,7 +204,7 @@ The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusio ## formFieldMouseOver event -The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. +The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -245,7 +244,7 @@ The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion ## formFieldMove event -The [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. +The [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -285,7 +284,7 @@ The [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2. ## formFieldPropertiesChange event -The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. +The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -435,7 +434,7 @@ The [formFieldResize](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej ## formFieldSelect event -The [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. +The [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -471,7 +470,7 @@ The [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej ## formFieldUnselect event -The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. +The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -507,7 +506,7 @@ The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion. ## validateFormFields event -The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. +The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. {% tabs %} {% highlight html tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md index 8162303cb..8f49ed1fd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md @@ -4,12 +4,11 @@ title: User interaction in Javascript Pdfviewer control | Syncfusion description: Learn here all about Create with user interface interaction in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. platform: document-processing control: Create with user interface interaction -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Create with user interface interaction +# Create with user interface interaction for JavaScript The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md index 64f800d72..c6345afbe 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md @@ -4,12 +4,11 @@ title: Form Field Events in Javascript Pdfviewer control | Syncfusion description: Learn here all about different form field in Syncfusion Javascript Pdfviewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Form Field Events -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in JavaScript The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md index 05a8aa185..63240a13d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md @@ -4,12 +4,11 @@ title: Add Save button in Javascript Pdfviewer control | Syncfusion description: Learn here all about How to add save button in Toolbar in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. platform: document-processing control: Toolbar -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Add Save button in Built-In Toolbar +# Add Save button in Built-In Toolbar in JavaScript PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md index bf4f9699f..f84c242e4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md @@ -1,19 +1,18 @@ --- layout: post -title: Accessibility in Typescript Pdfviewer control | Syncfusion -description: Learn here all about accessibility in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Accessibility in TypeScript PDF Viewer | Syncfusion +description: Learn about accessibility in the Syncfusion TypeScript PDF Viewer, including compliance with WCAG 2.2, Section 508, ADA and keyboard navigation support. platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer components +# Accessibility in Syncfusion PDF Viewer control TypeScript -The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The PDF Viewer component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the PDF Viewer component is outlined below. +The accessibility compliance for the PDF Viewer component is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,29 +38,31 @@ The accessibility compliance for the PDF Viewer component is outlined below.
- The component does not meet the requirement.Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationAdd: function (args: any) {
+ console.log('Annotation added with ID: ' + args.annotationId);
+ console.log('Annotation type: ' + args.annotationType);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationDoubleClick
+
+The [annotationDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationdoubleclickevent) event is triggered when an annotation is double-clicked.
+
+#### Event Arguments
+
+For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationDoubleClickEventArgs/).
+
+The following example illustrates how to handle the `annotationDoubleClick` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationDoubleClick: function (args: any) {
+ console.log('Annotation double-clicked on page: ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationMouseLeave
+
+The [annotationMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmouseleaveevent) event is triggered when the user's mouse pointer moves away from an annotation object.
+
+#### Event Arguments
+
+For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/).
+
+The following example illustrates how to handle the `annotationMouseLeave` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationMouseLeave: function (args: any) {
+ console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationMouseover
+
+The [annotationMouseover](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object.
+
+#### Event Arguments
+
+For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMouseOverEventArgs/).
+
+The following example illustrates how to handle the `annotationMouseover` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationMouseover: function (args: any) {
+ console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationMove
+
+The [annotationMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document.
+
+#### Event Arguments
+
+For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMoveEventArgs/).
+
+The following example illustrates how to handle the `annotationMove` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationMove: function (args: any) {
+ console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationMoving
+
+The [annotationMoving](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmovingevent) event is triggered while an annotation is being moved.
+
+#### Event Arguments
+
+For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMovingEventArgs/).
+
+The following example illustrates how to handle the `annotationMoving` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationMoving: function (args: any) {
+ console.log('Annotation is being moved. Current Action: ' + args.currentPosition);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationPropertiesChange
+
+The [annotationPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page.
+
+#### Event Arguments
+
+For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`.
+
+The following example illustrates how to handle the `annotationPropertiesChange` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationPropertiesChange: function (args: any) {
+ console.log('Annotation properties changed for ID: ' + args.annotationId);
+ console.log('isThicknessChanged: ' + args.isThicknessChanged);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationRemove
+
+The [annotationRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page.
+
+#### Event Arguments
+
+For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`.
+
+The following example illustrates how to handle the `annotationRemove` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationRemove: function (args: any) {
+ console.log('Annotation removed with ID: ' + args.annotationId);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationResize
+
+The [annotationResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page.
+
+#### Event Arguments
+
+For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationResizeEventArgs/).
+
+The following example illustrates how to handle the `annotationResize` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationResize: function (args: any) {
+ console.log('Annotation resized. ID: ' + args.annotationId);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationSelect
+
+The [annotationSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page.
+
+#### Event Arguments
+
+For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationSelectEventArgs/).
+
+The following example illustrates how to handle the `annotationSelect` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationSelect: (args: any) => {
+ console.log('Annotation selected with ID: ' + args.annotationId);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### annotationUnselect
+
+The [annotationUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page.
+
+#### Event Arguments
+
+For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationUnSelectEventArgs/).
+
+The following example illustrates how to handle the `annotationUnselect` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ annotationUnselect: function (args: any) {
+ console.log('Annotation unselected with ID: ' + args.annotationId);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### beforeAddFreeText
+
+The [beforeAddFreeText](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation.
+
+#### Event Arguments
+
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+
+The following example illustrates how to handle the `beforeAddFreeText` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ beforeAddFreeText: function (args: any) {
+ console.log('Before adding free text on page: ' + args.pageIndex);
+ // Set args.cancel to true to prevent adding the free text annotation
+ // args.cancel = true;
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+## Signature-related events
+
+### addSignature
+
+The [addSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#addsignatureevent) event is triggered when a signature is added to a page of a PDF document.
+
+#### Event Arguments
+
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `addSignature` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ addSignature: function (args: any) {
+ console.log('Signature added to page: ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### removeSignature
+
+The [removeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document.
+
+#### Event Arguments
+
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `removeSignature` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ removeSignature: function (args: any) {
+ console.log('Signature removed from page: ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### resizeSignature
+
+The [resizeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document.
+
+#### Event Arguments
+
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+
+The following example illustrates how to handle the `resizeSignature` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ resizeSignature: function (args: any) {
+ console.log('Signature resized on page ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### signaturePropertiesChange
+
+The [signaturePropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document.
+
+#### Event Arguments
+
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+
+The following example illustrates how to handle the `signaturePropertiesChange` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ signaturePropertiesChange: function (args: any) {
+ console.log('Signature properties changed on page ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### signatureSelect
+
+The [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event is triggered when signature is selected over the page of the PDF document.
+
+#### Event Arguments
+
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureSelect` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ signatureSelect: function (args: any) {
+ console.log('Signature selected on page ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
+
+### signatureUnselect
+
+The [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document.
+
+#### Event Arguments
+
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureUnselect` event.
+
+```html
+
+
+
+
+ Loading....
+
+
+
+
+
+```
+
+```typescript
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, FormFieldAddArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
+
+let viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ signatureUnselect: function (args: any) {
+ console.log('Signature unselected on page ' + args.pageIndex);
+ }
+});
+viewer.appendTo('#pdfViewer');
+```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md
index 88be1e40d..66596a462 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md
@@ -1,123 +1,122 @@
---
layout: post
-title: Annotations in mobile view in Typescript Pdfviewer control | Syncfusion
-description: Learn here all about Annotations in mobile view in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Annotations mobileView in TypeScript PDF Viewer control | Syncfusion
+description: Learn how to use annotations in mobile view with the Syncfusion TypeScript PDF Viewer (Essential JS 2).
platform: document-processing
-control: Annotations in mobile view
-publishingplatform: Typescript
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Annotations in mobile view in Typescript Pdfviewer control
+# Annotations in mobile view in TypeScript PDF Viewer control
-## To Open the Annotation Toolbar
+## Open the annotation toolbar
-**Step 1:** To enable the annotation toolbar, click the editAnnotation toolbar.
+**Step 1:** Click Edit Annotation on the toolbar to enable the annotation toolbar.
-
+
-**Step 2:** After enabling the annotation toolbar.
+**Step 2:** The annotation toolbar appears below the main toolbar.
-
+
-## To add sticky notes annotation
+## Add sticky note annotations
-**Step 1:** click sticky notes icon and then click in the page where you want to add this.
+**Step 1:** Click the Sticky Notes icon, then tap the page where the note should be placed.
-
+
-**Step 2:** Click in the page to add the sticky notes annotation.
+**Step 2:** Tap the page to add the sticky note annotation.
-
+
-## To add text markup annotation
+## Add text markup annotations
-**Step 1:** click any one of the text markup icon, then select the text you want to mark, then touch the selected text to apply the markup annotation.
+**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup.
-
+
-**Step 2:** Add the text markup annotation in the PDF page
+**Step 2:** The text markup annotation is applied to the selected text.
-
+
-## To add shape and measure annotations
+## Add shape and measurement annotations
-**Step 1:** click the shape/measure icon in the toolbar. It will show the toolbar with shape/measure types.
+**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar.
-
+
-**Step 2:** Click the shape/measure type and add annotation to the page.
+**Step 2:** Choose a shape or measurement type, then draw it on the page.
-
+
-**Step 3:** Add the annotation in the PDF page.
+**Step 3:** The annotation appears on the PDF page.
-
+
-## To add the stamp annotation
+## Add stamp annotations
-**Step 1:** click the stamp icon and select the stamp type from the menu items.
+**Step 1:** Tap the Stamp icon and select a stamp type from the menu.
-
+
-**Step 2:** Add the stamp annotation in the page.
+**Step 2:** Tap the page to place the stamp annotation.
-
+
-## To add signature
+## Add signature annotations
-**Step 1:** click the signature icon. This will open the signature canvas to draw signature. After drawn the sign, should click the create button and touch the viewer to add the signature.
+**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it.
-
+
-**Step 2:** Add the signature in the page.
+**Step 2:** The signature is added to the page.
-
+
-## To add ink annotation
+## Add ink annotations
-**Step 1:** Click the ink icon tool and draw in the page.
+**Step 1:** Tap the Ink tool and draw on the page.
-
+
-**Step 2:** Add the ink annotation in the page.
+**Step 2:** The ink annotation appears on the page.
-
+
-## Change Annotation Change (Before adding)
+## Change annotation properties (before adding)
-**Step 1:** We can change the properties before adding the annotation.
+**Step 1:** Change properties before placing the annotation.
-**Step 2:** Click the annotation icon, this will show the toolbar with corresponding properties. We can change the property and add the annotation in the page.
+**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page.
-
+
-## Change Annotation Property (After Adding)
+## Change annotation properties (after adding)
-**Step 1:** We can change the annotation property after adding the annotation.
+**Step 1:** Change annotation properties after adding the annotation.
-**Step 2:** Select the added annotation, it will show the corresponding property tool. This will help us to change the property of the annotation.
+**Step 2:** Select the annotation to show the property toolbar, then adjust the properties.
-
+
-## Delete Annotation
+## Delete annotations
-**Step 1:** To delete the annotation, first select the annotation, it will show the property toolbar. In the property tool there is an icon to delete the annotation.
+**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it.
-
+
-## Open Comment Panel
+## Open the comment panel
-**Step 1:** We can open the comment panel through the icon in the property tool or through the annotation toolbar.
+**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar.
-
+
-**Step 1:** After opening the comment panel
+**Step 2:** The comment panel appears.
-
+
## Close the comment panel
-**Step 1:** To close the comment panel, click the close button.
+**Step 1:** Tap the Close button to close the comment panel.
-
\ No newline at end of file
+
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md
index 58aeed5e6..13e97f838 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md
@@ -1,17 +1,16 @@
---
layout: post
-title: Comments in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Comments in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Comments in TypeScript PDF Viewer control | Syncfusion
+description: Learn about comments, replies, and status in the Syncfusion TypeScript PDF Viewer control (Essential JS 2).
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Comments in Typescript PDF Viewer control
+# Comments in TypeScript PDF Viewer control
-The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
* Shape annotation
* Stamp annotation
@@ -21,11 +20,11 @@ The PDF Viewer control provides options to add, edit, and delete the comments to
* Free text annotation
* Ink annotation
-
+
## Adding a comment to the annotation
-Annotation comment, comment replies, and status can be added to the PDF document using the comment panel.
+Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
### Comment panel
@@ -34,87 +33,87 @@ Annotation comments can be added to the PDF using the comment panel. The comment
1. Using the annotation menu
* Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. A comment panel will appear.
+ * Click the Comment Panel button. The comment panel opens.
2. Using Context menu
- * Select annotation in the PDF document and right-click it.
- * Select the comment option in the context menu that appears.
+ * Select the annotation in the PDF document and right-click it.
+ * Select Comment from the context menu.
3. Using the Mouse click
- * Select annotation in the PDF document and double click it, a comment panel will appear.
+ * Select the annotation in the PDF document and double-click it. The comment panel opens.
-If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel.
+If the comment panel is already open, select the annotation and add comments using the panel.
### Adding comments
-* Select annotation in the PDF document and click it.
-* The selected annotation comment container is highlighted in the comment panel.
-* Now, you can add comment and comment replies using the comment panel.
+* Select the annotation in the PDF document.
+* The corresponding comment thread is highlighted in the comment panel.
+* Add comments and replies using the comment panel.
-
+
### Adding Comment Replies
-* The PDF Viewer control provides an option to add multiple replies to the comment.
-* After adding the annotation comment, you can add a reply to the comment.
+* Multiple replies can be added to a comment.
+* After adding a comment, add replies as needed.
### Adding Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
-
+
### Editing the comments and comments replies of the annotations
-The comment, comment replies, and status of the annotation can be edited using the comment panel.
+Comments, replies, and status can be edited using the comment panel.
### Editing the Comment or Comment Replies
-The annotation comment and comment replies can be edited in the following ways:
+Edit comments and replies in the following ways:
1. Using the Context menu
- * Select the Annotation Comments in the comment panel.
- * Click the More options button showing in the Comments or reply container.
- * Select the Edit option in the context menu that appears.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Click More options in the comment or reply container.
+ * Select Edit from the context menu.
+ * An editable text box appears. Change the content of the comment or reply.
2. Using the Mouse Click
- * Select the annotation comments in the comment panel.
- * Double click the comment or comment reply content.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Double-click the comment or reply content.
+ * An editable text box appears. Change the content of the comment or reply.
### Editing Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
-* Status ‘None’ is the default state. If the status is set to ‘None,’ the comments or reply does not appear.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
+* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible.
-
+
### Delete Comment or Comment Replies
-* Select the Annotation Comments in the comment panel.
-* Click the more options button shown in the Comments or reply container.
-* Select the Delete option in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Delete from the context menu.
-
+
->The annotation will be deleted on deleting the comment using comment panel.
+>Deleting the root comment from the comment panel also deletes the associated annotation.
## How to check the comments added by the user
-The comments added to the PDF document can be viewed by using the `comments` property of the annotation.
+Comments added to the PDF document can be read using the annotation's `comments` property.
-Refer to the following code to check the comments added in the PDF document using a button click event.
+The following example logs comments in response to a button click.
```html
@@ -129,7 +128,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md
index 152e43cfd..600e6fdac 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md
@@ -1,31 +1,30 @@
---
layout: post
-title: Free text annotation in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Free text annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Free text annotation in TypeScript PDF Viewer control | Syncfusion
+description: Learn about free text annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Free text annotation in Typescript PDF Viewer control
+# Free text annotation in TypeScript PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the free text annotations.
+The PDF Viewer control provides options to add, edit, and delete free text annotations.
-## Adding a free text annotation to the PDF document
+## Add a free text annotation to the PDF document
-The Free text annotations can be added to the PDF document using the annotation toolbar.
+Free text annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode.
-* You can add the text over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Free Text Annotation** button to enable free text annotation mode.
+* Add text anywhere on the pages of the PDF document.
-In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode.
-
+
-Refer to the following code sample to switch to the Free Text annotation mode using a button click.
+The following example switches to free text annotation mode using a button click.
```html
@@ -40,7 +39,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation');
@@ -76,11 +75,11 @@ if (addFreeTextAnnotationButton) {
{% endhighlight %}
{% endtabs %}
-## Adding a free text annotation programatically to the PDF document
+## Add a free text annotation programmatically to the PDF document
-The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here is an example of how you can use the **addAnnotation()** method to move the free text annotation programmatically:
+Here is an example of adding a free text annotation programmatically using addAnnotation():
```html
@@ -95,7 +94,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -151,11 +150,11 @@ if (addFreeTextAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Change the content of an existing Free text annotation programmatically
+## Change the content of an existing free text annotation programmatically
-To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To change the content of an existing free text annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
+Here is an example of changing the content of a free text annotation using editAnnotation():
```html
@@ -169,7 +168,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -216,71 +215,71 @@ if (changeContent) {
{% endhighlight %}
{% endtabs %}
-N> Please note that the current version of the PDF Viewer does not offer the functionality to edit existing text within a PDF document. However, you can add new free text annotations and modify existing free text annotations within the document.
+N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document.
-## Editing the properties of free text annotation
+## Edit the properties of free text annotations
-The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing font family
+### Edit font family
-The font family of the annotation can be edited by selecting the desired font in the Font Family tool.
+Edit the font family by selecting a font in the Font Family tool.
-
+
-### Editing font size
+### Edit font size
-The font size of the annotation can be edited by selecting the desired size in the Font Size tool.
+Edit the font size by selecting a size in the Font Size tool.
-
+
-### Editing font color
+### Edit font color
-The font color of the annotation can be edited using the color palette provided in the Font Color tool.
+Edit the font color using the color palette in the Font Color tool.
-
+
-### Editing the text alignment
+### Edit text alignment
-The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool.
+Align text by selecting an option from the Text Align tool.
-
+
-### Editing text styles
+### Edit text styles
-The style of the text in the annotation can be edited by selecting the desired styles in the drop-down pop-up in the Font Style tool.
+Edit text styles by selecting options in the Font Style tool.
-
+
-### Editing fill color
+### Edit fill color
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Edit the fill color using the color palette in the Edit Color tool.
-
+
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The border thickness of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
+
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the free text annotation can be set before creating the control using the FreeTextSettings.
+Default properties for free text annotations can be set before creating the control using FreeTextSettings.
-After editing the default values, they will be changed to the selected values. Refer to the following code sample to set the default free text annotation settings.
+After changing default values, the selected values are applied. The following example sets default free text annotation settings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -291,7 +290,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' };
pdfviewer.appendTo('#PdfViewer');
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md
index b9fb6afbc..b1305a3b4 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md
@@ -1,31 +1,30 @@
---
layout: post
-title: Ink annotation in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Ink annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Ink annotation in TypeScript PDF Viewer control | Syncfusion
+description: Learn about ink annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Ink annotation in Typescript PDF Viewer control
+# Ink annotation in TypeScript PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the ink annotations.
+The PDF Viewer control provides options to add, edit, and delete ink annotations.
-
+
-## Adding an ink annotation to the PDF document
+## Add an ink annotation to the PDF document
-The ink annotations can be added to the PDF document using the annotation toolbar.
+Ink annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Draw Ink** button in the annotation toolbar. It enables the ink annotation mode.
-* You can draw anything over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Draw Ink** button to enable ink annotation mode.
+* Draw on any page of the PDF document.
-
+
-Refer to the following code sample to switch to the ink annotation mode.
+The following example switches to ink annotation mode.
```html
@@ -36,7 +35,7 @@ Refer to the following code sample to switch to the ink annotation mode.
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
+ resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
});
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
@@ -72,11 +71,11 @@ if (addInkAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Adding a Ink annotation programatically to the PDF document
+## Add an ink annotation programmatically to the PDF document
-The PDF Viewer library allows you to add the Ink annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here is an example of how you can use the **addAnnotation()** method to move the Ink annotation programmatically:
+Here is an example of adding an ink annotation programmatically using addAnnotation():
```html
@@ -91,7 +90,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -138,11 +137,11 @@ if (addInkAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Edit the existing Ink annotation programmatically
+## Edit an existing ink annotation programmatically
-To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing ink annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
```html
@@ -157,7 +156,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -216,33 +215,33 @@ if (editInkAnnotation) {
{% endtabs %}
-## Editing the properties of the ink annotation
+## Edit the properties of ink annotations
-The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the ink annotation can be set before creating the control using the InkAnnotationSettings.
+Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
-After editing the default values, they will be changed to the selected values.
+After changing default values, the selected values are applied.
Refer to the following code sample to set the default ink annotation settings.
{% tabs %}
@@ -250,7 +249,7 @@ Refer to the following code sample to set the default ink annotation settings.
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
+ resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
inkAnnotationSettings : {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}
});
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md
index 4e25e41d3..b0bdf6c63 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md
@@ -1,20 +1,19 @@
---
layout: post
-title: Line Angle Constraints in TypeScript PdfViewer | Syncfusion
-description: Learn here all about Line Angle Constraints in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Line angle constraints in TypeScript PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically.
platform: document-processing
-control: Line Angle Constraints
-publishingplatform: Typescript
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Line Angle Constraints in TypeScript PDF Viewer
+# Line angle constraints in TypeScript PDF Viewer
The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.
-## Enabling Line Angle Constraints
-To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.
+## Enable line angle constraints
+Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles.
The following code demonstrates how to enable line angle constraints:
@@ -45,50 +44,49 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base
- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
-- Desktop support: Hold **Shift** while drawing to activate constraints
+- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping)
- Real-time visual feedback showing angle snapping behavior
### restrictLineAngleTo
-The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.
+Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
-**Angle Snapping Rules:**
+Angle snapping rules:
- The initial drawing direction is treated as the 0° reference point
- Snapped angles are calculated based on the increment
- If the increment doesn’t divide 360 evenly, angles reset after 360°
-**Examples:**
+Examples:
- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°
-## Working with Constrained Annotations
+## Work with constrained annotations
### Drawing Behavior
When line angle constraints are enabled:
-**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
-**Angle Snapping:** The line snaps to the nearest allowed angle.
-**Visual Feedback:** Snapped angle is shown in real time.
-**Completion:** Release to complete the annotation.
+- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
+- The segment snaps to the nearest allowed angle.
+- A visual indicator reflects snapping in real time.
+- Release to complete the annotation.
### Keyboard Shortcuts
-**Desktop Platforms:**
-
-**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.
+Desktop platforms:
+- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.
### Selector-Based Modifications
When modifying existing line annotations using selectors:
- Constraints apply based on the original line direction.
-- The reference angle (0°) is determined by the lines current orientation.
-- Only lines and arrows support constraint snapping during modification.
-- Adjustments snap to the configured angle increment relative to the original direction.
+- The reference angle (0°) is determined by the line’s current orientation.
+- Constraint snapping during modification is supported for Line and Arrow.
+- Adjustments snap to the configured angle increment.
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
+[View a sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
-N> You can refer to our [TypeScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [TypeScript PDF Viewer example](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) to know how to render and configure the PDF Viewer.
+N> Refer to the TypeScript PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) for feature highlights. Explore the [TypeScript PDF Viewer examples](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) to learn how to render and configure the PDF Viewer.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md
index 676317e5f..fc1f8cc3a 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md
@@ -1,17 +1,16 @@
---
layout: post
-title: Measurement annotation in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Measurement annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Measurement annotation in TypeScript PDF Viewer control | Syncfusion
+description: Learn about measurement annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Measurement annotation in Typescript PDF Viewer control
+# Measurement annotation in TypeScript PDF Viewer control
-The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are:
+The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
* Distance
* Perimeter
@@ -19,22 +18,22 @@ The PDF Viewer provides the options to add measurement annotations. You can meas
* Radius
* Volume
-
+
## Adding measurement annotations to the PDF document
The measurement annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Measurement Annotation** dropdown button. A dropdown pop-up will appear and shows the measurement annotations to be added.
-* Select the measurement type to be added to the page in the dropdown pop-up. It enables the selected measurement annotation mode.
-* You can measure and add the annotation over the pages of the PDF document.
+* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types.
+* Select a measurement type to enable its annotation mode.
+* Measure and add annotations on the pages of the PDF document.
-In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.
-Refer to the following code snippet to switch to distance annotation mode.
+The following example switches to distance annotation mode.
```html
@@ -48,7 +47,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let distanceMode = document.getElementById('distanceMode');
@@ -84,11 +83,11 @@ if (distanceMode) {
{% endhighlight %}
{% endtabs %}
-## Adding a measurement annotation to the PDF document Programmatically
+## Add a measurement annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically:
+Here is an example showing how to add measurement annotations programmatically using addAnnotation():
```html
@@ -109,7 +108,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -264,11 +263,11 @@ if (addVolumeAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Edit the existing measurement annotation programmatically
+## Edit an existing measurement annotation programmatically
-To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing measurement annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
```html
@@ -287,7 +286,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let editDistanceAnnotation = document.getElementById('editDistanceAnnotation');
@@ -475,43 +474,43 @@ if (editVolumeAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of measurement annotation
+## Edit the properties of measurement annotations
-The fill color, stroke color, thickness, and opacity of the measurement annotation can be edited using the Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing fill color
+### Edit fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-### Editing stroke color
+### Edit stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool.
+Edit border thickness using the range slider provided in the Edit Thickness tool.
-### Editing opacity
+### Edit opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-### Editing the line properties
+### Edit the line properties
-The properties of the line shapes such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations.
+Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu.
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the shape annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings and volumeSettings.
+Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings.
Refer to the following code snippet to set the default annotation settings.
@@ -524,8 +523,8 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-pdfviewer. =
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+
pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
@@ -538,7 +537,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer. =
+
pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
@@ -553,7 +552,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.distanceSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'};
pdfviewer.perimeterSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'};
pdfviewer.areaSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'};
@@ -611,7 +610,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'};
pdfviewer.appendTo('#PdfViewer');
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md
index a53615fc3..2074d2489 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md
@@ -1,17 +1,16 @@
---
layout: post
-title: Shape annotation in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Shape annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Shape annotation in TypeScript PDF Viewer control | Syncfusion
+description: Learn about shape annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Shape annotation in Typescript PDF Viewer control
+# Shape annotation in TypeScript PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are:
+The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are:
* Line
* Arrow
@@ -19,20 +18,20 @@ The PDF Viewer control provides the options to add, edit, and delete the shape a
* Circle
* Polygon
-
+
## Adding a shape annotation to the PDF document
Shape annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Shape Annotation** drop-down button. A drop-down pop-up will appear and shows the shape annotations to be added.
-* Select the shape types to be added to the page in the drop-down pop-up. It enables the selected shape annotation mode.
-* You can add the shapes over the pages of the PDF document.
+* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types.
+* Select a shape type to enable its annotation mode.
+* Draw the shape on the pages of the PDF document.
-N> While you're in the pan mode, for navigating through the document, and you click on the shape annotation button to add the shape annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface.
+N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience.
-
+
Refer to the following code sample to switch to the circle annotation mode.
@@ -49,7 +48,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let circleAnnotationButton = document.getElementById('circleAnnotationButton');
@@ -85,11 +84,11 @@ if (circleAnnotationButton) {
{% endhighlight %}
{% endtabs %}
-## Adding a Shape annotation to the PDF document Programmatically
+## Add a shape annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a Shape annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a Shape annotation programmatically:
+Here is an example showing how to add shape annotations programmatically using addAnnotation():
```html
@@ -111,7 +110,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -268,11 +267,11 @@ if (addPolygonAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Edit the existing shape annotation programmatically
+## Edit an existing shape annotation programmatically
-To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing shape annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
```html
@@ -291,7 +290,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
@@ -479,43 +478,43 @@ if (editPolygonAnnotation) {
## Editing the properties of the shape annotation
-The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
### Editing fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
+
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
+
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
+
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
+
### Editing the line properties
-The properties of the line shapes such as line and arrow annotations can be edited using the Line Properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the line and arrow annotations.
+Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
Refer to the following code sample to set the default annotation settings.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
+Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -526,7 +525,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.lineSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'};
pdfviewer.arrowSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'};
pdfviewer.rectangleSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'};
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md
index 48eb41820..fdb3465c5 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md
@@ -1,34 +1,33 @@
---
layout: post
-title: Handwritten signature in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Handwritten signature in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Handwritten signature in TypeScript PDF Viewer control | Syncfusion
+description: Learn about handwritten signatures in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, enable/disable, and edit properties.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Handwritten signature Typescript PDF Viewer control
+# Handwritten signature in TypeScript PDF Viewer control
-The PDF Viewer control supports adding handwritten signatures to a PDF document. The handwritten signature reduces the paper work of reviewing the content and verifies it digitally.
+The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification.
## Adding a handwritten signature to the PDF document
The handwritten signature can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel will appear.
+* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears.
-
+
-* Draw the signature in the signature panel.
+* Draw the signature in the panel.
-
+
-* Then click **Create** button and move the signature using the mouse and place them in the desired location.
+* Click **Create**, move the signature, and place it at the desired location.
-
+
Refer to the following code sample to switch to the handwritten signature mode programmatically.
@@ -44,7 +43,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let handWrittenSignature = document.getElementById('handWrittenSignature');
@@ -80,9 +79,9 @@ if (handWrittenSignature) {
{% endtabs %}
-## How to enable the handwritten signature
+## Enable the handwritten signature
-The following code snippet describes how to enable the handwritten signature in PDF Viewer. When the value is set to `false` it disables the handwritten signature.
+The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -93,7 +92,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.enableHandwrittenSignature = false
pdfviewer.appendTo('#PdfViewer');
@@ -115,11 +114,11 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}
-## Adding Handwritten signature programatically to the PDF document
+## Add a handwritten signature programmatically to the PDF document
With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here is an example of how you can use the **addAnnotation()** method to add the Handwritten signature programmatically
+Here is an example of adding a handwritten signature programmatically using addAnnotation():
```html
@@ -134,7 +133,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let addHandwrittenSignature = document.getElementById('addHandwrittenSignature');
@@ -191,7 +190,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let addHandwrittenSignature = document.getElementById('addHandwrittenSignature');
@@ -244,24 +243,24 @@ if(addHandwrittenSignature){
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
-## Editing the properties of handwritten signature
+## Edit the properties of handwritten signatures
-The stroke color, border thickness, and opacity of the handwritten signature can be edited using the edit stroke color tool, edit thickness tool, and edit opacity tool in the annotation toolbar.
+Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
\ No newline at end of file
+
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md
index 7cc4e55b1..352a3e175 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md
@@ -1,17 +1,16 @@
---
layout: post
-title: Stamp annotation in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Stamp annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Stamp annotation in TypeScript PDF Viewer control | Syncfusion
+description: Learn about stamp annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Stamp annotation in Typescript PDF Viewer control
+# Stamp annotation in TypeScript PDF Viewer control
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents:
* Dynamic
* Sign Here
@@ -20,24 +19,24 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol
-## Adding stamp annotations to the PDF document
+## Add stamp annotations to the PDF document
The stamp annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-* Select the annotation type to be added to the page in the pop-up.
+* Select a stamp type to enable its annotation mode.
-* You can add the annotation over the pages of the PDF document.
+* Place the stamp on the pages of the PDF document.
-N> While you're in the pan mode, for navigating through the document, and you click on the stamp annotation button to add the stamp annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface.
+N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience.
-Refer to the following code sample to switch to the stamp annotation mode.
+The following examples switch to stamp annotation modes.
```html
@@ -54,7 +53,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let dynamicStamp = document.getElementById('dynamicStamp');
@@ -145,23 +144,23 @@ if (standardBusinessStamp) {
{% endhighlight %}
{% endtabs %}
-## Adding custom stamp to the PDF document
+## Add a custom stamp to the PDF document
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
* Click the Custom Stamp button.
-* The file explorer dialog will appear, choose the image and then add the image to the PDF page.
+* In the file explorer dialog, choose an image and add it to the PDF page.
->The JPG and JPEG image format is only supported in the custom stamp annotations.
+>Only JPG and JPEG image formats are supported for custom stamp annotations.
-## Adding a Stamp annotation to the PDF document Programmatically
+## Add a stamp annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically:
+Here are examples showing how to add stamp annotations programmatically using addAnnotation():
```html
@@ -178,7 +177,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let dynamicStamp = document.getElementById('dynamicStamp');
@@ -312,11 +311,11 @@ if (customStamp) {
{% endhighlight %}
{% endtabs %}
-## Edit the existing sticky note annotation programmatically
+## Edit an existing stamp annotation programmatically
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing stamp annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
```html
@@ -331,7 +330,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let editAnnotation = document.getElementById('editAnnotation');
@@ -383,12 +382,11 @@ if (editAnnotation) {
{% endhighlight %}
{% endtabs %}
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the stamp annotation can be set before creating the control using the StampSettings.
+Default properties for stamp annotations can be set before creating the control using StampSettings.
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values.
-Refer to the following code sample to set the default sticky note annotation settings.
+After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -399,7 +397,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.stampSettings = {opacity: 0.3, author: 'Guest User'}
pdfviewer.appendTo('#PdfViewer');
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md
index 9918d84d5..a9e05dda5 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md
@@ -1,44 +1,42 @@
---
layout: post
-title: Sticky notes in Typescript PDF Viewer control | Syncfusion
-description: Learn here all about Sticky notes in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Sticky notes in TypeScript PDF Viewer control | Syncfusion
+description: Learn about sticky note annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: PDF Viewer
-publishingplatform: Typescript
documentation: ug
domainurl: ##DomainURL##
---
-# Sticky notes in Typescript PDF Viewer control
+# Sticky notes in TypeScript PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
+The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
-## Adding a sticky note annotation to the PDF document
+## Add a sticky note annotation to the PDF document
Sticky note annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Comments** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the position where you want to add sticky note annotation in the PDF document.
-* Sticky note annotation will be added in the clicked positions.
+* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Click the position where the sticky note annotation should be added.
+* The sticky note annotation is added at the clicked position.
- Annotation comments can be added to the PDF document using the comment panel.
+Annotation comments can be added using the comment panel.
-* Select a Sticky note annotation in the PDF document and right-click it.
-* Select the Comment option in the context menu that appears.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
+* Select a sticky note annotation in the PDF document and right-click it.
+* Select Comment from the context menu.
+* Add comments, replies, and status using the comment panel.
-## Adding a sticky note annotation to the PDF document Programmatically
+## Add a sticky note annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically:
+Here is an example showing how to add a sticky note annotation programmatically using addAnnotation():
```html
@@ -53,7 +51,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let stickyNote = document.getElementById('stickyNote');
@@ -97,11 +95,11 @@ if (stickyNote) {
{% endhighlight %}
{% endtabs %}
-## Edit the existing sticky note annotation programmatically
+## Edit an existing sticky note annotation programmatically
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
```html
@@ -116,7 +114,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
let stickyNote = document.getElementById('stickyNote');
@@ -165,31 +163,31 @@ if (stickyNote) {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the sticky note annotation
+## Edit the properties of sticky note annotations
### Editing opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
### Editing comments
-The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.
+Comment text, replies, and status can be edited using the comment panel.
-* Open the comment panel using the Comment Panel button showing in the annotation toolbar.
+* Open the comment panel using the Comment Panel button in the annotation toolbar.
-You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
+Modify or delete comments or replies, and change status using the menu options in the comment panel.
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings.
+Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings.
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. Refer to the following code sample to set the default sticky note annotation settings.
+After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -200,7 +198,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.stickyNotesSettings = {author: 'Syncfusion'};
pdfviewer.appendTo('#PdfViewer');
@@ -220,9 +218,9 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}
-## Disabling sticky note annotations
+## Disable sticky note annotations
-The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows.
+The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -233,7 +231,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.enableStickyNotesAnnotation = false;
pdfviewer.appendTo('#PdfViewer');
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md
index 66cb992ca..075d2d54a 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md
@@ -1,40 +1,39 @@
---
layout: post
-title: Text markup annotation in Typescript Pdfviewer control | Syncfusion
-description: Learn here all about Text markup annotation in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Text markup annotation in TypeScript PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion TypeScript PDF Viewer.
platform: document-processing
-control: Text markup annotation
-publishingplatform: Typescript
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Text markup annotation in Typescript Pdfviewer control
+# Text markup annotation in TypeScript PDF Viewer
-The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, strikethrough and squiggly annotations in the PDF document.
+The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.
-## Highlight a text
+## Highlight text
-There are two ways to highlight a text in the PDF document:
+There are two ways to highlight text:
1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Highlight** option in the context menu that appears.
+* Select text in the PDF document and right-click it.
+* Select **Highlight** in the context menu.
2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Highlight** button in the annotation toolbar. It enables the highlight mode.
- * Select the text and the highlight annotation will be added.
- * You can also select the text and apply the highlight annotation using the **Highlight** button.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+* Select **Highlight** to enable highlight mode.
+* Select text to add the highlight annotation.
+* Alternatively, select text first and then click **Highlight**.
-In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text.
+When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
Refer to the following code snippet to switch to highlight mode.
@@ -48,7 +47,7 @@ PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailVie
let pdfviewer: PdfViewer = new PdfViewer({
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
});
pdfviewer.appendTo('#PdfViewer');
@@ -64,19 +63,10 @@ document.getElementById('set').addEventListener('click', ()=> {