Edit PDF text using our JavaScript content editor

Starting with Nutrient Web SDK 2022.5, you can edit text directly in PDF documents using the built-in user interface (UI). You can also change text color, font type, and font size.

License

Content editing is a licensed feature. Contact Sales to add it to your license.

Enabling content editing

To enable content editing, add the content-editor toolbar item to your toolbar when you load the Nutrient Web SDK viewer:

NutrientViewer.load({
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "content-editor", dropdownGroup: "editor" }
  ]
});

Alternatively, to enable content editing after loading a document, set the interaction mode to NutrientViewer.InteractionMode.CONTENT_EDITOR:

instance.setViewState((v) =>
  v.set("interactionMode", NutrientViewer.InteractionMode.CONTENT_EDITOR)
);

Managing UI content editing sessions programmatically

When content editing is enabled via setViewState or the toolbar button, you can programmatically save or discard changes and check for unsaved modifications using the following instance methods.

Saving changes

To save all changes made in the UI content editing session and exit content editing mode, use instance#saveContentEditingSession(). This is the programmatic equivalent of clicking Save & Close in the toolbar:

await instance.saveContentEditingSession();

Discarding changes

To discard all changes and exit content editing mode without saving, use instance#discardContentEditingSession(). This is the programmatic equivalent of clicking Cancel in the toolbar:

await instance.discardContentEditingSession();

Checking for unsaved changes

To check whether the current UI content editing session has unsaved changes, use instance#hasUnsavedContentEditingChanges(). This method returns false if no UI content editing session is active:

if (instance.hasUnsavedContentEditingChanges()) {
  console.log("There are unsaved content editing changes.");
}

Transitioning to another mode after saving

Since saveContentEditingSession() exits content editing mode, you can chain it with setViewState to transition directly to another interaction mode:

await instance.saveContentEditingSession();
instance.setViewState((v) =>
  v.set("interactionMode", NutrientViewer.InteractionMode.PAN)
);

Editing text in a PDF using the built-in UI

To edit text in a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click within a text box on the page.
3. Add or delete content in the text box.
4. Change the text color, font type, or font size in the toolbar.
5. Click Save & Close in the toolbar to apply the changes.

Adding a new paragraph to a PDF using the built-in UI

To add a new paragraph to a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click the Add text box icon in the toolbar.
3. Click the place on the page where you want to add the new paragraph.
4. Start typing to add text to the new paragraph.

Deleting a paragraph from a PDF using the built-in UI

To delete a paragraph from a PDF using the built-in UI, follow the steps below:

1. Select Content Editor from the Toggle editor tools dropdown in the main toolbar.
2. Click within a text box on the page.
3. Click the Delete paragraph icon in the toolbar. Alternatively, press Delete or Backspace.

Supported text editing functionalities

The following text editing functionalities are supported:

• Text styling — Add or modify text using any font size, color, or font type supported by Nutrient Web SDK, including bold and italic formatting.
• Selection and clipboard actions — Select text via mouse or keyboard shortcuts (Control/Command-A) and perform standard clipboard actions (Cut, Copy, Paste).
• Text box manipulation — Adjust the size and location of text boxes within the document.

Limitations

Currently, the content editor only supports left-to-right (LTR) text.

Editing text in a PDF programmatically

To edit PDF text content programmatically, refer to our guide on the PDF content editing API for Web.