TX Text Control integrates powerful, unique clipboard features that enable users to paste content from client applications such as MS Word. You can copy and paste content from MS Word into TX Text Control without losing features. Document elements such as headers and footers, text frames and even merge fields are maintained.

Two Clipboards

TX Text Control provides two clipboards the local and the server clipboard. The reason is quite simple: Browsers are very limited and restrictive when it comes to client clipboard access for security reasons.

  • Local Clipboard
    If the Local Clipboard is activated (ribbon bar button or via JavaScript), you can copy and paste content from your local machine to TX Text Control. Accepted formats are RTF, HTML, plain text and images. Other than HTML-based editors, TX Text Control is rendering the rich text format (RTF) directly without converting content to HTML. This maintains sophisticated formatting and features.

  • Server Clipboard
    If the Local Clipboard is deactivated, the Server Clipboard is automatically active. The server clipboard is an internal clipboard that handles all features of TX Text Control. It is using another clipboard stack and can be used for internal clipboard actions.

The clipboard mode can be set using JavaScript with the clipboardMode TX Text Control .NET Server for ASP.NET
JavaScript API
TXTextControl Object
clipboardMode Property
Gets or sets the clipboard mode (client or server).
property. The ClipboardMode TX Text Control .NET Server for ASP.NET
JavaScript API
TXTextControl Object
ClipboardMode Enumeration Enumeration
Possible clipboard modes.
enumeration defines the possible modes. The following code enables the Local Clipboard:

TXTextControl.clipboardMode = TXTextControl.ClipboardMode.Client;
view raw test.js hosted with ❤ by GitHub

Our online demo Clipboard implements a progress bar that indicates whether selected content is ready to be copied.

If the Local Clipboard is activated, monitor the demo clipboard progress bar that uses the clipboard JavaScript events of TX Text Control to show whether the clipboard is ready for a copy action or not.

Clipboard

Content is ready for Copy. Use CTRL-C to copy selected content.

Clipboard

Content is being prepared for Copy. Wait until you see the green bar before copying the selected content.

The events clipboardDataTransferStart, clipboardDataTransferComplete, clipboardDataTransferProgress and clipboardDataTransferAborted are used to update the progress bar state.

TXTextControl.addEventListener("clipboardDataTransferStart", clipboardDataTransferStartHandler);
TXTextControl.addEventListener("clipboardDataTransferComplete", clipboardDataTransferCompleteHandler);
TXTextControl.addEventListener("clipboardDataTransferProgress", clipboardDataTransferProgressHandler);
TXTextControl.addEventListener("clipboardDataTransferAborted", clipboardDataTransferAbortedHandler);
function clipboardDataTransferStartHandler() {
$(".progress-bar").attr("aria-valuenow", 0);
$(".progress-bar").css("width", "0%");
$(".progress-bar").removeClass("bg-success");
$(".progress-bar").addClass("progress-bar-striped progress-bar-animated bg-danger");
}
function clipboardDataTransferCompleteHandler() {
$(".progress-bar").removeClass("progress-bar-striped progress-bar-animated bg-danger");
$(".progress-bar").addClass("bg-success");
$(".progress-bar").attr("aria-valuenow", 100);
$(".progress-bar").css("width", "100%");
}
function clipboardDataTransferProgressHandler(e) {
$(".progress-bar").attr("aria-valuenow", e.progress);
$(".progress-bar").css("width", e.progress + "%");
}
function clipboardDataTransferAbortedHandler() {
clipboardDataTransferCompleteHandler();
}
view raw test.js hosted with ❤ by GitHub

Test this functionality using our online demos:

Clipboard Demo