The copy and paste functionality is probably one of the most challenging tasks when porting desktop applications to the web. Users expect the same functionality and handling like in fat client applications. But several security issues avoid the direct access of the system clipboard. Browsers simply limit access to the clipboard functionality. Generally, you can only access the clipboard during a cut, copy or paste event and these events are only fired when a user presses the keyboard shortcuts or uses the browser menu. In other words: You don't have a Javascript object available that can be manipulated like the .NET Framework Clipboard object.

There are several other limitations by different browsers where the input focus should be on HTML input elements. Additionally, in these events, you have only access to plain text or HTML in some browsers. But this is not enough for a fully-featured word processor such as TX Text Control.

Web.TextControl implements two different clipboards: Server-side and client-side. The main clipboard is completely independent from the system clipboard. Each user gets a custom, fully featured, clipboard server-side to copy and paste formatted content inside the editor.

Additionally, formatted content can be pasted into the editor from outside using a separate input window to distinguish between the server-side and the client-side clipboard.

Our HTML5 editor is and will be a pure HTML5 based control without any dependencies on plug-ins or downloads. But if you need to get formatted content out of the editor, technically there is no other way than using a little trick. There is a tiny GitHub project called ZeroClipboard which essentially provides a way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. ZeroClipboard is also available as a Nuget package for easy integration into your Visual Studio project.

ZeroClipboard can be glued to a specific HTML element. Due to the browser security model, the access to the clipboard is only granted on a user action such a click. The Flash SWF movie is an invisible layer on top of the HTML element. When clicked, text can be added to the clipboard. The following animated screenshot shows the clipboard solution in action:

[TX Text Control implements ZeroClipboard. TX Text Control is on the left side and MS Word on the right.]

For this reason, this sample implements a two-step way to copy the content out of the document. The user clicks the Copy to Client Clipboard button which has been added to the ribbon bar using Javascript. Now, server-side, the selected text is copied into a hidden text box in the RTF format and Javascript is called that opens the drop-down list and attaches ZeroClipboard to it:

// save the selection as RTF text
string sRTFSelection = "";
TextControl1.Selection.Save(out sRTFSelection,
  TXTextControl.Web.StringStreamType.RichTextFormat);
// fill the hidden textbox with the RTF string
TextBox1.Text = sRTFSelection;

// call the attachZeroClipboard() function to update ZeroClipboard
System.Web.UI.ScriptManager.RegisterClientScriptBlock(
  this, this.GetType(), 
  "CallAttachZeroClipboard", 
  "attachZeroClipboard(); toggleClipboardDropDown();", true);

The Javascript function attachZeroClipboard creates a new ZeroClipboard instance and attaches it to the opened drop-down list. In line 9, the RTF text from the hidden text box is passed to the clipboard.

// this function attaches the ZeroClipboard plugin
// to the newly created button and handles the events
function attachZeroClipboard() {
 var sRTFToCopy = $("#TextBox1").val();
 var client = new ZeroClipboard(document.getElementById('clipboardDropDown'));
    
 client.on('ready', function (event) {
  client.on('copy', function (event) {
   event.clipboardData.setData('application/rtf', sRTFToCopy);
  });

  client.on('aftercopy', function (event) {
   showMessage("Formatted content has been copied to the client clipboard.");
   $("#clipboardDropDown").css("visibility", "hidden");
  });
 });

 client.on('error', function (event) {
  ZeroClipboard.destroy();
 });
}

You can see the full code that inserts the new button and drop-down list to the ribbon bar and the complete clipboard Javascript code by downloading the repository from GitHub.