Инструкция по созданию сайта на MODx. Урок 10 — Работа с визуальным редактором. Настройка TinyMCE

В прошлом уроке мы с вами более подробно поговорили о специальных тегах MODx. Теперь вы хорошо себе их представляете и умеете применять на практике. В этом уроке мы разберем один из наиболее важных элементов в любой системе управления. А именно — визуальный редактор. Визуальный редактор — это та вещь, которая делает работу с HTML кодом простой для пользователя с любым уровнем подготовки.

В MODx по умолчанию устанавливается визуальный редактор TinyMCE. С его помощью вы либо ваши клиенты без труда сможете наполнять сайт содержимым или редактировать уже имеющийся контент на сайте. Этот визуальный редактор позволяет вставлять и работать с изображениями, медиа-файлами, таблицами, ссылками, указывать стили оформления текста и многое другое. Одним словом, вещь в хозяйстве незаменимая и это прекрасно понимают не только рядовые разработчики, но и крупные корпорации, например, Microsoft, Apple, Oracle и другие, которые используют этот редактор в своих онлайн приложениях.

Не обошли стороной TinyMCE и разработчики MODx. При этом визуальный редактор настолько гибко встроен в эту систему, что его настройка может осуществляться очень просто.

Внешний вид визуального редактора вы сможете увидеть на странице редактирования ресурсов.

На рисунке ниже показан внешний вид редактора после установки MODx:

Но по умолчанию визуальный редактор не содержит в себе все заложенные в него функции. Многие из которых очень полезны.

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

Наверное, некоторые из этих функции уже будут избыточными, но вы все равно должны о них знать. Быть может какой-нибудь из этих кнопок будет так не хватать вашему клиенту либо вам при редактировании сайта.

Настройка TinyMCE в MODx

Настроить визуальный редактор TinyMCE в MODx проще простого. Все настройки осуществляются на странице системной конфигурации на вкладке «Интерфейс и представление». Попасть на нее вы сможете проследовав: Инструменты → Конфигурация → Интерфейс и представление. В самом низу страницы вы увидите поля для настройки редактора.

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

В поле «Тема WYSWYG редактора» вы можете выбрать тему из предложенных вам по умолчанию. От выбора темы зависит набор функций, которыми будет располагать ваш редактор. Начиная с версии MODx 1.0.4 в этом списке можно выбрать полнофункциональную версию визуального редактора. Для того чтобы посмотреть в действии все доступные функции, можете выбрать из выпадающего списка пункт «full».

Но, чаще всего, все функции для редактора не требуются. И многие из них, как я говорил раньше, являются избыточными. Поэтому мы создадим с вами свою собственную индивидуальную тему. Для этого в поле «Тема WYSWYG редактора» выберите пункт «Индивидуальная».

И после этого начинаем заполнять оставшиеся поля для индивидуальных кнопок и плагинов. Я вам покажу, каким набором плагинов и кнопок пользуюсь я.

В поле «Индивидуальные плагины» вписываем через запятую названия используемых плагинов:

style, advimage, advlink, searchreplace, print, contextmenu, paste, fullscreen, nonbreaking, xhtmlxtras, visualchars, media, table

В поле «Индивидуальные кнопки» Row 1 вписываем названия кнопок, которые хотим видеть на первой строке:

pastetext, pasteword, |, nonbreaking,charmap, |, image, link, unlink, anchor, media, |, cleanup, removeformat, |, fullscreen, print, code, formatselect

В поле «Индивидуальные кнопки» Row 2 вписываем названия кнопок второго ряда:

bold, italic, underline, strikethrough, sub, sup, |, bullist, numlist, outdent, indent, |, justifyleft, justifycenter, justifyright, justifyfull, |, styleprops, styleselect

В поле «Индивидуальные кнопки» Row 3 вписываем названия кнопок третьего ряда:

tablecontrols

После того, как вы заполните поля для индивидуальной темы как указано выше, вы получите редактор следующего вида:

Обратите внимание, что вы можете менять расположение кнопок, как угодно. Также вы можете удалять и добавлять другие кнопки. Полный набор возможных плагинов и кнопок TinyMCE вы можете посмотреть в примере на официальном сайте редактора на вкладке «View Source».

Еще одно поле, о котором бы хотел упомянуть —  это поле селекторы CSS. В нем вы можете вписать список селекторов CSS, который будет доступен в визуальном редакторе в выпадающем списке «Стиль». Это поле можно применять, когда у вас на странице часто использутся какой-нибудь CSS класс, чтобы иметь возможность быстро его применить для тех или иных объектов.

Например, если вы часто используете на странице CSS классы".code" и ".list-line", чтобы их добавить в редактор надо прописать следующую конструкцию

Код=code;Оформление списка=list-line

При этом не ставьте точку с запятой после последней записи.

В видео к этому уроку показано на примере, как настраивать визуальный редактор в MODx

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx: