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 property. The ClipboardMode enumeration defines the possible modes. The following code enables the Local Clipboard:

TXTextControl.clipboardMode = TXTextControl.ClipboardMode.Client;

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.

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();
}

Test this functionality using our online demos:

Clipboard Demo