With Internet Explorer 11, Web-based applications and sites can offer rich editing experiences enabling users to easily capture and share data. Online and cloud-based content creation scenarios, such as e-mail and Web-based document editing—including Office 365, rely on the contentEditable feature of HTML5. With IE11, users can now paste images from a variety of input sources, copy lists while preserving formatting, and undo their editing more easily.
With IE11, Web sites now have direct access to images pasted from the clipboard. IE11 is the first browser that supports both pasting images directly from clipboard (for example, from photo editing software or from PrintScreen) and pasting HTML that incorporates local images (for example, from applications such as Microsoft Office that store images temporarily in local paths). Either DataURI or Blob can be used to encode these images.
Web developers can choose to use a Blob instead of DataURI by adding a few lines of code. By using blobs, applications can process the image data directly. For example, a Web mail client may need to encode images into MIME format before uploading them to the cloud. Applications that use blobs manage object lifetime, in contrast to DataURI, which does not require object management.
The new clipboard APIs in IE11 make supporting image paste as Blob very easy. The following code will convert all pasted images to Blob.
var blobList = ;
var fileList = clipboardData.files;
for (var i = 0; i < fileList.length; i++)
var file = fileList[i];
var url = URL.createObjectURL(file);
event.msConvertURL(file, "specified", url);
Here is a table that summarizes how to choose between dataURI and blob:
You can try image paste out for yourself in the Paste Image Test Drive where you can switch between using DataURI and Blob to paste images.
The Paste Image Test Drive tests whether your browser can paste images using either DataUIri or Blob
With IE11, users can paste lists from popular office applications and continue editing that list within the browser. After pasting the list, the user can simply press enter at the end of the list to create new items. This capability is particularly valuable when pasting formatted content from word processing applications such as Microsoft Word. IE11 recognizes that the formatted text contains a list and converts it into a real HTML list using <ul> or <ol> elements, so you can edit the list in the way you would expect.
Pasting and editing formatted lists from applications such as Microsoft Word (left) is easy and natural in IE11 (right)
With IE11, Web pages automatically receive better undo experiences, and Web developers have fine-grain control over how DOM manipulations in script participate in the undo stack. In most cases, developers do not need to worry about the undo stack, and IE11 just works as expected. For example, if the page contains a “bold” button that calls execCommand(“bold”) when clicked, IE11 automatically supports undo of this action, so the user can hit Ctrl-Z to unbold the text. IE11 tracks each script-initiated DOM change and puts it into a separate undo unit.
IE11’s default undo stack handles most simple script editing, but sometimes, Web developers need to support more complex, multi-step editing. For example, the page may detect that the user has typed “:)”, delete this text, and insert a smiley face glyph. In this case, IE ordinarily would create two undo units (one for the deletion and the other for the insertion), and the user must hit Ctrl+Z twice to undo the script change—probably not what you would expect. IE11 adds two new commands so Web developers make this scenario work: you can call ms-beginUndoUnit, run your script, and then call ms-endUndoUnit. All the DOM changes in between the two commands will be grouped into a single undo unit.
Web developers can programmatically reset the undo history using the ms-clearUndoStack command. This capability is helpful if you reuse your editor instance for multiple contexts. For example, when the user is replying through multiple emails, you can clear the undo stack from the previous email whenever a new one is opened.
You can try the Undo Test Drive which uses the new commands to group undo units during the auto-replacement of smiley face.
The Undo Test Drive tests multi-step undo operations in your browser
With Internet Explorer 11, Web-based applications and sites can offer rich editing experiences enabling users to easily capture and share data. Users can create rich content with automatic image paste, improved copy-and-paste of formatted lists, and natural undo.
Try out these new capabilities with IE11 on either Windows 7 or Windows 8.1, and share your feedback with us through Connect.
Jianfeng Lin and Ben PetersProgram Managers, Internet Explorer