mpcVisualEditor
Визуальное редактирование контента прямо на странице
Редактирование полей
Основная работа в редакторе — правка значений полей прямо на странице. Это самый частый сценарий: открыли страницу с ?mpcedit=1, навели на блок, кликнули — поправили.
Как это работает
В режиме правки редактируемые блоки подсвечиваются, а при наведении в углу появляется значок-подсказка о типе поля (карандаш для текста, картинка для изображения и т.д.). Клик открывает подходящий редактор — компонент сам понимает, какой нужен, по типу поля (заданному в разметке через data-mpc-ftype, по типу TV или по прототипу из mpc_base). Менеджеру не нужно ничего выбирать — текст правится как текст, картинка как картинка.
Каждое поле сохраняется отдельно, сразу после изменения. После сохранения редактор подсказывает обновить страницу, если нужно увидеть точный итоговый вид (например, с обрезкой картинки или подстановкой перевода).
Поля секций и поля ресурса правятся одинаково
Не важно, поле это секции (data-mpc-field), поле ресурса (data-mpc-rfield — заголовок, текст, контент) или TV-поле (data-mpc-tv) — редактор открывается по типу поля, а разница в том, куда сохранится значение, остаётся «под капотом».
Шпаргалка: тип поля → редактор
Тип определяется по data-mpc-ftype в разметке (или по типу TV / прототипу mpc_base). Менеджеру выбирать ничего не нужно — клик открывает нужный редактор сам.
| Тип поля | data-mpc-ftype | Что открывается по клику |
|---|---|---|
| Простой текст | text (или без ftype) | правка на месте (инлайн) |
| Многострочный текст | textarea | окно с полем ввода |
| Форматированный текст | richtext | окно RTE с форматированием |
| Число | number | окно с числовым полем |
| Дата | date | окно выбора даты и времени |
| Цвет | color / colorpicker | палитра + HEX-поле |
| Выбор одного | listbox, option | список / переключатели |
| Выбор нескольких | checkbox, listbox-multiple | флажки / мультивыбор |
| Теги | tag, autotag | чипсы (добавить/убрать) |
| Ссылка | (тег <a>) | правка адреса ссылки |
| Изображение | img | превью + выбор/загрузка файла |
| Адаптивная картинка | picture | главное фото + источники |
| Видео / аудио | (теги <video>/<audio>) | файл, постер, источники, атрибуты |
| Файл | file | файловый менеджер |
| Список (повторяемый блок) | (список data-mpc-item) | окно строк — см. Списки и строки |
Текстовые поля
Это самый частый тип. Три варианта — по сложности содержимого:
- Простой текст — правится прямо на месте: клик ставит курсор в текст, печатаете, клик вне поля или Esc — готово.
- Многострочный текст — открывается окно с полем ввода (для абзацев, описаний).
- Текст с форматированием (richtext) — открывается редактор с кнопками жирного/курсива/списков и т.п.
Что остаётся при очистке
При сохранении форматированного и текстового содержимого «опасные» вещи вырезаются (обработчики событий on*, javascript:, небезопасный style). Какие HTML-атрибуты при этом сохранять — задаётся настройкой mpcve_allowed_attrs.
Число и дата
- Число — окно с числовым полем ввода.
- Дата — окно с выбором даты и времени; нестандартный формат правится как обычный текст, чтобы не исказить значение.
Цвет
Поля типа «цвет» (color / colorpicker) открывают палитру с выбором цвета и текстовым полем для ручного ввода HEX-кода — они синхронизированы. Значение хранится без # (как принято в админке MODX).
Выбор из списка
Поля с вариантами открывают список для выбора:
- выпадающий список — выбор одного значения;
- переключатели (radio) — выбор одного варианта;
- флажки (checkbox) и мультивыбор — выбор нескольких значений.
Варианты берутся из разметки (data-mpc-values) или из списка значений TV. Если варианты заданы запросом к базе (@SELECT), редактор подгрузит их с сервера.
Теги
Поля-теги правятся как чипсы: добавляете и удаляете отдельные теги, хранятся они строкой через запятую.
Ссылки
Если поле — это сам тег ссылки (<a>), клик по нему открывает правку адреса (куда ведёт ссылка). Текст ссылки правится отдельно — кликом по тексту внутри неё (если он размечен своим полем).
Изображения
Клик по картинке открывает окно с превью и двумя способами задать изображение:
- выбрать существующее — через файловый менеджер из вашего медиа-источника;
- загрузить новое — перетаскиванием или выбором файла (лимит размера — настройка
mpcve_max_upload).
Там же правятся alt и title картинки.
Адаптивная картинка
Для <picture> редактор даёт править главное изображение и его источники (<source> под разные экраны) — каждый со своим файлом.
Видео и аудио
Клик по видео или аудио открывает окно, где можно задать файл, постер (для видео), источники (<source>) и атрибуты воспроизведения (автозапуск, контролы, цикл, без звука). Внешние ссылки при сохранении скачиваются в медиа-источник — как у картинок.
Файл
Поля-файлы (file) открывают файловый менеджер для выбора или загрузки файла — возвращается путь к нему.
Скрытые поля блока
Иногда поле есть в конфигурации, но не видно на странице — оно вырезано из вёрстки (data-mpc-remove) или вспомогательное. Чтобы такие поля можно было править, у блока есть кнопка-триггер, открывающая панель со скрытыми полями этого блока — там они правятся теми же редакторами, что и обычные.
Правка повторяющихся блоков (добавить/удалить/переставить строки списка) вынесена в отдельный раздел — Списки и строки. Контакты и системные настройки — Контакты и Системные настройки.