Some test text!

Loading...
Guides
Text Edit

Content edit

WebViewer 8.3 adds support for a content editing (text edit and image edit) feature which allows you to edit text and images directly on PDF files.

Content editing is a new add-on that isn't part of existing license keys. To test it out you can comment out your license key and try in demo mode.
This feature only works with PDF files. If you want to edit content on a different type of file you can call the loadDocument function with the loadAsPDF: true option. For example documentViewer.loadDocument('myfile.docx', { loadAsPDF: true })

Enable content editing feature with the WebViewer UI

To use the content editing feature with the WebViewer UI you need to enable the content edit button in the UI.

WebViewer({
  // options
}, document.getElementById('viewer'))
.then((instance) => {
  // Enable content edit button
  instance.UI.enableElements(['contentEditButton']);
});

You will see the content edit button in the "Edit" toolbar group.

Content Editing Button

After you press the edit button a warning modal will appear with some information about content editing mode. After proceeding the text and images in the document will be displayed with a dashed box around them.

Editable boxes

Editing content from the UI

To edit the text you can either:

  1. Double click on the box

or

  1. Single click on the box to select it
  2. Click the edit button in the annotation popup menu

After this a modal will appear with the text and styles that allow you to edit the content. After saving the update the text will be refreshed on the page.

Text edit modal

Both text and images can be moved, resized and deleted. You can do this by selecting a box and then moving or resizing it like a normal annotation. You can also press the delete button to delete the content.

Switching to content edit mode programmatically

WebViewer({
  // options
}, viewerElement)
.then((instance) => {
  instance.UI.setToolMode(instance.Core.Tools.ToolNames.CONTENT_EDIT);
});

Preloading content edit worker

By default the relevant WebAssembly files will only be loaded once you switch into the content editing tool mode. They may take some time to download, so if your users will often be using this feature you may want to preload those files.

You can use the preloadWorker constructor option to do this. For example:

WebViewer({
  preloadWorker: WebViewer.WorkerTypes.CONTENT_EDIT,
  // other options
}, viewerElement)
.then((instance) => {

});

Using content editing with the WebViewer Core

If you use the WebViewer Core directly then there are some APIs provided to interact with content editing. As an example you can check out the WebViewer Custom UI Github repo which makes use of these APIs.

To begin editing content there is a ContentEditTool that you can switch into. For example:

const contentEditTool = myDocumentViewer.getTool(Core.Tools.ToolNames.CONTENT_EDIT);
myDocumentViewer.setToolMode(contentEditTool);

The first time the tool mode is switched into the content edit WebAssembly files will be loaded. If you'd like to do this earlier you can Core.ContentEdit.preloadWorker.

Core.ContentEdit.preloadWorker(myDocumentViewer);

Working with content edit placeholder annotations

You can tell if an annotation is a content edit placeholder annotation by using the annotation.isContentEditPlaceHolder API. With those annotations you can use the getDocumentContent and updateDocumentContent APIs. For example:

// is the currently selected annotation a placeholder
const selectedAnnotation = annotationManager.getSelectedAnnotations()[0];
if (selectedAnnotation && selectedAnnotation.isContentEditPlaceholder()) {
  const content = await Core.ContentEdit.getDocumentContent(selectedAnnotation);

  // pass content to library that can display rich text, for example Quill
}


// later after the content has been updated this will update it on the page
await Core.ContentEdit.updateDocumentContent(annotation, newContent);

If you want to check whether the annotation is for text or an image then you can use getContentEditType. For example:

if (annotation.getContentEditType() === Core.ContentEditTypes.TEXT) {
  // this has text that can be updated
}

Moving and deleting content

When the annotations representing the content are moved or deleted in the DocumentViewer then the content will automatically be updated on the page. You can also use the normal annotation APIs.

annotationManager.deleteAnnotation(myContentEditAnnotation);

myOtherContentEditAnnotation.X = 50;
annotationManager.trigger(Core.AnnotationManager.Events.ANNOTATION_CHANGED, ['modify', [myOtherContentEditAnnotation], {}]);

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use