Визуальный редактор

В любой работе важен хороший инструмент. Модуль «SHOWROOM: универсальная онлайн-примерочная» обладает мощным встроенным WYSIWYG редактором для работы со страницами сайта. Благодаря визуальному редактору мы прямо в браузере выполняем многие операции: от простого редактирования текста до настройки компонентов. По сути, с помощью визуального редактора мы способны редактировать любую информацию на сайте.

Визуальный редактор позволяет работать с:

• текстом;
• графикой и видео;
• компонентами и сниппетами.

Уточним, что редактор работает во всех браузерах версий:

• Firefox версии 3.x и выше;
• Opera версии 12.x и выше;
• Safari версии 5 и выше;
• Google Chrome версии 7 и выше;
• Internet Explorer версии 11.

Визуальный редактор не отображается в формах редактирования, если:

• его использование запрещено администратором сайта;
• в форме редактирования включён иной режим работы с текстом;
• он отключен в настройках модуля Информационные блоки (это касается только форм редактирования элементов и разделов инфоблоков).

Из чего состоит редактор

1 - панель переключения режимов редактирования. На этой панели мы переключаемся между визуальным режимом и режимом исходного кода.

2 - панель инструментов визуального редактора. Здесь расположены все те инструменты и команды, которые мы будем использовать для работы с текстом и графикой.

3 - рабочая область. Это непосредственно зона для редактирования.

4 - панель компонентов и сниппетов.

5 - панель навигации.

Теперь разберемся для чего нужна каждая панель.

Панель переключения режимов редактирования

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

Также существует совмещенный режим — рабочая область делится на две части для визуального режима и режима кода.

Соответственно на панели мы видим кнопки для переключения между этими режимами:

• - режим исходного кода.

• - режим визуального редактирования.

• - совмещенный режим по горизонтали.

• - совмещенный режим по вертикали.
  

Панель инструментов

Кнопки инструментов разделены по группам по своему назначению. Например, группа для форматирования текста включает в себя кнопки жирного текста, курсива, подчеркивания и т.д. Обратите внимание — набор кнопок на панели может немного отличаться в зависимости от режима работы и настроек.

Описание кнопок:

Панель компонентов и сниппетов

Компоненты — это своеобразный блок из конструктора LEGO. И из этих блоков мы «выстраиваем» публичную часть сайта.

Компонент — это программный код, оформленный в визуальную оболочку, выполняющий определённую функцию какого-либо модуля по выводу данных в Публичной части. Мы можем вставлять этот блок кода на страницы сайта без непосредственного написания кода.

Обратите внимание, что при работе с информационными блоками панель Компоненты не отображается. Также панель может быть скрыта при редактировании страницы. Раскройте её нажатием на стрелочку в правой части формы.

Сниппет — это заранее подготовленный фрагмент текста или кода, этакие заготовки. Предположим, что вам каждый день приходится вставлять на страницы сайта одну и ту же таблицу или форму. Вы можете сохранить эту таблицу в сниппетах и затем простым перетаскиванием размещать ее в нужном месте.

Панель навигации по элементам и сущностям

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