Demos
Editor Features
Annotation Editor
Text Annotations
v8.1.4

DsPdfViewer annotation editor for adding only text annotations

Shows how to customize the editor to allow users to add only sticky notes and free text annotations.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
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();

	// Configure toolbar buttons:    
    viewer.toolbarLayout.viewer = { 
        default: ["save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
        mobile: ["save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
        fullscreen: ["$fullscreen", "save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"]
    };
    viewer.toolbarLayout.annotationEditor = { 
        default: ["edit-select","$split","edit-text","edit-free-text","$split","edit-erase","$split","edit-redact","edit-redact-apply","$split","edit-undo","edit-redo","save"], 
        mobile: ["edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"], 
        fullscreen: ["$fullscreen", "edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"]
    };
		
    viewer.applyToolbarLayout();
	
	viewer.layoutMode = 1;
	
	viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.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(); // Configure toolbar buttons: viewer.toolbarLayout.viewer = { default: ["save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"], mobile: ["save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"], fullscreen: ["$fullscreen", "save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"] }; viewer.toolbarLayout.annotationEditor = { default: ["edit-select","$split","edit-text","edit-free-text","$split","edit-erase","$split","edit-redact","edit-redact-apply","$split","edit-undo","edit-redo","save"], mobile: ["edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"], fullscreen: ["$fullscreen", "edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"] }; viewer.applyToolbarLayout(); viewer.layoutMode = 1; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Text Annotations</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%; }