Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ documentation: ug
domainurl: ##DomainURL##
---

# Localization support in JavaScript PDF Viewer
# Localization in the JavaScript PDF Viewer

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.
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.

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

N> Change the viewer locale by setting the `locale` property in the viewer options during initialization or by assigning `pdfviewer.locale` before rendering.

## Default language (en-US)

By default, the PDF Viewer uses the en-US culture and requires no additional configuration.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ documentation: ug
domainurl: ##DomainURL##
---

# Set a new language (localization) in JavaScript
# Set a new language in the JavaScript PDF Viewer

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

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

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

{% tabs %}
{% highlight js tabtitle="Standalone" %}
Expand Down Expand Up @@ -308,7 +308,7 @@ ej.pdfviewer.PdfViewer.Inject(
{% endhighlight %}
{% endtabs %}

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.
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.

## See Also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,19 @@ documentation: ug
domainurl: ##DomainURL##
---

# RTL Language Support in JavaScript PDF Viewer

RTL support in JavaScript PDF Viewer:
# RTL language support in JavaScript PDF Viewer

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

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

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

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

{% tabs %}
{% highlight js tabtitle="Standalone" %}
Expand Down Expand Up @@ -306,7 +305,8 @@ ej.pdfviewer.PdfViewer.Inject(
{% endhighlight %}
{% endtabs %}

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.

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.

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

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

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.
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.

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

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.
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.

## Adding Redaction in Mobile View

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

### Redaction Annotation Tool

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

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

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

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

Function: Customize the visual appearance of redaction overlays and text replacement
Customizable Properties:
Customizable properties:
- Fill Color: Change the redaction overlay color (default: black)
- Outline Color: Set outline color for redaction boxes (optional)
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Redaction annotation in Javascript PDF Viewer | Syncfusion
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer.
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript(ES5) PDF Viewer.
platform: document-processing
control: PDF Viewer
documentation: ug
Expand All @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Redaction in JavaScript (ES5) PdfViewer

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.
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.

## Enable the redaction toolbar

Expand Down Expand Up @@ -45,49 +45,47 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc
pdfviewer.appendTo('#PdfViewer');
```

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.
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.

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

## Add Redaction Annotations

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

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.
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.

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

## Delete Redaction Annotations

Redaction annotations can be removed easily:
Remove redaction annotations using the toolbar or keyboard shortcuts:

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

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

## Redact Entire Pages

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.
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.

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

## Apply Redaction

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

Use the **Apply Redaction** button on the toolbar or call the API method:

- The button is disabled until at least one redaction annotation exists.
- It becomes active when redaction annotations are present.
- The **Apply Redaction** button remains disabled until at least one redaction annotation exists.
- The button becomes enabled when redaction annotations are present.

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

A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.
A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible action.

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

N> After redaction is applied, the original content cannot be recovered.
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.

## Comment Support

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Programmatic support for redaction in JavaScript (ES5) PdfViewer

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.
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.

## Enable the redaction toolbar

Expand Down Expand Up @@ -78,7 +78,7 @@ viewer.annotationAdd = (args) => {

## Delete redaction annotations programmatically

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

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

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

## Configure default redaction annotation properties

Expand All @@ -178,7 +178,7 @@ viewer.redactionSettings= {

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.

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

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---

# Search text and redact in JavaScript (ES5) PdfViewer
# Search text and redact in JavaScript (ES5) PDF Viewer

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.
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.

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.
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.

## Steps to add Redaction annotations on search Text Bounds
## Steps to add redaction annotations on search text bounds

**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.


**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
**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.

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

```html
<button id="searchTextRedact">Search Text and Redact</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

# Redaction toolbar customization in JavaScript

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.
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.

## Enable the redaction toolbar

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

The following example shows how to enable the redaction toolbar:

Expand Down Expand Up @@ -50,17 +50,17 @@ Refer to the following image for the toolbar view:

## Show or hide the redaction toolbar

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

### Display the redaction toolbar using the toolbar icon

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

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

### Display the redaction toolbar programmatically

You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
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.

The following example demonstrates toggling the redaction toolbar programmatically:

Expand Down
Loading