Demos
Editor Features
Annotation Editor
Rich Media Annotations
v8.1.4

DsPdfViewer annotation editor for adding only rich media annotations

Shows how to customize the editor to allow users to add only rich media 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-richmedia","$split","edit-erase","$split","edit-redact","edit-redact-apply","$split","edit-undo","edit-redo","save"], 
        mobile: ["edit-select", "$split", "edit-richmedia", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"], 
        fullscreen: ["$fullscreen", "edit-select", "$split", "edit-richmedia", "$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/edit-rich-media.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-richmedia","$split","edit-erase","$split","edit-redact","edit-redact-apply","$split","edit-undo","edit-redo","save"], mobile: ["edit-select", "$split", "edit-richmedia", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save"], fullscreen: ["$fullscreen", "edit-select", "$split", "edit-richmedia", "$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/edit-rich-media.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Rich Media 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%; }