Редактирование страниц (5): Визуальный редактор

Вы уже знаете, что редактор контента страниц работает в двух режимах: как визуальный (WYSIWYG) редактор, и как редактор HTML-кода.

Для визуального редактора используетсф Tiny MCE, а для редактора кода, в т.ч. HTML-кода в редакторе страницы, - Code Mirror. Пользовательский интерфейс обоих адаптирован для работы в админке, а также расширен необходимыми для Composite C1 CMS возможностями.

Давайте сначала мы рассмотрим работу в визуальном редакторе.

Переключение между режимами редактора контента

По умолчанию, редактор контента страниц работает в режиме визуального редактора.

Чтобы переключиться в режим редактирования HTML-кода, вам нужно нажать кнопку "Код" (Code) в правом верхнем углу на вкладке "Контент" в редакторе страницы.

Нажав ту же саму кнопку, которая сменит свое название на "Дизайн" (Visual), вы переключитесь обратно в режим визуального редактора.

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

Возможности визуального редактора собраны в виде кнопок и ниспадающих списков  на панели инструментов на вкладке "Контент".

Здесь есть привычные для любого редактора кнопки для форматирования текста.

Кроме того, здесь есть два ниспадающих списка:

• Список стилей
  
  
  
• Список классов
  
  
  

Они позволяют применять стили к различным элементам контента.

Следует заметить, что можно настроить, какие кнопки и элементы списков будут доступны в редакторе. (Это отдельная тема и на ней нужно остановиться в отдельном сообщении. Для самых нетерпеливых  я скажу, что настройка кнопок и элементов меню осуществляется в файле ~\Frontend\Config\VisualEditor\common.xml. На англ. языке можно почитать о том, как это делается здесь.)

Кроме того, в редакторе имеется меню "Добавить" (Insert), пункты которого позволяют вставлять:

• таблицы
• изображения
• С1-функции
• специальные символы
• и некоторых контекстах - поля

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

Особое внимание я бы хотел уделить работе со стилями, о чем пойдет речь в следующем сообщении.

Далее мы рассмотрим два способа вставки текста.


Читайте также в этом блоге:

• Редактирование страниц (1): Настройки, контент, метаданные, просмотр
• Редактирование страниц (2): Общие и расширенные настройки
• Редактирование страниц (3): Публикация страниц по расписанию
• Редактирование страниц (4): Выбор шаблона страниц
• Изменения размера изображения
• Загрузка и вставка изображения
• Использование XSLT-функции на странице
• Новый редактор кода в C1