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.

app.js
index.html
styles.css
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"); }
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%; }