The HTML5 based editor for ASP.NET MVC and Web Forms (AJAX) provides access to two different clipboards:

• The server-side clipboard uses the internal TX Text Control format and allows to copy and paste content internally in the document. The advantage of this clipboard is that it supports the complete feature set of TX Text Control including headers and footers, text frames and other sophisticated elements.
• The client-side clipboard is based on HTML and therefore limited to elements that are supported by HTML.

The editor is an HTML5 canvas based control. The document gets synchronized with the server and is rendered on the 2D canvas client-side. A canvas element is not an HTML input element with an input focus. Therefore, content cannot be inserted from the local clipboard directly into the canvas.

In version X15 of TX Text Control, it will be possible to switch between the two different clipboards using a toggle button or the JavaScript API. In case, the local clipboard is activated, an HTML form element is simulated and content can be pasted into the control and copied from the control to the local clipboard.

For typical usage, the content is immediately available in the local clipboard and can be used right away. When more content is selected (many pages of formatted text), it might take some time to prepare the content in a clean and usable HTML format. In order to provide the user a feedback, we implemented a set of events that can be used to display a progress bar or similar element.

The following screen video shows this user feedback progress bar in action:

If the local clipboard is activated, a transparent pop-up is displayed in the upper left corner. When text is selected, this pop-up indicates whether the content has been prepared successfully and is ready to be copied into the local clipboard.

Technically, there are 4 events available for this clipboard process:

• clipboardDataTransferStart
• clipboardDataTransferProgress
• clipboardDataTransferComplete
• clipboardDataTransferAborted

The clipboardDataTransferStart is triggered right after text has been selected and returns a unique id. The clipboardDataTransferProgress event is fired during the preparation/copying process and returns a percentage value that can be used to update a progress bar:

TXTextControl.addEventListener("clipboardDataTransferProgress", function (e) {
    progressClipboardTransfer(e);
});

function progressClipboardTransfer(e) {
    if (e.id == curClipboardTransferId)
    {
        var y = document.getElementById("toast-progress");
        y.style.width = e.progress + "%";
    }        
}

Stay tuned for more features of TX Text Control X15!