Enhanced Rich Editing Experiences in IE11

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:

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

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)

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

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

Comments

• Anonymous
  October 24, 2013
  Very cool. Hope some kind of undo-unit thing becomes a standard.

• Anonymous
  October 24, 2013
  Is this image pasting supposed to work with IE11 in 64-bit mode (W8.1)? Or did this come with the update that was just released (this just doesn't work - though I haven't restarted my PC yet)?

• Anonymous
  October 24, 2013
  FYI, the image paste page is telling me I have an old version of IE, when in fact I have the latest version of 8.1 and IE11.

• Anonymous
  October 24, 2013
  With all the push towards making IE an actually standards compliant browser recently I am wondering: where is the (proposed) specification for this? Or this a step backwards and will stay an IE-specific feature, making it useless for anyone targeting all browsers instead of the IE-using minority?

• Anonymous
  October 24, 2013
  Given this, is there any chance of prevailing upon the MS Word team to improve their HTML consumption and generation then?

• Anonymous
  October 24, 2013
  It's all pretty, but I can't wait for Win7 release.

• Anonymous
  October 24, 2013
  Funny, I still cannot drag images around in an element with contentEditable using my finger or a stylus in IE11 on my Surface Pro. Need to use my Bluetooth mouse to drag images. This is not possible with any other browser either, but this was my hope when I saw the headline. =/

• Anonymous
  October 25, 2013
  The comment has been removed

• Anonymous
  October 25, 2013
  re-posting on the latest blog post until this get the attention needed. @Rob (Microsoft) - I too can not install the messed up IE11 browser from my Windows 7 install. The browser doesn't load tabs properly and the dev tools are messed up and magenta on the last "tab". A stand-alone uninstall is REQUIRED because IE11 (or an update listing) does NOT show up in any part of the windows installed programs list to be removed.  We would have removed this weeks ago if there had been an obvious way to do so. IIRC the fact that this was broken (both IE11 and the uninstaller) was posted SEVERAL times on the IE Blog when it was first released.  If you fixed the blog comment form there likely would have been even more filings as they would not have been lost in the abyss that is "Community Server's Failed Legacy Blog System" that should have been put out to pasture about 7 years ago.

• Anonymous
  October 25, 2013
  @Rob [MSFT] Here's the problem with the IE11 uninstaller.  It is available as an item to "uninstall" from the Windows feature list but when you do you end up with no "iexplore.exe" at all. Fine - so you go to download the IE10 installer from Microsoft's site and when you run it you get this error: http://i.imgur.com/jlcFrnb.png Note that Windows/IE is very confused.  IE10 is installed - but no it isn't installed yet because it didn't finish installing.  Microsoft needs to supply a FULL IE11 uninstaller that really uninstalls it properly AND an IE10 installer that can FIX a broken installation or at least enable a FORCED install. Right now many of us are stuck in no-mans-land with either no IE browser at all (my current situation) or a broken IE11 alpha install (my only other option if I try to re-install IE11)! My bet is that the installers have an issue in workplace environments where users have full admin rights ---EXCEPT--- to manually update windows (e.g. via Windows Update) due to IT policies that block it. Since IE11 is technically a standalone install it runs fine to install but when you try to remove it you run into this gray zone where you have full permissions to uninstall a feature but NO PERMISSIONS to install a new feature/update Windows. This is something that should have been FULLY tested before releasing the IE11 alpha version for Windows 7.  Sadly it wasn't and now a pile of developers are stuck with a Frankenstein IE install that either doesn't exist or is a broken IE11 install. Rather than continuously tell us that we don't know what we are talking about - how about working on the actual solution so that those of us that develop for the Web for a living can actually get some work done on our PCs. Like the old saying goes: "If you are not part of the solution - you are part of the problem!" So we will ask once again. 1.) Please provide a full, standalone uninstaller for IE11 for Windows 7 2.) Please provide a full, standalone installer for IE10 for Windows 7 (that doesn't halt if it thinks that IE10 is already installed And finally it goes without saying - please fix the comment form on this blog!

• Anonymous
  October 25, 2013
  The comment has been removed

• Anonymous
  October 25, 2013
  The comment has been removed

• Anonymous
  October 25, 2013
  @Brian LePore Thanks for the feedback on dragging images! @Steve One goal of this feature was for IE to 'just work' with older versions of productivity software. So we actually convert lists to W3C HTML lists. @Real McCoy We appreciate your feedback on this.  We do review all Connect feedback and are happy you're submitting issues that you see. Glad we could help you out with IE11!

• Anonymous
  October 25, 2013
  @Steve Regarding your issues about uninstalling IE11 on Windows 7, let me try to clarify. After IE11 is installed on a Windows 7 machine, you can go to Control PanelProgramsPrograms and Features and click "View uninstalled updates" and see "Internet Explorer 11" in the update list. Then you can uninstall it there to go back to your previous IE version. Steve, did you uninstall IE11 in this way? You could also go to "Turn Windows features on or off" to turn off IE by unchecking "Internet Explorer 11". However that is not uninstalling IE and the current version of IE will still be on the machine. Steve, did you happen to have disabled IE? @Brandon When you had tab and dev tools problems, were you running IE11 Developer Preview or Release View on your Windows 7 machine? Can you provide more detail about the issues?

• Anonymous
  October 25, 2013
  The IE11 uninstaller DOES NOT WORK! please do not tell us it is an easy task as it isn't! there is no item in the "installed updates" list. The only option is to uninstall IE11 from the Windows features on/off list which will uninstall IE11 but leave you IE browser-less as you now have no browser. We've told you this was busted since you released IE11 preview! Why is it only now that Microsoft is actually looking into this disaster? You guys seriously need to read this blog religiously the week after you release an update!

• Anonymous
  October 25, 2013
  A question about suggested sites on Windows phones IE10. Why if I always type in a homepage of a site like www.somenewssite.com after just a few characters typed it suggests www.somenewssite.com/a12345/article_about something_1 www.somenewssite.com/a23456/article_about something_2 www.somenewssite.com/a23457/article_about something_3 ... but it does not sugest the main www.somenewssite.com page itself. I do not want articles of yesterday to take preference over de siteportal nor do I want click trough results tot take preference over sites I actually fully entered myself. Suggested sites work much better on the desktop version of IE10 p.s. Windows Phone Internet Explorer might have seperate developers but I do not know a channel to reach them

• Anonymous
  October 26, 2013
  @Ben Peters (MSFT), another issue related to dragging the image in the contentEditable field that would improve usability is to enable the field to consume the Explorer clipboard formats so the user can copy/paste (or drag/drop) image files rather than clipboard image data into the contentEditable field.

• Anonymous
  October 27, 2013
  The comment has been removed

• Anonymous
  October 27, 2013
  The comment has been removed

• Anonymous
  October 27, 2013
  Why is IE still the slowest browser in the market ? I  guess slow and buggy became the IE trademark.

• Anonymous
  October 28, 2013
  @Steve @Mark When you are seeing the update list at Control PanelProgramsPrograms and FeaturesInstalled Updates, Internet Explorer should be under the "Microsoft Software" section with other updates on the machine. Even if your machine is running IE10 or IE9, you should see a corresponding Internet Explorer entry in the section. On your machine, do you see the Microsoft Software section in the Installed Updates list or what items do you see in the section? You can also type in "internet explorer" in the search control near the upper right corner to find IE more quickly. If you still can't find Internet Explorer in the update list, feel free to email me at ximingz@microsoft.com to have an offline conversation about this issue.

• Anonymous
  October 28, 2013
  The comment has been removed

• Anonymous
  October 29, 2013
  It seems that IE11 cleans the HTML when copying from Word. If I copy the same content from Word into IE9 and IE11 then it looks clean and nice in IE11 whereas IE9 has all the messy Word stuff. And the html in IE11 is about 25% of the size of the html in IE9. Could you make a blog post about what you did to clean up the Word html? ...and thank you very much for this Cleanup feature! :-)

• Anonymous
  October 30, 2013
  I'm very happy to see some measure of developer control over the undo stack. However, there is already an UndoManager spec covering this which WebKit and Mozilla partially implement: www.whatwg.org/.../current-work Why have you implemented a proprietary API rather than the spec in IE11? I thought you were embracing the standards these days.

• Anonymous
  October 30, 2013
  While I'm here, I'm going to make one more plea for implementing Selection.extend() in IE11. I appreciate this is the wrong forum but my please are being ignored in the bug tracker. It's the only way of creating a backwards selection programmatically, which is a big deal for me in some projects, it's in the standard and every other browser has it. Please implement it. connect.microsoft.com/.../implement-missing-extend-method-of-selection

• Anonymous
  October 30, 2013
  Pleas, not please.

• Anonymous
  November 01, 2013
  @Tim Down - Thanks for following up on this. I'll keep selection.extend() in mind as we think about future improvements.

• Anonymous
  November 02, 2013
  The comment has been removed

• Anonymous
  November 04, 2013
  @Jianfeng Lin (MSFT), thanks for the input. I have tested on IE11 final build and indeed its working like a charm! :) I hope the mercury editor issues will be resolved soon.

• Anonymous
  November 06, 2013
  I don't get why you don't support the input event on contenteditable, keyup fires too late and keypress too soon. All other browsers implement the input event on contenteditable.

• Anonymous
  November 20, 2013
  @madmed, thank you for reporting the issue. We are aware of this interoperability issue and will consider it in our future release. For now, please use DOMCharacterDataModified event.