HTML редактор
179Веб-программирование --- HTML5 --- HTML редактор
Одним из принципов HTML5 является официальное признание частью стандарта нестандартных возможностей, которые уже широко используются веб-разработчиками. Одним из наилучших примеров следования этому принципу является включение в стандарт двух необычных атрибутов — contentEditable и designMode, которые позволяют сделать из обыкновенного браузера простой HTML-редактор.
Эти два атрибута не новы. Более того, их поддержка была добавлена еще в Internet Explorer 5 на заре становления Интернета. В то время большинство разработчиков отказалось от их использования, рассматривая их всего лишь как расширения Windows для Интернета.
Но с течением лет все больше браузеров начали копировать применяемый в IE практический, но причудливый подход к расширенному HTML-редактированию. В настоящее время все браузеры для настольных компьютеров поддерживают эти атрибуты, хотя они никогда и не были частью официального стандарта.
Редактирование элементов с помощью атрибута contentEditable
Рассмотрим первый инструмент для HTML-редактирования — атрибут contentEditable. Добавление этого атрибута к любому элементу позволяет редактировать содержимое этого элемента, когда оно отображается в окне браузера:
<div contentEditable>Вы можете редактировать этот текст.</div>
Скорее всего, вы не заметите никакой особенности в отображении этого текста в браузере. Но щелчок где-либо в отображаемом браузером тексте помещает в него курсор редактирования:
В приведенном ранее примере редактируемая область <div> содержала только текст. Но с такой же легкостью в нее можно вставить другие элементы, в действительности, элемент <div> может содержать разметку всей веб-страницы, делая ее редактируемой. Так, атрибут contentEditable можно применять к нескольким элементам, позволяя редактировать несколько областей окна браузера.
Некоторые браузеры поддерживают встроенные команды форматирования. Например, в Internet Explorer текст можно делать жирным, курсивом и подчеркивать с помощью комбинаций клавиш <Ctrl>+<B>, <Ctrl>+<I> и <Ctrl>+<U> соответственно. Отменить последнее редактирование в Firefox можно посредством комбинации клавиш <Ctrl>+<Z>. Все эти "горячие" клавиши можно использовать также в браузере Chrome.
Прежде чем приступить к использованию расширенного HTML-редактирования, стоит узнать, а для чего оно вообще-то применяется. Несмотря на мгновенно производимое впечатление, HTML-редактирование является специализированной возможностью, которая не каждому понравится. Имеет смысл использовать его, чтобы предоставить пользователям быстрый способ изменять HTML-содержимое, например, добавлять сообщения в блоги, вносить обзоры, подавать объявления или составлять сообщения другим пользователям.
Но даже если вы решите, что вам нужны такие возможности, атрибуты contentEditable и designMode могут оказаться не лучшим выбором для их реализации. Они не предоставляют разработчику всех удобств настоящего инструмента для веб-дизайна, таких как команды для редактирования разметки, возможность просматривать и редактировать исходный HTML-код, средства проверки орфографии и т.п.
Обычно атрибут contentEditable в разметку не включается. Вместо этого он включается с помощью JavaScript-кода и отключается по завершению редактирования:
<div id="editableDiv">Вы можете редактировать этот текст.</div>
<div>
<button onclick="startEdit()">Запустить редактирование</button>
<button onclick="stopEdit()">Остановить редактирование</button>
</div>
function startEdit() {
// Включаем редактирование элемента.
var element = document.getElementById("editableDiv");
element.contentEditable = true;
}
function stopEdit() {
// Отключаем редактирование элемента.
var element = document.getElementById("editableDiv");
element.contentEditable = false;
// Выводим редактируемый текст в окне сообщения
alert("Ваш отредактированный текст: \n" + element.innerHTML);
}
Редактирование страницы с помощью атрибута designMode
Атрибут designMode похож на атрибут contentEditabie, с той разницей, что он позволяет редактировать всю веб-страницу. Это может показаться слегка проблематичным, ведь при редактировании страницы отключаются события элементов. Тогда как мы сможем нажимать кнопки, чтобы управлять процессом редактирования? Решение этой проблемы простое — редактируемый документ помещается внутри элемента <iframe>, который ведет себя, как сверхмощное окно редактирования:
<h1>Редактируемая страница</h1>
<iframe id="pageEditor" src="mypage.html" width="100%"></iframe>
<div>
<button onclick="startEdit()">Запустить редактирование</button>
<button onclick="stopEdit()">Остановить редактирование</button>
</div>
<h1>Разметка</h1>
<div id="editedHTML"></div>
function startEdit() {
// Включаем редактирование в элементе <iframe>
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "on";
}
function stopEdit() {
// Отключаем редактирование в элементе <iframe>
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "off";
// Отображаем отредактированную разметку
var htmlDisplay = document.getElementById("editedHTML");
htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;
}
Этот пример должен дать вам представление о возможностях HTML-редактирования. Например, щелкните на изображении, чтобы выделить его для редактирования. Теперь можно изменять размеры изображения, перетаскивать его на новое место или совсем удалить его. То же самое можно делать и с элементами управления формы, если редактируемая страница содержит их.
Конечно же, если вы хотите превратить этот пример во что-то практическое, то вам нужно будет серьезно доработать его. Прежде всего следует добавить другие элементы управления редактированием. Если вы хотите получше разобраться в модели команд, в этом вам помогут разработчики браузера Opera (см. Rich HTML editing in the browser: part 1 и Part 2). Вторым делом нужно будет делать что-то полезное с отредактированной разметкой, например, отправить ее на сервер, используя объект XMLHttpRequest.
Еще одно предостережение. Этот пример не будет запускаться с локального жесткого диска на всех браузерах. Internet Explorer и Chrome заблокируют его по причинам безопасности, но на Firefox не будет никаких проблем. Для тестирования я использую локальный сервер.