The pandadoc-editor
can be used to embed the PandaDoc Editor in your web
application.
To install pandadoc-editor
, you can use either npm or yarn:
npm install pandadoc-editor
or
yarn add pandadoc-editor
First, import the library in your project:
import { Editor } from "pandadoc-editor";
Then, you can initialize the editor:
const editor = new Editor("editor-container", {
// Editor will open start automatically if you provide documentId or templateId
documentId: "", // Document id
templateId: "", // Template id
token: "", // Bearer token
workspaceId: "", // Workspace id
organizationId: "", // Organization id,
});
The 'openDocument' function allows you to control the visibility of fields in a document. This is controlled by the 'fields' parameter.
Hint: Fields can be set as part of the Editor configuration (along with 'documentId') if you don't need to configure them for each openDocument call.
The 'fields' parameter is an object where the keys are the types of fields you want to control, and the values are objects with a 'visible' property that determines whether the field is visible.
If you don't provide a field configuration, the function will use it from the default configuration or from the configuration that was passed during Editor initialization. All fields are visible by default.
const defaultFieldConfig = {
"checkbox": { visible: true },
"dropdown": { visible: true },
"date": { visible: true },
"signature": { visible: true },
"stamp": { visible: true },
"initials": { visible: true },
"payment_details": { visible: true },
"collect_file": { visible: true },
"radio_buttons": { visible: true },
};
Example Here's an example of how you can call the 'openDocument' function to control the visibility of fields:
editor.openDocument("doc1", {
fields: {
'stamp': {
visible: false,
},
'dropdown': {
visible: false,
},
},
});
In this example, the 'stamp' and 'dropdown' fields will be hidden.
To close the editor, you can call the close
method:
editor.close();
To build the library, run:
vite build
This will generate the library bundle in the dist directory.