Улучшенные широкие возможности редактирования в Internet Explorer 11
Благодаря Internet Explorer 11 веб-приложения и сайты могут предоставлять широкие возможности редактирования, позволяющие легко захватывать данные и обмениваться ими. В сценариях создания контента в Интернете и в облаке, к которым относится электронная почта и редактирование документов в Интернете, включая использование Office 365, используется HTML5-компонент contentEditable. С помощью Internet Explorer 11 пользователи теперь могут вставлять изображения из различных источников, копировать списки с сохранением форматирования и еще проще отменять свои правки.
Всестороннее управление вставкой изображений из любых источников
Благодаря Internet Explorer 11 веб-сайты теперь имеют прямой доступ к изображениям, вставляемым из буфера обмена. Internet Explorer 11 — первый браузер, поддерживающий как вставку изображений непосредственно из буфера обмена (например, из фоторедактора или PrintScreen), так и вставку HTML-кода, содержащего локальные изображения (например, из таких приложений, как Microsoft Office, в которых изображения временно хранятся в локальных папках). Для кодирования этих изображений можно использовать DataURI или большой двоичный объект.
С помощью новой возможности кодирования DataURI в Internet Explorer 11 веб-сайты могут автоматически поддерживать вставку изображений из буфера обмена без использования дополнительного кода на Javascript. По умолчанию Internet Explorer 11 вставляет изображения из буфера обмена, преобразуя их в DataURI и вставляя их в виде HTML в contentEditable. Например, если вы рисуете красный прямоугольник в фоторедакторе и копируете его в contentEditable, это изображение становится тегом <img> в разметке, которую вы редактируете:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D">
Веб-разработчики могут использовать большой двоичный объект вместо DataURI, добавив несколько строк кода. С помощью больших двоичных объектов приложения могут напрямую обрабатывать данные изображений. Например, клиент веб-почты может кодировать изображения в формат MIME перед их загрузкой в облако. Приложения, использующие большие двоичные объекты, управляют временем жизни объектов в отличие от DataURI, которому не требуется управление объектами.
Новые API-интерфейсы буфера обмена в Internet Explorer 11 существенно упрощают поддержку вставки изображения в виде большого двоичного объекта. Следующий код преобразует все вставляемые изображения в большие двоичные объекты.
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); } } );
В следующей таблице кратко описано, как сделать выбор между dataURI и большим двоичным объектом:
| DataURI | Большой двоичный объект | |
| Требуется дополнительный код JavaScript | Нет | Да |
| Работает при вставке изображений из буфера обмена | Да | Да |
| Работает при вставке HTML со ссылками на изображения, хранящиеся локально | Да | Да |
| Где хранятся данные изображения | Внутри вставленного HTML-кода (размер HTML-кода может существенно увеличиться) | Внешняя ссылка (не влияет на размер HTML-кода, но приложению необходимо выполнять экспорт изображений при отправке этого HTML-кода) |
| Гибкость данных изображения | Низкая (сначала необходимо извлечь изображение из HTML) | Высокая (возможна обработка с использованием ссылки на большой двоичный объект) |
Вы можете опробовать вставку изображений в тестовой демонстрации вставки изображений, где можно переключаться между использованием DataURI или большого двоичного объекта для вставки изображений.
В тестовой демонстрации вставки изображений проверяется, может ли ваш браузер вставлять изображения, используя DataUIri или большой двоичный объект
Вставка списков в виде списков HTML
В Internet Explorer 11 пользователи могут вставлять списки из популярных офисных приложений и продолжать редактировать эти списки в браузере. После вставки списка пользователь может просто нажать клавишу ВВОД в конце списка, чтобы создать новые элементы. Эта возможность особенно важна при вставке форматированного контента из текстовых редакторов, таких как Microsoft Word. Internet Explorer 11 распознает, что форматированный контент содержит список, и преобразует его в список HTML с использованием элементов <ul> или <ol>, чтобы вы могли редактировать этот список ожидаемым образом.
Вставка и редактирование форматированных списков из таких приложений, как Microsoft Word (слева), выполняется в Internet Explorer 11 просто и естественно (справа)
Широкие и естественные возможности отмены
Благодаря Internet Explorer 11 пользователи автоматически получают улучшенные возможности отмены операций на веб-страницах, а веб-разработчики — высокий уровень управления тем, как действия с моделью DOM в скрипте участвуют в стеке отмены операций. В большинстве случаев разработчикам не нужно беспокоиться о стеке отмены операций, Internet Explorer 11 просто работает ожидаемым образом. Например, если страница содержит кнопку "полужирный", вызывающую execCommand("bold") при нажатии, Internet Explorer 11 автоматически поддерживает отмену этого действия, и пользователь может нажать сочетание клавиш Ctrl-Z, чтобы отменить использование полужирного начертания. Internet Explorer 11 отслеживает каждое изменение модели DOM, инициированное скриптом, и помещает его в отдельный блок отмены операций.
Используемый по умолчанию стек отмены операций Internet Explorer 11 обрабатывает большинство простых операций редактирования скрипта, но иногда веб-разработчикам требуется поддержка более сложных многошаговых операций редактирования. Например, страница может обнаружить, что пользователь ввел ":)", удалить этот текст и вставить глиф улыбающегося лица. В этом случае Internet Explorer обычно создавал два блока отмены (один — для удаления, второй — для вставки), и пользователю требовалось дважды нажать Ctrl+Z, чтобы отменить изменение скрипта. Вероятно, это не то, что вы ожидаете. Internet Explorer 11 добавляет две новые команды, чтобы веб-разработчики могли реализовать этот сценарий: вы можете вызвать ms-beginUndoUnit, запустить свой скрипт, а затем вызвать ms-endUndoUnit. Все изменения модели DOM между этими двумя командами будут сгруппированы в один блок отмены.
Веб-разработчики могут программным образом сбросить историю отмены, используя команду ms-clearUndoStack. Эта возможность полезна, если вы многократно используете ваш экземпляр редактора для нескольких контекстов. Например, когда пользователь отвечает на несколько сообщений электронной почты, вы можете очищать стек отмены операций от предыдущего сообщения при открытии нового сообщения.
Ознакомьтесь с тестовой демонстрацией отмены, в которой эти новые команды используются для группировки блоков отмены во время автозамены на глиф улыбающегося лица.
В тестовой демонстрации отмены проверяются многошаговые операции отмены действия в вашем браузере
Подводя итоги
Благодаря Internet Explorer 11 веб-приложения и сайты могут предоставлять широкие возможности редактирования, позволяющие легко захватывать данные и обмениваться ими. Пользователи могут создавать насыщенный контент с использованием автоматической вставки изображений, улучшенных возможностей копирования и вставки форматированных списков и естественной операции отмены действия.
Опробуйте эти новые возможности с помощью Internet Explorer 11 в Windows 7 или Windows 8.1 и поделитесь с нами своими впечатлениями через сайт Connect.
Янфенг Лин (Jianfeng Lin) и Бен Петерс (Ben Peters)
Руководители программ, Internet Explorer