insertTab Method

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'; 
 
export class TextEnginesExample { 
 
    run = () => { 
        new EditorInitializer(); 
        this.initText(); 
    } 
 
    initText = () => { 
        //Creates a new table in the document when the example is run  
        editor.engine.text.insertText("This is the initial text from running the example. Use 'ctrl + left-click' to follow Hyperlinks"); 
    } 
    addText = () => { 
        //Allows the user to insert text at cursor location in the document with a prompt instead of typing in the document.  
        var input = prompt("Enter in the text you want to add") 
        editor.engine.text.insertText("\n" + input); 
    } 
    addParagraph = () => { 
        //Inserts a new paragraph into the document on the next line from the cursor location and indents with a tab 
        editor.engine.text.insertParagraph(); 
        editor.engine.text.insertTab(); 
    } 
    increaseFont = () => { 
        //Increase the font size of new text being typed or selected text   
        editor.engine.text.incrementFontSize(1); 
    } 
    decreaseFont = () => { 
        //Decrease the font size of new text being typed or selected text  
        editor.engine.text.incrementFontSize(-1); 
    } 
    increaseIndentSize = () => { 
        //Increase the indent size by one until it reaches the last possible size 
        editor.engine.text.incrementIndentSize(1); 
    } 
    decreaseIndentSize = () => { 
        //Decrease the indent size by one until it reaches the last possible size 
        editor.engine.text.incrementIndentSize(-1); 
    } 
    addLink = () => { 
        //Adds a hyperlink in to the selected text based in the input from the user. Use 'ctrl+left-click' to follow link 
        var input = prompt("Insert the hyperlink for the selected text") 
        editor.engine.text.insertLink(input); 
    } 
    deleteLink = () => { 
        //Removes the hyperlink from the selected text 
        editor.engine.text.removeLink(); 
    } 
} 

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 Text Engine 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 Text Engine 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="addTextBtn" class="rightLineBorder" style="display: none;">Add Text</a></li> 
            <li><a id="addParaBtn" class="rightLineBorder" style="display: none;">Add Paragraph</a></li> 
            <li><a id="incFontBtn" class="rightLineBorder" style="display: none;">Increase Font Size</a></li> 
            <li><a id="decFontBtn" class="rightLineBorder" style="display: none;">Decrease Font Size</a></li> 
            <li><a id="incIndentBtn" class="rightLineBorder" style="display: none;">Increase Indent Size</a></li> 
            <li><a id="decIndentBtn" class="rightLineBorder" style="display: none;">Decrease Indent Size</a></li> 
            <li><a id="addLinkBtn" class="rightLineBorder" style="display: none;">Add Hyperlink</a></li> 
            <li><a id="deleteLinkBtn" class="rightLineBorder" style="display: none;">Delete Hyperlink</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.TextEnginesExample(); 
 
        const addTextBtn = document.getElementById('addTextBtn'); 
        const addParaBtn = document.getElementById('addParaBtn'); 
        const incFontBtn = document.getElementById('incFontBtn'); 
        const decFontBtn = document.getElementById('decFontBtn'); 
        const incIndentBtn = document.getElementById('incIndentBtn'); 
        const decIndentBtn = document.getElementById('decIndentBtn'); 
        const addLinkBtn = document.getElementById('addLinkBtn'); 
        const deleteLinkBtn = document.getElementById('deleteLinkBtn'); 
 
        button.onclick = () => { 
 
            example.run(); 
            button.style.display = "none"; 
            addTextBtn.style.display = "block"; 
            addParaBtn.style.display = "block"; 
            incFontBtn.style.display = "block"; 
            decFontBtn.style.display = "block"; 
            incIndentBtn.style.display = "block"; 
            decIndentBtn.style.display = "block"; 
            addLinkBtn.style.display = "block"; 
            deleteLinkBtn.style.display = "block"; 
 
        } 
        addTextBtn.onclick = () => { 
            example.addText(); 
        } 
        addParaBtn.onclick = () => { 
            example.addParagraph(); 
        } 
        incFontBtn.onclick = () => { 
            example.increaseFont(); 
        } 
        decFontBtn.onclick = () => { 
            example.decreaseFont(); 
        } 
        incIndentBtn.onclick = () => { 
            example.increaseIndentSize(); 
        } 
        decIndentBtn.onclick = () => { 
            example.decreaseIndentSize(); 
        } 
        addLinkBtn.onclick = () => { 
            example.addLink(); 
        } 
        deleteLinkBtn.onclick = () => { 
            example.deleteLink(); 
        } 
    }; 
</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; 
}