Sets the current active result relative to the cursor position.
setActiveSelectionRelativeToCursor(): void;
For a selection, it will be set relative to the start of the selection.
import { editor, EditorInitializer } from '../utility/EditorInitializer';
let searchedWord: string = null;
let counter: number = 0;
export class DocumentEditor {
constructor() { }
run() {
new EditorInitializer();
this.testDoc();
}
testDoc = () => {
var tDoc = editor.createTestDocument();
editor.setDocument(tDoc);
}
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);
console.log(searchedWord);
alert("The total amount of times '" + searchedWord + "' appeared in the document is " + editor.context.search.totalResults);
console.log()
editor.context.search.setActiveSelectionRelativeToCursor();
}
clearSearch = () => {
//clears the searched word/phrase
editor.context.search.clear();
}
addListener = () => {
//Creates a new event listener for every time the cursor is moved, it adds 1 to the counter that will be shown when clicking the button
document.getElementById("moved").style.display = "block";
editor.addEventListener(lt.Document.Editor.EditorEvent.cursorMoved, this.cursorMovedActive);
}
cursorMovedActive = () => {
counter += 1;
document.getElementById("moved").innerHTML = "The cursor in the document has moved locations: " + counter + " times!";
}
}
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 { editor, EditorInitializer } from '../utility/EditorInitializer';
let searchedWord = null;
let counter = 0;
export class DocumentEditor {
constructor() { }
run() {
new EditorInitializer();
this.testDoc();
}
testDoc = () => {
var tDoc = editor.createTestDocument();
editor.setDocument(tDoc);
}
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);
console.log(searchedWord);
alert("The total amount of times '" + searchedWord + "' appeared in the document is " + editor.context.search.totalResults);
console.log()
editor.context.search.setActiveSelectionRelativeToCursor();
}
clearSearch = () => {
//clears the searched word/phrase
editor.context.search.clear();
}
addListener = () => {
//Creates a new event listener for every time the cursor is moved, it adds 1 to the counter that will be shown when clicking the button
document.getElementById("moved").style.display = "block";
editor.addEventListener(lt.Document.Editor.EditorEvent.cursorMoved, this.cursorMovedActive);
}
cursorMovedActive = () => {
counter += 1;
document.getElementById("moved").innerHTML = "The cursor in the document has moved locations: " + counter + " times!";
}
}
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> Import Edit and Save Documents with the Document Editor </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></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">
Import, Edit, and Save Documents with 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="searchBtn" class="rightLineBorder" style="display: none;">Search</a></li>
<li><a id="clearBtn" class="rightLineBorder" style="display: none;">Clear Search</a></li>
<li><a id="listener" class="rightLineBorder" style="display: none;">Add EventListener</a></li>
<p id="moved" style="display: none; color: red;">The cursor in the document has moved locations: 0 times!</p>
</ul>
</div>
<div id="editorWrapper" oncontextmenu="return false;">
<div class="inner-body" id="content">
</div>
</div>
</body>
<script>
window.onload = () => {
const button = document.getElementById('exampleBtn');
const example = new window.examples.DocumentEditor();
const searchBtn = document.getElementById('searchBtn');
const clearBtn = document.getElementById('clearBtn');
const listenerBtn = document.getElementById('listener');
button.onclick = () => {
example.run();
button.style.display = "none";
searchBtn.style.display = "block";
clearBtn.style.display = "block";
listenerBtn.style.display = "block";
}
searchBtn.onclick = () => {
example.searchDoc();
}
clearBtn.onclick = () => {
example.clearSearch();
}
listenerBtn.onclick = () => {
example.addListener();
}
};
</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