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

Включение редактирование из JavaScript-кода

Редактирование страницы с помощью атрибута 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 не будет никаких проблем. Для тестирования я использую локальный сервер.