HTML5: Using the New JavaScript Selection Object
Version X14 (24.0) introduces a new JavaScript object to handle the position and length of a text selection. It can be also used to replace the current selection with text in a certain format. The Selection object can be retrieved and set through the selection property of the TXTextControl object. The following JavaScript code snippet gets the current Selection and writes the current selection start and length values to the console: The getBounds method takes a callback function with one…

Version X14 (24.0) introduces a new JavaScript object to handle the position and length of a text selection. It can be also used to replace the current selection with text in a certain format.
The Selection object can be retrieved and set through the selection property of the TXTextControl object. The following JavaScript code snippet gets the current Selection and writes the current selection start and length values to the console:
var sel = TXTextControl.selection;
sel.getStart(function(selStart) {
sel.getLength(function(selLength) {
var bounds = { start: selStart, length: selLength }
console.log(bounds);
});
})
The getBounds method takes a callback function with one parameter as a parameter. The callback function is called with a SelectionBounds object as a parameter.
In order to set a new selection in the document, the setBounds method is used. This method takes a SelectionBounds object as a parameter:
var sel = TXTextControl.selection
var bounds = { "start":1,"length":2 }
sel.setBounds(bounds)
When a selection should be replaced with plain or formatted ext, the text needs to be selected first. After that, the load method can be used to replace the selected text.
The following code snippet selects text and inserts plain text into the selection:
var sel = TXTextControl.selection
var bounds = { "start":5,"length":2 }
sel.setBounds(bounds)
var html = "New text";
var encoded = btoa(html);
sel.load(TXTextControl.StreamType.PlainText, encoded);
Related Posts
Using the Document Editor in SPA Applications using the removeFromDom Method
This article shows how to use the removeFromDom method to remove the Document Editor from the DOM when it is no longer needed. This is useful when the Document Editor is used in a Single Page…
JavaScriptDocument EditorRelease
Sneak Peek: Using the Document Editor with Pure JavaScript
The current version of the Document Editor requires the use of one of the client packages such as Angular or ASP.NET Core MVC. In the next version, the Document Editor will be able to be…
Sneak Peek 31.0: Customizing the Context Menu of the ASP.NET Document Editor
The online Document Editor of TX Text Control .NET Server 31.0 provides a fully customizable context menu. The context menu contents can be accessed through a new contextMenuOpening event that…
ASP.NETJavaScriptDocument Editor
Detect Toggle Button Changes Using a MutationObserver
This article shows how to detect changes of toggle buttons in the ribbon of the web editor using a MutationObserver. The state of a toggle button in the ribbon visualizes the state of a certain…
DS Server Released: On-Premise Document Services
We are very excited to announce the release of our new product DS Server. Bring document processing, editing, sharing, collaboration and creation to any app on any platform.