> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/rich-text.md).

# Add rich text PDF annotations

Enhance your PDF viewing experience with WebViewer's rich text content feature for freetext annotations. Customize font styles, colors, and more with easy-to-use APIs and events. Learn how to optimize

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.

{% hint style="info" %}
In WebViewer 7.3 the rich text popup is disabled by default in the WebViewer UI because if you are merging XFDF with the Apryse 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 Apryse SDK on the server side then you can safely re-enable this using the enableElements API (see section).
{% endhint %}

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-78da5f56982c48cd0586e5fc28e29c9a61652df7%2Fa8437efb7857b3a29c917fa98a16059799e5c108-1482x628.gif?alt=media)

## 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](https://sdk.apryse.com/api/web/UI.html#.enableElements).

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

### disableElements

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-fc18a062679e053a122961e039e6711d79468859%2Fb30f0deea63aa9b6015937d33bd93cdfafb1aabe-380x259.png?alt=media)

Just like most of other elements in the viewer, each element in the rich text popup can be disabled by using [disableElements](https://sdk.apryse.com/api/web/UI.html#disableElements__anchor).

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

Use the approach talked about in [this guide](/web/ui-customization/hiding-elements.md) 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](https://sdk.apryse.com/api/web/UI.html#setColorPalette__anchor) API.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

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

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

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

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

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
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) => {...})
  });
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...)
  .then(instance => {
    const editBoxManager = instance.annotManager.getEditBoxManager();

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

{% endcode %}
{% endtab %}
{% endtabs %}

### getEditor

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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
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' }
  });
```

{% endcode %}
{% endtab %}
{% endtabs %}

To find more editor APIs, take a look at [the documentation](https://sdk.apryse.com/api/web/Core.PDFNet.Annot.html)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/rich-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.