Document Editing UI
The Document Editor is a PSPDFKit for Web component that enables a whole host of document editing features. This includes new page creation, page duplication, copying and pasting, reordering, rotation, deletion, and the creation of new documents from a subset of selected pages.
This guide describes the built-in document editing user interface. If you would prefer to learn more about the document editing APIs, please check out the Document Editing guide.
ℹ️ Note: The Document Editor UI is only available if document editing is enabled in your license.
To enter document editing mode, you need to press the Document Editor toolbar button, which is placed on the main toolbar.
The image below shows the button used to switch to document editing mode.
The Document Editor user interface is comprised of two main elements: the Document Editor toolbar, which is by default positioned on the very top; and the document view, which shows thumbnails of all the pages in a document.
The Document Editor toolbar holds a set of buttons that can be used to perform document editing actions. Some of the buttons are context sensitive and are enabled only on demand, based on factors such as the selection state in the document view. See Actions for a detailed description of all the actions you can perform with these buttons.
The document view is a vertically scrollable grid that represents all the pages in an edited document. Pages can be selected or deselected by single-pressing a page’s thumbnail. It is possible to select more than one page at the same time. You can identify selected pages by paying attention to the thumbnail outline.
There are many actions you can perform using the Document Editor toolbar. The toolbar icons will appear horizontally stacked next to their label, unless there’s not enough space for all of them, in which case some of them may be grouped in a dropdown menu at the end of the toolbar, like shown below.
The following table lists all the toolbar buttons.
|Add||Adds a new page at the beginning of the document or after the selected page.|
|Remove||Removes the currently selected pages from the document.|
|Duplicate||Creates copies of the currently selected pages.|
|Rotate left||Rotates the selected page 90 degrees counter-clockwise.|
|Rotate right||Rotates the selected page 90 degrees clockwise.|
|Move left||Moves the selected page before the previous page.|
|Move right||Moves the selected page after the next page.|
|Import document||Shows the open file dialog and merges the selected document into the current one.|
|Undo||Undoes the last document editing action.|
|Redo||Redoes the last undone document editing action.|
|Select all||Selects all pages.|
|Select none||Deselects all pages.|
ℹ️ Note: In order to prevent user mistakes, it’s not possible to import the same document more than once in the same Document Editor UI operations block. However, it’s still possible to do it programmatically. See the Document Editing guide for more information.
In the lower side of the Document Editor UI, there are three more buttons available.
|Cancel||Exits the Document Editor UI without applying any operation to the current document.|
|Save||Applies the modifications to the current document.|
|Save as||Shows a save file dialog to export the current document with the modifications applied but without modifying the current document.|