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

Ссылки

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.