Enhanced Rich Editing Experiences in IE11

IEBlog

Internet Explorer Team Blog

Enhanced Rich Editing Experiences in IE11

  • Comments 31

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.

Pasting Images from All Sources and with Full Control

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.

With the new DataURI encoding capability in IE11, Web sites can automatically support pasting images from the clipboard, without requiring additional Javascript. By default, IE11 pastes images from the clipboard by converting them into DataURI and inserting them as HTML in the contentEditable. For example, if you draw a red box in photo editing software and copy it into contentEditable, the image becomes an <img> tag within the markup that you are editing:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D"> 

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 = [];
<htmlObject>.addEventListener("paste", 
    function()
    {
        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);
            blobList.push(file);
        }
    } );

Here is a table that summarizes how to choose between dataURI and blob:

  DataURI Blob
Requires extra JavaScript code No Yes
Works when pasting images from clipboard Yes Yes
Works when pasting HTML that references local images Yes Yes
Where image data is stored Inline inside pasted HTML (can expand the size of HTML dramatically) External reference (no concern with HTML size but the application needs to handle exporting images when sending the HTML)
Flexibility of image data Low (needs to be extracted from HTML first) High (can be processed using the blob reference)

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

The Paste Image Test Drive tests whether your browser can paste images using either DataUIri or Blob

Pasting Lists as HTML Lists

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)

Pasting and editing formatted lists from applications such as Microsoft Word (left) is easy and natural in IE11 (right)

Rich and Natural Undo Experiences

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

The Undo Test Drive tests multi-step undo operations in your browser

Summary

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 Peters
Program Managers, Internet Explorer

  • Loading...