Gets the layout service for the current ContextModule Object.
readonly layout: LayoutService;
The LayoutService object for the current ContextModule Object.
import {EditorInitializer} from '../utility/EditorInitializer';
import {editor} from '../utility/EditorInitializer';
var searchedWord:null|string = null;
var status:number = 0;
export class ContextModule {
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);
}
pageInfo =()=>{
//When the button is pressed it will output the information at the cursor to the webpage's console
alert("Check console output to see the page details!");
console.log(editor.context.getPageData());
console.log('Current number of pages are: '+editor.context.getCurrentNumberOfPages());
console.log(editor.context.getParagraphData());
console.log('Current number of words are: '+editor.context.wordCount);
console.log(editor.context.getFontData());
console.log('Current number of characters are: '+editor.context.characterCount);
}
searchDoc =()=>{
//prompts the user to search for a word or phrase in the document editor and alerts them how many times that word/phrase appears then highlights each instance
searchedWord = prompt("Type in the word or phrase you wish to search");
editor.context.search.search(searchedWord, false);
editor.context.search.setActiveSelectionRelativeToCursor();
alert("Number of results found: " + editor.context.search.totalResults);
status = 1;
}
replaceSearch =()=>{
//takes the searched word and replaces all instances of it with the user input, then sets the replaced word as the searched one
//to highlight all the changes or be able to replaces those incase of an error
if(status === 0){
alert("There is no searched word");
}else{
var replaceWord = prompt("Type in the word to replace all instances of the searched word")
editor.context.search.replaceAll(replaceWord);
editor.context.search.search(replaceWord, false);
status = 1;
}
}
clearSearch =()=>{
//clears the searched word/phrase
editor.context.search.clear();
status = 0;
}
}
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 searchedWord= null;
var status = 0;
export class ContextModule {
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);
}
pageInfo =()=>{
//When the button is pressed it will output the information at the cursor to the webpage's console
alert("Check console output to see the page details!");
console.log(editor.context.getPageData());
console.log('Current number of pages are: '+editor.context.getCurrentNumberOfPages());
console.log(editor.context.getParagraphData());
console.log('Current number of words are: '+editor.context.wordCount);
console.log(editor.context.getFontData());
console.log('Current number of characters are: '+editor.context.characterCount);
}
searchDoc =()=>{
//prompts the user to search for a word or phrase in the document editor and alerts them how many times that word/phrase appears then highlights each instance
searchedWord = prompt("Type in the word or phrase you wish to search");
editor.context.search.search(searchedWord, false);
editor.context.search.setActiveSelectionRelativeToCursor();
alert("Number of results found: " + editor.context.search.totalResults);
status = 1;
}
replaceSearch =()=>{
//takes the searched word and replaces all instances of it with the user input, then sets the replaced word as the searched one
//to highlight all the changes or be able to replaces those incase of an error
if(status === 0){
alert("There is no searched word");
}else{
var replaceWord = prompt("Type in the word to replace all instances of the searched word")
editor.context.search.replaceAll(replaceWord);
editor.context.search.search(replaceWord, false);
status = 1;
}
}
clearSearch =()=>{
//clears the searched word/phrase
editor.context.search.clear();
status = 0;
}
}
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 Context Module 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="../../javascript/bundle.js"></script>
</head>
<body>
<div>
<div id="title">
Using the Context Module 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="pageInfoBtn" class="rightLineBorder" style="display: none;">Page Details</a></li>
<li><a id="searchBtn" class="rightLineBorder" style="display: none;">Search Word</a></li>
<li><a id="replaceBtn" class="rightLineBorder" style="display: none;">Replace Word</a></li>
<li><a id="clearBtn" class="rightLineBorder" style="display: none;">Clear Search</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.ContextModule();
const pageInfoBtn = document.getElementById('pageInfoBtn');
const searchBtn = document.getElementById('searchBtn');
const replaceBtn = document.getElementById('replaceBtn');
const clearBtn = document.getElementById('clearBtn');
button.onclick = () => {
example.run();
button.style.display = "none";
pageInfoBtn.style.display = "block";
searchBtn.style.display = "block";
replaceBtn.style.display = "block";
clearBtn.style.display = "block";
}
pageInfoBtn.onclick = () => {
example.pageInfo();
}
searchBtn.onclick = () => {
example.searchDoc();
}
replaceBtn.onclick = () => {
example.replaceSearch();
}
clearBtn.onclick = () => {
example.clearSearch();
}
};
</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