Customize the "Draw tools" quick edit toolbar

This sample shows how one of the standard quick edit secondary toolbars (the "Draw tools" toolbar in the sample) can be customized by adding some new and removing some of the default buttons.

window.onload = function(){ const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); const toolbarLayout = viewer.toolbarLayout; toolbarLayout.viewer.mobile = toolbarLayout.viewer.default = ["draw-tools", "$split", "save", "$navigation", "$zoom"]; const secondToolbarLayout = viewer.secondToolbarLayout; secondToolbarLayout["draw-tools"] = ['edit-text', 'edit-ink', '$split', 'edit-square', 'edit-circle', 'edit-line', '$split', 'edit-undo', 'edit-redo', '$split', 'edit-redact', 'edit-redact-apply']; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/realestate-lease.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Customize layout for quick edit tools</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }