PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Rich text

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

WebViewer supports rich text content for freetext annotations that allows users to set the font styles for specific characters to be bold, italic, underline, strikeout, or change them to have different colors. The rich text content is implemented according to the PDF specification, which means it will work with other PDF viewers.

In WebViewer 7.3 the rich text popup is disabled by default in the WebViewer UI because if you are merging XFDF with the PDFTron SDK server side then rich text appearances will be lost (though the rich text data is still there). If you are not merging XFDF using the PDFTron SDK on the server side then you can safely re-enable this using instance.UI.enableElements('richTextPopup')
rich-text-editing

Relevant APIs and events

WebViewer provides some APIs and useful events for customizing the default behaviors.

enableElements

Just like most of other elements in the viewer, the rich text popup or each element in the rich text popup can be enabled by using enableElements.

WebViewer(...)
  .then(instance => {
    instance.UI.enableElements([
      'richTextPopup',
      // elements specific to rich text popup
      'richTextUnderlineButton',
      'richTextItalicButton',
      'richTextColorPalette',
    ]);
  });

disableElements

rich-text-popup

Just like most of other elements in the viewer, each element in the rich text popup can be disabled by using disableElements.

WebViewer(...)
  .then(instance => {
    instance.UI.disableElements([
      'richTextUnderlineButton',
      'richTextItalicButton',
      'richTextColorPalette',
    ]);
  });

Use the approach talked about in this guide to find all the available dataElements in the popup.

setColorPalette

It is also possible to configure the color palette to use a different set of colors by using the setColorPalette API.

WebViewer(...)
  .then(instance => {
    const { Tools } = instance.Core;

    instance.UI.setColorPalette({
      toolNames: [Tools.ToolNames.FREETEXT],
      colors: [
        '#DDDDDD',
        '#9de8e8',
        '#A6A1E6',
        '#E2A1E6',
        '#EF1234',
        '#FF8D00',
        '#FFCD45',
      ],
    });
  });

getEditBoxManager

The edit box manager controls all the editor instances that belong to freetext annotations. It also exposes some useful events that can be used to check the changes in an editor.

WebViewer(...)
  .then(instance => {
    const editBoxManager = instance.Core.annotationManager.getEditBoxManager();

    editBoxManager.addEventListener('editorFocus', (editor, annotation) => {...})
    editBoxManager.addEventListener('editorBlur', (editor, annotation) => {...})
    editBoxManager.addEventListener('editorTextChanged', () => {...})
    editBoxManager.addEventListener('editorSelectionChanged', (range, oldRange) => {...})
  });

getEditor

Each freetext annotation holds an editor instance which provides some low level APIs for configuring the editor.

WebViewer(...)
  .then(instance => {
    const editor = freetextAnnot.getEditor();
    
    // set the active editor color to be #EF1234 
    editor.format('color', '#EF1234');

    const format = editor.getFormat(); 
    console.log(format); // { color: '#EF1234' }
  });

To find more editor APIs, take a look at the documentation