config is handed to the editor as it is. Everything is shown by default, so a
configuration only switches off what you do not want.
const editor = new PDFMergeSortSplitClass('#editor', {
embedUrl: 'https://pdfmerge.rsj.de',
apiKey: '<licence JWT>',
title: 'Acme Document Suite',
icon: 'https://acme.example/icon.png',
ui: {
blog: false,
theme: false,
toolbar: { print: false, saveZip: false },
partHeader: { print: false },
},
actions: {
loaders: { select: { title: 'Select file' } },
saveAll: { save: { title: 'Save all' } },
savePart: { save: { title: 'Save' } },
},
provenance: { attach: true },
});
Top-level options
| Option | Default | Meaning |
|---|---|---|
embedUrl |
https://pdfmerge.rsj.de |
Where the editor is served. Point it at your self-hosted instance if you run one. |
apiKey |
– | Licence JWT. Without one the editor shows a test-mode banner and stays fully functional. |
title |
product name | Title in the editor's title bar. |
icon |
our icon | Icon URL shown in the title bar. Setting it also hides our logo. |
readyTimeout |
20000 |
Milliseconds whenReady() waits for the handshake. |
provenance |
{ attach: false } |
attach: true writes the page provenance into exported PDFs. |
printAll, printPart, saveZip |
true |
Older flat flags; they map onto the ui options below. |
Title bar
All of these are true by default.
| Option | Controls |
|---|---|
ui.logo |
Our company logo on the left. |
ui.icon |
The PDF Merge icon (or your icon). |
ui.title |
The title text. |
ui.landing |
The icon links to the landing page; false makes it open the about panel. |
ui.about |
The about panel behind the title. |
ui.blog, ui.language, ui.extension, ui.fullscreen, ui.theme |
The buttons on the right. |
Toolbar
| Option | Controls |
|---|---|
ui.toolbar.new |
“New” (discard everything). |
ui.toolbar.savePdf, saveZip, saveDrive, print |
The save and print buttons. |
ui.toolbar.undo, redo |
History. |
ui.toolbar.upload |
Drop area / file dialog. |
ui.toolbar.drive |
“Add from Google Drive”. |
ui.toolbar.addText |
“Add text page”. |
ui.toolbar.scaleSort |
Thumbnail size slider. |
ui.toolbar.pages |
The page counter. |
ui.toolbar.rotate, previous, next, delete |
The page controls on the right. |
ui.toolbar.scalePage |
The zoom slider under them. |
Part header
Each part (the group of pages that becomes one PDF) has its own header.
| Option | Controls |
|---|---|
ui.partHeader.label |
“Part 1”, “Part 2”, … |
ui.partHeader.name |
The editable part name (it becomes the file name). |
ui.partHeader.pages |
The page count of the part. |
ui.partHeader.save, drive, print |
The part's own save, Drive and print buttons. |
Injected buttons
actions adds your own buttons next to the load, save and part-header controls.
Each entry is {title, icon}; with an icon URL it becomes an icon button with
a tooltip, without one a small text button.
| Group | Where it appears |
|---|---|
actions.loaders |
Next to the load / drop area. |
actions.saveAll |
Next to the save buttons of the whole document. |
actions.savePart |
In every part header. |
Clicks arrive as action events — the editor itself does
nothing with them:
editor.on('action', async ({ action, where, reference, part }) => {
if (action === 'select') openMyFileDialog();
if (action === 'save') download(await editor.exportDocument(where === 'saveAll' ? undefined : part));
});
Provenance
provenance: { attach: true } writes a provenance.json attachment into every
exported PDF, so a re-import restores the provenance without the host having to
remember it. See Page provenance.