Skip to content

Commit 84cf147

Browse files
Merge pull request #2264 from syncfusion-content/1009405-JSrevampHF
1009405: Modified the content revamp for the JavaScript PDF Viewer
2 parents b2f9768 + 6a82d66 commit 84cf147

168 files changed

Lines changed: 1576 additions & 1523 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/default-language.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Localization support in JavaScript PDF Viewer
11+
# Localization in the JavaScript PDF Viewer
1212

13-
The PDF Viewer fully supports localization, allowing all UI text, tooltips, and messages to be replaced with culture-specific strings so the interface matches users language and regional settings.
13+
The PDF Viewer supports localization of UI text, tooltips, and messages using culture-specific string collections so the interface matches users' language and regional settings.
1414

1515
![Default Locale](../../javascript-es6/images/locale-us.gif)
1616

17+
N> Change the viewer locale by setting the `locale` property in the viewer options during initialization or by assigning `pdfviewer.locale` before rendering.
18+
1719
## Default language (en-US)
1820

1921
By default, the PDF Viewer uses the en-US culture and requires no additional configuration.

Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/new-language.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Set a new language (localization) in JavaScript
11+
# Set a new language in the JavaScript PDF Viewer
1212

13-
You can localize the PDF Viewer UI by:
14-
- Registering localized strings for each culture using `L10n.load` at the application level
15-
- Setting the `locale` property of the `PdfViewer` instance to the desired culture
13+
Localize the PDF Viewer UI by:
14+
- Registering culture-specific strings with `L10n.load` at the application level
15+
- Setting the `locale` property on the `PdfViewer` instance to the desired culture
1616

1717
![German Locale](../../javascript-es6/images/locale-de.gif)
1818

19-
## Example Code-snippet to change language using Locale
19+
## Example: change language using `locale` and `L10n.load`
2020

2121
{% tabs %}
2222
{% highlight js tabtitle="Standalone" %}
@@ -308,7 +308,7 @@ ej.pdfviewer.PdfViewer.Inject(
308308
{% endhighlight %}
309309
{% endtabs %}
310310

311-
N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults.
311+
N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys that require overrides; missing keys fall back to the default `en-US` values.
312312

313313
## See Also
314314

Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/rtl-language-support.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,19 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# RTL Language Support in JavaScript PDF Viewer
1211

13-
RTL support in JavaScript PDF Viewer:
12+
# RTL language support in JavaScript PDF Viewer
1413

15-
- PDF Viewer component supports right-to-left layouts.
16-
- For RTL languages (Arabic, Hebrew, Persian), enable the [`enableRtl`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enablertl) property.
17-
- Load culture-specific strings globally using `L10n.load`.
18-
- Set the PdfViewer [`locale`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale) property to the target culture.
14+
Use RTL support to render the viewer interface for right-to-left languages.
15+
- Enable `enableRtl` to apply right-to-left layout.
16+
- Load culture-specific strings globally with `L10n.load`.
17+
- Set the `locale` property on the `PdfViewer` instance to the target culture.
1918

2019
![Arabic Localization](../../javascript-es6/images/locale-ar.gif)
2120

22-
## Example Code-snippet to Enable RTL with Arabic Localization
21+
## Example: enable RTL and provide Arabic localization
2322

24-
Use the below code-snippet to enable RTL for RTL Languages(Arabic, Hebrew, Persian)
23+
Use the example below to enable RTL for languages such as Arabic, Hebrew, and Persian.
2524

2625
{% tabs %}
2726
{% highlight js tabtitle="Standalone" %}
@@ -306,7 +305,8 @@ ej.pdfviewer.PdfViewer.Inject(
306305
{% endhighlight %}
307306
{% endtabs %}
308307

309-
N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults.
308+
309+
N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only keys that require overrides; missing keys fall back to the default `en-US` values.
310310

311311
[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples)
312312

Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ documentation: ug
99

1010
# Redaction in Mobile View in JavaScript (ES5) PdfViewer Component
1111

12-
The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
12+
The Redaction Tool enables permanent marking and removal of sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
1313

1414
![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png)
1515

16-
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
16+
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. The mobile layout activates automatically on small screens.
1717

1818
## Adding Redaction in Mobile View
1919

@@ -52,11 +52,10 @@ When you enter redaction mode in mobile view, a specialized redaction toolbar ap
5252

5353
### Redaction Annotation Tool
5454

55-
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
55+
The Redaction Annotation tool is the primary redaction feature that allows you to drawing redaction rectangles on specific content:
5656

5757
Function: Creates visual redaction annotations that mark content for permanent removal
58-
Usage:
59-
Touch and drag to draw rectangular redaction overlays on any content area.
58+
Usage: Touch and drag to draw rectangular redaction overlays on any content area.
6059

6160
Process:
6261
- Selected content appears with a customizable overlay (default black)
@@ -72,7 +71,7 @@ The Page Redaction tool enables batch redaction of entire pages based on specifi
7271
![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png)
7372

7473
Function: Redacts complete pages or page ranges with a single action
75-
Options Available:
74+
Options available:
7675
- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
7776
- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
7877
- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
@@ -90,7 +89,7 @@ The Redaction Properties tool allows customization of redaction appearance befor
9089
![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png)
9190

9291
Function: Customize the visual appearance of redaction overlays and text replacement
93-
Customizable Properties:
92+
Customizable properties:
9493
- Fill Color: Change the redaction overlay color (default: black)
9594
- Outline Color: Set outline color for redaction boxes (optional)
9695
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")

Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Redaction annotation in Javascript PDF Viewer | Syncfusion
4-
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer.
4+
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript(ES5) PDF Viewer.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
1010

1111
# Redaction in JavaScript (ES5) PdfViewer
1212

13-
Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.
13+
Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) enables marking regions or entire pages for redaction, customizing appearance, and permanently applying redaction them with a single action.
1414

1515
## Enable the redaction toolbar
1616

@@ -45,49 +45,47 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc
4545
pdfviewer.appendTo('#PdfViewer');
4646
```
4747

48-
N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
48+
N> Add the PdfViewer control to the JavaScript application and ensure the redaction feature is included in the installed package version. Once applied, redaction permanently removes the selected content.
4949

5050
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)
5151

5252
## Add Redaction Annotations
5353

54-
You can mark specific content for redaction using the toolbar or through code.
54+
Mark specific content for redaction using the toolbar or programmatically.
5555

56-
Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style fill color, border color, and opacity.
56+
Select the **Redaction tool** and draw over text or graphics to hide. Optionally add overlay text (for example, “Confidential”) and adjust style properties: fill color, border color, and opacity.
5757

5858
![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png)
5959

6060
## Delete Redaction Annotations
6161

62-
Redaction annotations can be removed easily:
62+
Remove redaction annotations using the toolbar or keyboard shortcuts:
6363

64-
- Click the **Delete** button on the toolbar, or
64+
- Click the **Delete** button on the toolbar, or
6565
- Select the annotation and press the **Delete** key.
6666

6767
![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png)
6868

6969
## Redact Entire Pages
7070

71-
The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically.
71+
The viewer supports redacting entire pages that contain sensitive information. Use the built-in dialog to select specific pages, page ranges, or all pages, or invoke the same behavior programmatically.
7272

7373
![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png)
7474

7575
## Apply Redaction
7676

77-
Once annotations are added, you can permanently apply them to the document. This action cannot be undone.
77+
After adding redaction annotations, permanently apply them to the document using the **Apply Redaction** toolbar button or the corresponding API method.
7878

79-
Use the **Apply Redaction** button on the toolbar or call the API method:
80-
81-
- The button is disabled until at least one redaction annotation exists.
82-
- It becomes active when redaction annotations are present.
79+
- The **Apply Redaction** button remains disabled until at least one redaction annotation exists.
80+
- The button becomes enabled when redaction annotations are present.
8381

8482
![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png)
8583

86-
A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.
84+
A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible action.
8785

8886
![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png)
8987

90-
N> After redaction is applied, the original content cannot be recovered.
88+
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
9189

9290
## Comment Support
9391

Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Programmatic support for redaction in JavaScript (ES5) PdfViewer
1111

12-
The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel.
12+
The Syncfusion JavaScript `PdfViewer` control provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel.
1313

1414
## Enable the redaction toolbar
1515

@@ -78,7 +78,7 @@ viewer.annotationAdd = (args) => {
7878

7979
## Delete redaction annotations programmatically
8080

81-
Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code.
81+
Redaction annotations can be removed using the `deleteAnnotationById` method or by selecting and deleting them through code.
8282

8383
```html
8484
<button id="deleteAnnotationbyId">Delete Annotation By Id</button>
@@ -152,7 +152,7 @@ document.getElementById('redact').addEventListener('click', () => {
152152
});
153153
```
154154

155-
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
155+
N> Applying redaction is irreversible. Before calling `redact()`, save or export a backup copy of the document; the original content cannot be recovered.
156156

157157
## Configure default redaction annotation properties
158158

@@ -178,7 +178,7 @@ viewer.redactionSettings= {
178178

179179
The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel.
180180

181-
![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png)
181+
![Redaction property panel showing overlay text and color options](../redaction/redaction-annotations-images/redaction-property-panel-icon.png)
182182

183183
## See also
184184

Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,17 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Search text and redact in JavaScript (ES5) PdfViewer
11+
# Search text and redact in JavaScript (ES5) PDF Viewer
1212

13-
You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result.
13+
You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and places redaction annotations for every result.
1414

15-
N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
15+
N> Prerequisites: Add the PDF Viewer control to your JavaScript application and ensure a document is loaded. Confirm the redaction feature is available in the viewer version in use and that text extraction is enabled (`isExtractText: true`). Redaction is permanent once applied.
1616

17-
## Steps to add Redaction annotations on search Text Bounds
17+
## Steps to add redaction annotations on search text bounds
1818

19-
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-ES5/getting-started) to create a simple PDF Viewer sample.
20-
21-
22-
**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
19+
**Step 1:** Follow the steps in [PDF Viewer - Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-ES5/getting-started) to create a simple PDF Viewer sample.
2320

21+
**Step 2:** Use the following code-snippets to add Redaction annotation on search text bounds.
2422

2523
```html
2624
<button id="searchTextRedact">Search Text and Redact</button>

Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ documentation: ug
99

1010
# Redaction toolbar customization in JavaScript
1111

12-
The redaction toolbar in the Syncfusion JavaScript (ES5/JavaScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items.
12+
The redaction toolbar in the Syncfusion JavaScript PDF Viewer can be customized by rearranging items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions within the existing toolbar.
1313

1414
## Enable the redaction toolbar
1515

16-
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
16+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the `RedactionEditTool`.
1717

1818
The following example shows how to enable the redaction toolbar:
1919

@@ -50,17 +50,17 @@ Refer to the following image for the toolbar view:
5050

5151
## Show or hide the redaction toolbar
5252

53-
You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.
53+
The redaction toolbar can be toggled using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.
5454

5555
### Display the redaction toolbar using the toolbar icon
5656

57-
When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
57+
When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
5858

5959
![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png)
6060

6161
### Display the redaction toolbar programmatically
6262

63-
You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
63+
Programmatic control is available via the viewer instance. For example, call `this.pdfViewer.toolbar.showRedactionToolbar(true)` to display the redaction toolbar, or `this.pdfViewer.toolbar.showRedactionToolbar(false)` to hide it.
6464

6565
The following example demonstrates toggling the redaction toolbar programmatically:
6666

0 commit comments

Comments
 (0)