tagElementPlugin - плагин редактирования элементов
Дополнение для редактирования элементов через выделение их тегов. Это очень удобно, так как можно редактировать элементы прямо в ресурсах, шаблонах и других чанках. Имейте ввиду, что tagElementPlugin не работает с визуальными редакторами.
Принцип работы
В ресурсе выделяем тег [[$chunk]]
и нажимаем Ctrl+Enter. В результате открывается немного измененное окно быстрого редактирования этого чанка. То же и со сниппетами. Чтобы перейти на страницу редактирования чанка или сниппета, нужно нажать Ctrl+Shift+Enter.
В случае, если чанка или сниппета с таким именем нет, то выводится окно с предложением его создания.
Возможность создания новых элементов очень пригодится верстальщикам, например, при создании шаблона для MODX. Манипуляции очень простые. На исходной странице вырезается нужный блок и вместо него вставляется тег чанка. Далее нужно выделить этот тег, нажать Ctrl+Enter и согласиться с предложением создать новый чанк с указанным именем. Затем в диалоге чанка вставляем вырезанный код и сохраняем его. И так для каждого блока. В итоге получается, например, такая структура
<!DOCTYPE html> <html lang="ru"> <head> [[$head]] </head> <body> // Шапка страницы [[$header]] // Меню [[$main_menu]] // Галерея [[$gallery]] // Содержание ресурса [[$content]] // Подвал страницы [[$footer]] </body> </html>
Если первый символ в выделенном фрагменте (не считая скобок [[) — это знак доллара ($), то ищется чанк. В противном случае, ищется сниппет. Можно выделить любое слово или несколько слов и таким образом создать нужный элемент. Работает и с Ace и без. Другие редакторы не пробовал.
Кроме того, можно принудительно открыть чанк по выделению. Для этого предназначены клавиши Ctrl+Alt+С и Ctrl+Shift+Alt+С. Эта возможность пригодится, чтобы открыть чанк, указанный, например, в параметре сниппета.
Копирование элемента
Элемент, открытый в диалоге быстрого редактирования, можно сохранить под другим именем. Для этого нужно нажать кнопку Сохранить как и указать новое название. После сохранения в текущем диалоге будет сохранённая копия, а не исходный элемент.
Формирование тега элемента
Многие знакомы с механизмом драг-н-дропа элементов - тянем сниппет из дерева элементов в содержание ресурса, в открывшемся окне опций указываем нужные значения параметров и получаем готовый тег с введенными параметрами. В tagElementPlugin используется этот же функционал. Теперь оформлять теги сниппетов (чанков редко) можно очень легко. Пишем название сниппета, например, pdoUsers (можно без скобок), выделяем его и нажимаем Ctrl+Insert (по-умолчанию). Открывается знакомое по драг-н-дропу окно. Вводим нужные значения, сохраняем и получаем готовый тег
[[pdoUsers? &tpl=`tpl.users` &fastMode=`1` &sortdir=`DESC`]]
Нужно переопределить параметры? Выделяем тег целиком, нажимаем Ctrl+Insert и изменяем значения. Выделенный блок заменится новым.
В теге сниппета можно указать свои собственные параметры, т.е. те, которых нет в параметрах сниппета (не все их создают для своих сниппетов), и они также появятся в диалоге параметров. Ровно также работает и указание набора параметров. Указав любой (а не только привязанный к элементу) набор параметров в диалоге получите соответствующие параметры.
Парсинг других тегов
tagElementPlugin умеет обрабатывать и другие теги:
- [[~1]]
- [[%lexicon_entry]]
- [[++system_setting]]
- [[#1.pagetitle]]
Последний открывает огромные возможности для тех, у кого установлен pdoParser.
Теперь подробнее. Выделяя любой из этих тегов, в ответ можно получить значение этого тега (при условии, что парсер смог его получить). Выделять можно и со скобками и без скобок. Т.е. и так [[++site_name]]
и так ++site_name
.
Важно понимать, что такой тег [[~[[+id]]
или такой [[#[[*id]].introtext]]
парсер обработать правильно не сможет, так как ему нужно точное значение id. А вот такой [[#[[++site_start]].pagetitle]]
сможет.
Кроме того, вы можете получить значение из суперглобальных массивов
[[#POST.key]] [[#SESSION.another_key]] [[#GET.key3]] [[#REQUEST.key]] [[#SERVER.key]] [[#FILES.key]] [[#COOKIE.some_key]]
Подробнее про pdoParser можно прочитать тут.
Хочу обратить внимание, что тег [[%lexicon_entry]]
распарсится только в том случае, если загружен соответствующий лексикон. В большинстве случаев используется лексикон из сторонних дополнений. Чтобы парсер смог получить значение этого тега, нужно добавить в тег параметр namespace:
[[%lexicon_entry? &namespace=`namespace компонента`]]
Поддержка файловых элементов
Компонент поддерживает следующий синтаксис:
{include 'file:relative/path/to/file'}
{'@FILE relative/path/to/file' | chunk}
{$_modx->runSnippet('@FILE relative/path/to/file', [])}
Чтобы открыть окно быстрого редактирования файла, нужно выделить текст в кавычках ('file:relative/path/to/file'
или '@FILE relative/path/to/file'
) и нажать Ctrl+Enter. Важным элементом являются префиксы file: и @FILE.
Второй вариант. Выделив только полное имя файла без указанных префиксов, нажать комбинацию Ctrl+Shift+F и в течение 2 секунд Ctrl+Enter.
Чтобы открыть страницу редактирования файла, нужно нажать Ctrl+Shift+Enter в обоих случаях.
Дополнительная информация
В tagElementPlugin добавлена проверка изменений формы элемента как в ресурсах. Если изменения были, то при переходе на другую страницу появится предупреждение. Почему-то в MODX такую проверку сделали только для ресурсов. Отключается это системной настройкой confirm_navigation.
Ещё есть возможность парсить чанки и сниппеты используя сочетание клавиш Alt+Enter. Результат парсинга сниппетов может быть непредсказуемым, потому что они могут грузить скрипты, которые негативно повлияют на админку. Поэтому рекомендую парсить только несложные сниппеты. Из-за такой опасности изначально эта возможность отключена. Чтобы ее включить, разкомментируйте блок parseElement в файле assets/components/tagelementplugin/js/mgr/tagelementplugin.js.
Системные настройки
Ключ | По-умолчанию | Описание |
---|---|---|
quick_editor_keys | {key: Ext.EventObject.ENTER, ctrl: true, shift: false, alt: false} | Сочетание клавиш для редактирования элемента в диалоге быстрого редактирования. Вместо константы Ext.EventObject.ENTER можно указать цифровой код клавиши. |
element_editor_keys | {key: Ext.EventObject.ENTER, ctrl: true, shift: true, alt: false} | Сочетание клавиш для перехода на страницу элемента. Вместо константы Ext.EventObject.ENTER можно указать цифровой код клавиши. |
quick_chunk_editor_keys | {key: Ext.EventObject.C, ctrl: true, shift: false, alt: true} | Сочетание клавиш для открытия чанка в диалоге быстрого редактирования. Вместо константы Ext.EventObject.C можно указать цифровой код клавиши. |
chunk_editor_keys | {key: Ext.EventObject.C, ctrl: true, shift: true, alt: true} | Сочетание клавиш для перехода на страницу чанка. Вместо константы Ext.EventObject.C можно указать цифровой код клавиши. |
element_prop_keys | {key: Ext.EventObject.INSERT, ctrl: true, shift: false, alt: false} | Сочетание клавиш для диалога параметров элемента. Вместо константы Ext.EventObject.ENTER можно указать цифровой код клавиши. |
Значения настроек должны быть указаны в формате объекта Javascript. Первое значение - это код клавиши. Остальные значения определяют состояния клавиш Ctrl, Shift и Alt
Ссылки
- Проект на Github.
- Статьи.
- Демонстрационное видео.