Verbesserte und erweiterte Bearbeitungsoberfläche in IE11

Mit Internet Explorer 11 können webbasierte Anwendungen und Websites umfangreiche Bearbeitungsoberflächen anbieten, die es den Benutzern ermöglichen, Daten einfacher zu erfassen und freizugeben. Online- und cloudbasierte Inhaltserstellungsszenarien, wie z. B. E-Mail- und webbasierte Dokumentbearbeitung – einschließlich Office 365 – verwenden die HTML5-Funktion contentEditable. Mit IE11 können Benutzer nun Bilder aus zahlreichen Eingabequellen einfügen, Listen unter Beibehaltung der Formatierung kopieren und ihre Bearbeitungsschritte einfacher rückgängig machen.

Einfügen von Bildern aus beliebigen Quellen und mit vollständiger Kontrolle

Websites haben mit IE11 jetzt direkten Zugriff auf Bilder, die aus der Zwischenablage eingefügt wurden. IE11 ist der erste Browser, der sowohl das Einfügen von Bildern direkt aus der Zwischenablage (beispielsweise aus einer Fotobearbeitungssoftware oder über die DRUCK-TASTE) als auch das Einfügen von HTML unterstützt, die lokale Bilder enthält (beispielsweise von Anwendungen wie Microsoft Office, die Bilder temporär unter lokalen Pfaden speichern). Zum Codieren dieser Bilder kann entweder ein DataURI oder ein Blob verwendet werden.

Mit der neuen DataURI-Codierungsfunktion in IE11 unterstützen Websites automatisch das Einfügen von Bildern aus der Zwischenablage, ohne dass zusätzliches Javascript erforderlich ist. IE11 fügt Bilder standardmäßig aus der Zwischenablage ein, indem diese in DataURI umgewandelt und dann als HTML in „contentEditable“ eingefügt werden. Wenn Sie beispielsweise ein rotes Feld in einer Fotobearbeitungssoftware zeichnen und es in „contentEditable“ kopieren, wird aus dem Bild ein <img>-Tag innerhalb des bearbeiteten Markups:

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI

 AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1

 I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA

 AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D"> 

Webentwickler können durch Einfügen weniger Codezeilen ein Blob anstelle eines DataURI verwenden. Mithilfe von Blobs können Anwendungen Bilddaten direkt verarbeiten. Beispielsweise muss ein Webmailclient ggf. Bilder im MIME-Format codieren, bevor diese in die Cloud hochgeladen werden. Anwendungen, die Blobs verwenden, verwalten die Objektlebenszeit, im Gegensatz zu einem DataURI, der keine Objektverwaltung erfordert.

Die neuen Zwischenablage-APIs in IE11 vereinfachen die Bildeinfügeunterstützung über Blobs ungemein. Der folgende Code wandelt alle eingefügten Bilder in Blobs um.

 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); } } );

In der folgenden Tabelle werden die Entscheidungskriterien zwischen dataURI und Blob zusammengefasst:

	DataURI	Blob
Erfordert zusätzlichen JavaScript-Code	Nein	Ja
Funktioniert beim Einfügen von Bildern aus der Zwischenablage	Ja	Ja
Funktioniert beim Einfügen von HTML, das auf lokale Bilder verweist	Ja	Ja
Speicherort der Bilddaten	Innerhalb der Zeilen des eingefügten HTML-Codes (möglicherweise erheblich größerer HTML-Umfang)	Externe Verweise (kein Einfluss auf HTML-Länge, das Exportieren der Bilder beim Senden des HTML-Codes muss jedoch von der Anwendung ausgeführt werden)
Flexibilität der Bilddaten	Niedrig (muss zuerst aus dem HTML-Code extrahiert werden)	Hoch (kann mithilfe von Blob-Verweisen verarbeitet werden)

Sie können das Einfügen von Bildern mit dem Paste Image Test Drive selbst testen. Hier können Sie zwischen DataURI und Blob umschalten, um Bilder einzufügen.

Der Paste Image Test Drive testet, ob Ihr Browser Bilder mit DataURI oder Blob einfügen kann.

Einfügen von Listen als HTML-Listen

Mit IE11 können Benutzer Listen aus häufig verwendeten Office-Anwendungen einfügen und diese Listen dann innerhalb des Browser weiter bearbeiten. Nach dem Einfügen der Liste muss der Benutzer am Ende der Liste einfach nur die EINGABETASTE drücken, um neue Elemente zu erstellen. Diese Funktion ist insbesondere dann sehr nützlich, wenn formatierter Inhalt aus einer Textverarbeitungsanwendung wie Microsoft Word eingefügt werden soll. IE11 erkennt, dass der formatierte Text Listen enthält, und wandelt diese in echte HTML-Listen mit <ul>- und <ol>-Elementen um, sodass Sie diese Listen wie gewohnt bearbeiten können.

IE11 (rechts) ermöglicht das einfache und intuitive Einfügen und Bearbeiten formatierter Listen aus Anwendungen wie Microsoft Word (links)

Umfassende und intuitive Funktionen zum Rückgängigmachen

Webseiten erhalten mit IE11 automatisch bessere Funktionen zum Rückgängigmachen, und Webentwickler können in Feinabstimmung steuern, wie DOM-Manipulationen im Skript in den Stapel zum Rückgängigmachen einbezogen werden. In den meisten Fällen müssen sich Entwickler über den Stapel zum Rückgängigmachen keine Gedanken machen, da IE11 genau wie vorgesehen funktioniert. Wenn die Seite beispielsweise über die Schaltfläche „fett“ verfügt, die execCommand("bold") aufruft, wenn darauf geklickt wird, unterstützt IE11 automatisch das Rückgängigmachen dieser Aktion, sodass der Benutzer die Fettformatierung des Texts mit STRG-Z wieder rückgängig machen kann. IE11 verfolgt jede skriptinitiierte DOM-Änderung und versetzt sie in eine getrennte Einheit zum Rückgängigmachen.

Der Standardstapel zum Rückgängigmachen von IE11 behandelt die einfachste Skriptbearbeitung. Webentwickler müssen gelegentlich jedoch auch komplexeres, mehrstufiges Bearbeiten unterstützen. Beispielsweise wird von der Seite erkannt, dass der Benutzer „:)“ eingegeben hat. Dieser Text wird gelöscht und dafür einen Smiley eingefügt. IE würde in diesem Fall normalerweise zwei Rückgängigmachen-Einheiten erstellen (eine für das Löschen und eine für das Einfügen), und der Benutzer muss zweimal STRG+Z drücken, um die Skriptänderung rückgängig zu machen – dies entspricht wahrscheinlich nicht der Erwartung. IE11 verfügt über zwei neue Befehle, sodass Webentwickler folgendes Szenario umsetzen können: Benutzer können ms-beginUndoUnit aufrufen, das Skript ausführen und dann ms-endUndoUnit aufrufen. Alle DOM-Änderungen zwischen den beiden Befehlen werden in einer einzigen Einheit zum Rückgängigmachen gruppiert.

Webentwickler können den Rückgängigmachen-Verlauf mit dem Befehl ms-clearUndoStack programmgesteuert zurücksetzen. Diese Funktion ist hilfreich, wenn Sie die Editorinstanz für mehrere Kontexte verwenden. Wenn der Benutzer beispielsweise über mehrere E-Mails antwortet, können Sie den Stapel zum Rückgängigmachen der vorherigen E-Mail löschen, sobald eine neue geöffnet wird.

Testen Sie den Undo Test Drive, der die neuen Befehle zum Gruppieren der Einheiten zum Rückgängigmachen während des automatischen Ersetzens des Smileys verwendet.

Der Undo Test Drive testet Mehrfachvorgänge zum Rückgängigmachen in Ihrem Browser

Zusammenfassung

Mit Internet Explorer 11 können webbasierte Anwendungen und Websites umfangreiche Bearbeitungsoberflächen anbieten, die es den Benutzern ermöglichen, Daten einfacher zu erfassen und freizugeben. Benutzer können umfangreiche Inhalte erstellen, mit automatischem Einfügen von Bildern, verbessertem Kopieren und Einfügen formatierter Listen sowie intuitivem Rückgängigmachen.

Testen Sie diese neuen Funktionen von IE11 unter Windows 7 oder Windows 8.1, und teilen Sie uns Ihr Feedback über Connect mit.

Jianfeng Lin und Ben Peters
Program Manager, Internet Explorer