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 clipboard ╰ 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 Clipboard ╰ 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; |
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.
|
Content is ready for Copy. Use CTRL-C to copy selected content. |
|
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(); | |
} |
Test this functionality using our online demos: