Визуальный html-редактор уже не раз упоминался на страницах книги. Познакомимся с ним поближе.

Визуальный html-редактор предоставляет возможность работы как напрямую с текстовой и графической информацией в режиме реального времени, так и с визуальными компонентами, посредством которых происходит отображение данных, хранимых в информационных блоках или специальных файлах (включаемые области).

Кроме того, визуальный html-редактор позволяет вносить изменения в шаблоны сайта.
Визуальный редактор разработан на языке JavaScript и корректно работает в следующих браузерах: Internet Explorer (начиная с версии 7.0), Firefox (начиная с версии 3.0), Opera (начиная с версии 10), Safari (начиная с версии 5.0), Google Chrome (начиная с версии 7.0).

Визуальный редактор доступен одновременно из публичного и административного разделов сайта. Принцип работы визуального редактора не зависит от того, из какой части сайта он был вызван. Единственное отличие визуального редактора, вызываемого из административного раздела, по сравнению с редактором из публичного раздела - это дополнительный набор доступных инструментов.

Приведен интерфейс визуального редактора, вызываемого из административного раздела.

В состав визуального редактора входят:

1. Общая панель инструментов (метка 1), состоящая из группы меньших панелей, каждая из которых предназначена для определенного круга задач.

Встроенные панели:

• стандартная - фиксированная панель, содержащая основные команды: добавление таблицы, вставка документа, изображения, создание гиперссылок, загрузка флеш-роликов и др.;
• для работы с шаблоном сайта - панель переключения таблиц стилей и шаблонов сайта;
• управление и настройки - панель команд администратора: сохранить, выйти из редактора;
• стиль - панель управления стилями текста;
• форматирование - панель, содержащая инструменты форматирования текста.

2. Панель переключения режимов редактирования (метка 2). Содержит четыре кнопки переключения между режимами:

• переход от визуального режима работы к режиму работы с исходным кодом.

3. Рабочая область (метка 3) - область для ввода информации или размещения визуальных компонентов.

4. Панель задач (компоненты) (метка 4) - содержит перечень доступных визуальных компонентов.

5. Панель отображения свойств объектов (метка 5). При установке курсора мыши на объект (например, визуальный компонент) свойства объекта будут выведены в области данной панели.

6. Кнопки включения/отключения панелей 4-5 (метка 6).