Что видим – то и получаем

eto'o

Хакер, номер #082, стр. 082-124-1

Создание систем визуального редактирования контента

Время идет, и вслед за развитием web-технологий меняются тенденции и актуальные, «модные» фишки. Вот скажи мне, десять лет назад, когда сделать собственный html-документ и залить его на бесплатный американский хостинг - было настоящим прорывом, можно ли было представить себе, что скоро любая секретарша сможет легко модифицировать, создавать и оформлять web-контент на корпоративном сайте? А сейчас - легче простого! Нет ничего сложного в том, чтобы сделать инструмент для визуального - как в ворде - редактирования html- и xml-документов. Сейчас я расскажу тебе о том, как функционируют такие редакторы и как можно прикрутить их к собственной системе.

Тема, о которой я тебе сейчас расскажу очень актуальна. Если ты посмотришь на любой коммерческий движок для сайтов, в любом из них будет возможность визуального редактирования материалов сайта. Удобный инструмент, с помощью которого любая блондинка сможет вставлять в текст картинки, создавать гиперссылки, менять шрифт текста и добавлять таблицы - это стандарт, жесткая необходимость. И понять это можно - зачем держать какого-то левого человека, который будет обновлять сайт, добавляя сотни html-документов вручную. Нормальные люди давно поняли, что лучше один раз заплатить за толковый движок, чем каждый месяц платить деньги за мифическую «поддержку сайта». Поэтому системы визуального редактирования контента нынче в ходу, и не только, кстати говоря, для систем управления web-сайтами. Но об этом мы еще поговорим. Сейчас же я начну с простого - расскажу, как осуществляется визуальное редактирование html-документов.

[начнем с простого]

Давай подумаем, как может работать визуальный web-редактор. От этого инструмента требуется, чтобы, в ответ на определенные действия пользователя, он изменял html-код документа и сразу отображал эти изменения. Совершенно понятно, что все это должно происходить в тесном взаимодействии с браузером: в конце концов, именно он показывает документ пользователю. Оказывается, что разработчики из Microsoft проявили дальновидность и встроили в Internet Explorer пятой версии поддержку специального режима редактирования: любой элемент document в объектной модели имеет свойство designMode, после установки которого в положение On происходит удивительная вещь: содержимое этого элемента становится открытым для редактирования, причем все изменения подхватываются и отображаются браузером «на лету». Вообще говоря, в этом режиме доступны все возможности стандартного редактирования документов: добавление стандартных объектов, изменение их свойств и т.д. Все эти функции доступны через различные методы и свойства редактируемого элемента. Соответственно, конечному пользователю необходимо предоставить понятный интерфейс для вызова этих процедур, для редактирования содержимого. Но довольно слов, давай перейдем к делам.

Первым делом необходимо создать контейнер, html-элемент, который будет содержать в себе редактируемый документ. Им может быть как фрейм (iframe), так и область div - это не так уж и важно. Мы остановимся на варианте с фреймом, поскольку он чуточку проще. Итак, создать элемент-контейнер можно следующим образом: