Selects the entire region.
selectAll(silent?: boolean): void;
silent
Indicates whether the context for the editor should be updated.
import {EditorInitializer} from '../utility/EditorInitializer';
import {editor} from '../utility/EditorInitializer';
var status:boolean = false;
export class KeyboardMovementModule {
run = () => {
new EditorInitializer();
this.init();
}
init = () => {
//This creates a test document and sets it in the Document Editor when the example is run.
var tDoc = editor.createTestDocument();
editor.setDocument(tDoc);
}
addShortcut =()=>{
//This registers a new keybind shortcut to select everything in the Document Editor. Alerts the user the shortcut has been added
editor.keyboard.registerShortCut("selectAllAlt","Ctrl+q","Selects everything in the editor, alternative to using ctrl+a",(e)=>{
editor.movement.selectAll();
});
alert("Shortcut added!")
status = true;
}
removeShortcut =()=>{
//This unregisters the recently created keybind and alerts the user that it was removed
editor.keyboard.unregisterShortCut("selectAllAlt");
alert("Shortcut removed!");
status = false;
}
showShortcut =()=>{
//Checks to see if they keybind was registered or not, if it was it will get and display information about the keybind
if(!status){
alert("There is no shortcut registered");
}else{
alert("The shortcut keybind and its description\n\n"+
editor.keyboard.getShortCut("selectAllAlt")+"\n"+
editor.keyboard.getShortCutDescription("selectAllAlt")+"\n");
}
}
highlightStart =()=>{
//Selects to the start of the line, same functionality of the 'shift + home'
editor.movement.selectToStartOfLine(false);
}
highlightEnd =()=>{
//Selects to the start of the line, same functionality of the 'shift + end'
editor.movement.selectToEndOfLine(false);
}
}
export var editor: any = null;
export class EditorInitializer {
private callback: (editor: any) => void = null;
constructor(callback?: (editor: any) => void) {
this.callback = callback;
this.init();
}
init = () => {
this.setLicense();
this.initFactory();
this.addEditControl();
}
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
var msgParagraph = document.createElement('p');
msgParagraph.innerText = msg;
var parent_1 = document.getElementById("div_container");
while (parent_1.firstElementChild) {
parent_1.removeChild(parent_1.firstElementChild);
}
parent_1.appendChild(msgParagraph);
console.log(msg);
}
});
}
initFactory = () => {
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
// Set local proxy url template (Used in local load mode)
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
// Ping the Document service
lt.Document.DocumentFactory.verifyService()
.done(function (response: ResponseType | any) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR: string, statusText: string, errorThrown: string) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
addEditControl = () => {
//sets up the initial document editor object
var content = document.getElementById('content');
editor = new lt.Document.Editor.DocumentEditor({
root: content
});
this.registerClickEvents();
if (this.callback) {
this.callback(editor);
}
}
registerClickEvents = () => {
//registers the onclick functions for the buttons
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) => {
this.selectAndLoadFile();
}
const exportClick = document.getElementById('exportBtn');
exportClick.onclick = (e) => {
this.exportAsPdf();
}
}
selectAndLoadFile = () => {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
document.body.style.cursor = 'wait';
var promise = lt.Document.Editor.EditableDocument.fromFile(file);
promise.then(function (doc: HTMLElement) {
editor.setDocument(doc);
});
promise.finally(() => {
document.body.style.cursor = 'default';
});
};
input.click();
}
exportAsPdf = () => {
//exports the current document for saving
var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf);
var err = null;
promise.then(function (name: string) { });
promise.catch(function (err: string) {
alert("There was an issue exporting the document. " + err);
});
}
}
import {EditorInitializer} from '../utility/EditorInitializer';
import {editor} from '../utility/EditorInitializer';
var status = false;
export class KeyboardMovementModule {
run = () => {
new EditorInitializer();
this.init();
}
init = () => {
//This creates a test document and sets it in the Document Editor when the example is run.
var tDoc = editor.createTestDocument();
editor.setDocument(tDoc);
}
addShortcut =()=>{
//This registers a new keybind shortcut to select everything in the Document Editor. Alerts the user the shortcut has been added
editor.keyboard.registerShortCut("selectAllAlt","Ctrl+q","Selects everything in the editor, alternative to using ctrl+a",(e)=>{
editor.movement.selectAll();
});
alert("Shortcut added!")
status = true;
}
removeShortcut =()=>{
//This unregisters the recently created keybind and alerts the user that it was removed
editor.keyboard.unregisterShortCut("selectAllAlt");
alert("Shortcut removed!");
status = false;
}
showShortcut =()=>{
//Checks to see if they keybind was registered or not, if it was it will get and display information about the keybind
if(!status){
alert("There is no shortcut registered");
}else{
alert("The shortcut keybind and its description\n\n"+
editor.keyboard.getShortCut("selectAllAlt")+"\n"+
editor.keyboard.getShortCutDescription("selectAllAlt")+"\n");
}
}
highlightStart =()=>{
//Selects to the start of the line, same functionality of the 'shift + home'
editor.movement.selectToStartOfLine(false);
}
highlightEnd =()=>{
//Selects to the start of the line, same functionality of the 'shift + end'
editor.movement.selectToEndOfLine(false);
}
}
export let editor = null;
export class EditorInitializer {
constructor(callback) {
this.callback = callback;
this.init();
}
init = () => {
this.setLicense();
this.initFactory();
this.addEditControl();
}
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
var msgParagraph = document.createElement('p');
msgParagraph.innerText = msg;
var parent_1 = document.getElementById("div_container");
while (parent_1.firstElementChild) {
parent_1.removeChild(parent_1.firstElementChild);
}
parent_1.appendChild(msgParagraph);
console.log(msg);
}
});
}
initFactory = () => {
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
// Set local proxy url template (Used in local load mode)
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
// Ping the Document service
lt.Document.DocumentFactory.verifyService()
.done(function (response) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR, statusText, errorThrown) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
addEditControl = () => {
//sets up the initial document editor object
var content = document.getElementById('content');
editor = new lt.Document.Editor.DocumentEditor({
root: content
});
this.registerClickEvents();
if(this.callback){
this.callback(editor);
}
}
registerClickEvents = () => {
//registers the onclick functions for the buttons
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) =>{
this.selectAndLoadFile();
}
const exportClick = document.getElementById('exportBtn');
exportClick.onclick = (e) =>{
this.exportAsPdf();
}
}
selectAndLoadFile = () => {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
document.body.style.cursor = 'wait';
var promise = lt.Document.Editor.EditableDocument.fromFile(file);
promise.then(function (doc) {
editor.setDocument(doc);
});
promise.finally(()=> {
document.body.style.cursor = 'default';
});
};
input.click();
}
exportAsPdf = () => {
//exports the current document for saving
var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf);
var err = null;
promise.then(function (name) { });
promise.catch(function (err) {
alert("There was an issue exporting the document. " + err);
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Using the Keyboard and Movement Modules in the Document Editor</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="../../lib/Leadtools.js"></script>
<script src="../../lib/Leadtools.Annotations.Engine.js"></script>
<script src="../../lib/Leadtools.Annotations.Automation.js"></script>
<script src="../../lib/Leadtools.Document.js"></script>
<script src="../../lib/Leadtools.Document.Editor.js"></script>
<link rel="stylesheet" type="text/css" href="../css/examples.css">
<script src="../../typescript/bundle.js"></script>
</head>
<body>
<div>
<div id="title">
Using the Keyboard and Movement Modules in the Document Editor
</div>
<ul id="menu">
<li><a id="importBtn" class="rightLineBorder">Import Document</a></li>
<li><a id="exportBtn" class="rightLineBorder">Export Document</a></li>
<li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li>
<li><a id="addShortcutBtn" class="rightLineBorder" style="display: none;">Add Shortcut</a></li>
<li><a id="removeShortcutBtn" class="rightLineBorder" style="display: none;">Remove Shortcut</a></li>
<li><a id="showShortcutBtn" class="rightLineBorder" style="display: none;">Show Shortcut</a></li>
<li><a id="selectStartBtn" class="rightLineBorder" style="display: none;">Select to Line Start</a></li>
<li><a id="selectEndBtn" class="rightLineBorder" style="display: none;">Select to Line End</a></li>
</ul>
</div>
<div id="editorWrapper" oncontextmenu="return false;">
<div class="inner-body" id="content">
</div>
</div>
</body>
<script>
//creates the onclick functions for the buttons and hides/shows them when necessary
window.onload = () => {
const button = document.getElementById('exampleBtn');
const example = new window.examples.KeyboardMovementModule();
const addShortcutBtn = document.getElementById('addShortcutBtn');
const removeShortcutBtn = document.getElementById('removeShortcutBtn');
const showShortcutBtn = document.getElementById('showShortcutBtn');
const selectStartBtn = document.getElementById('selectStartBtn');
const selectEndBtn = document.getElementById('selectEndBtn');
button.onclick = () => {
example.run();
button.style.display = "none";
addShortcutBtn.style.display = "block";
removeShortcutBtn.style.display = "block";
showShortcutBtn.style.display = "block";
selectStartBtn.style.display = "block";
selectEndBtn.style.display = "block";
}
addShortcutBtn.onclick = () => {
example.addShortcut();
}
removeShortcutBtn.onclick = () => {
example.removeShortcut();
}
showShortcutBtn.onclick = () => {
example.showShortcut();
}
selectStartBtn.onclick = () => {
example.highlightStart();
}
selectEndBtn.onclick = () => {
example.highlightEnd();
}
};
</script>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
#title {
padding: 10px;
font-size: 24px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#editorWrapper {
border-top: 1px solid black;
height: 95%;
}
#content {
height: 100%;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor: pointer;
user-select: none;
font-weight: bold;
}
li:first-child {
margin-left: 5px;
}
.rightLineBorder {
border-right: 1px black solid;
}
li a:hover {
background-color: lightblue;
}
Leadtools.Document.Editor Namespace
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document