Виртуальная голубятня

Константин Клягин

Хакер, номер #072, стр. 072-120-4

Редактируем

Подсластим пилюлю аскетичности нашего веб-мейла удобным интерфейсом для редактирования отсылаемых сообщений. Выбор был остановлен на HTMLArea - заменителе (а скорее, расширителе) стандартного <textarea> с возможностью визуального редактирования HTML-кода. Выглядит это практически как редактор Word в веб-странице (http://www.dynarch.com/projects/htmlarea/). Расширителем элемента <textarea> этот компонент я назвал не зря. Он именно навешивается на <textarea> , расширяя его возможности. Работает он только в Internet Explorer и Mozilla. Но что же будет при обращении к нему браузером, который не поддерживается? Не надо нервничать. Что бы ни было, по сравнению с апокалипсисом это будет ничто. Думай позитивно.

А если серьезно, то ничего страшного не случится. HTMLArea просто не загрузится, а тэг <textarea> будет интерпретирован как обычный элемент для редактирования многострочного текста в HTML.

Прикрутка HTMLArea к странице очень хорошо описана в документации, что идет в комплекте. Вкратце, делается это так. Для начала распакуем архив HTMLArea-3.0-rc1.zip (сейчас это последняя версия) в подкаталог htmlarea/ в папку со скриптами poomail. Затем возьмемся за страницу, в которой контрол будет использоваться. Вставкой на JavaScript выставим параметры, используемые при загрузке основного скрипта:

<script type="text/javascript">

_editor_url = "htmlarea/";

_editor_lang = "ru";

</script>

Эти две переменные задают путь к вспомогательным файлам и язык сообщений соответственно. Благо, добрые люди успели перевести сообщения на великий и могучий. Основной код подключаем так:

<script type="text/javascript" src="htmlarea/htmlarea.js"> </script>

А теперь определим функцию, которая будет вызываться по окончании загрузки страницы. В ней будет создаваться экземпляр класса HTMLArea, привязанный к определенному элементу <textarea> .

<script type="text/javascript">

function initEd() {

ed = new HTMLArea("ta");

ed.generate();

}

</script>

Чтобы по имени ta класс нашел нужный элемент, при определении оного нужно задать атрибут id, вот так:

<textarea name="text" rows="15" cols="100" style="width: 100%;" id="ta">

Ну и наконец, в <body> пропишем JS-функцию, которую нужно звать по окончании загрузки страницы:

<body onLoad='initEd()'>

В нашем случае все это происходит в файле send.php, который, помимо всего прочего, предоставляет еще и возможность редактирования сообщения перед отправкой. Грузится страница с <textarea> , имеющим нужный id. В ней же подключается и код HTMLArea. По окончании загрузки вызывается функция, которая делает из какашки конфетку. Так из простого <textarea> получается встроенный в страницу визуальный редактор HTML.