Codemirror настройка modx revo



Codemirror настройка modx revo

!!CodeMirror-MODx 1.2 на базе CodeMirror 3.13

• Довавлен поиск (пример использования http://codemirror.net/demo/search.html)
• Маркеры теперь сворачивают код в таб
• Сохраняется история редактирования (отменить, повторить, положение курсора)
• Добавлено documentDirty=true; при изменении содержимого

!!CodeMirror-MODx 1.1 b на базе CodeMirror 3.13

• удалена поддержка selectionMatches
• добавлен плагин Emmet и поддержка им тегов MODx(в тестовом тежиме)
• создана и сделана ветка compressed(все файлы сжаты удалены лишнии)
• исправлен баг с табами
• доработана подсветка MODx
• добавлена поддержка подсветки файлов в «Управление файлами» (необходимо изменить файл files.dynamic.php)
• добавлено сохранение фулскрин режима
• горячие клавиши вынесены в codemirror.plugin.php

!!CodeMirror-MODx 1.0 b на базе CodeMirror 3.13

• Подсветка js, css, json, xml в документах с соответствующими типами.
• Различные темы.
• Высота блока редактора зависит от контента.
• Нумерация строк.
• Подсветка активной линии(&activeLine).
• Настраиваемый размер TAB(&tabSize).
• Точки остановки.
• Сворачивание в таб функций и условий(JS), содержимого тегов(HTML) (Ctrl+Space).
• Подсветка одинаковых «слов»(&selectionMatches).
• Full Screen(F11).
• Подсветка синттаксиса MODx.
• Горячие клавиши.

Источник

Первичная настройка MODx Revo

Данная статья рассказывает о настройках MODX REVO версии до 2.3. Начиная с версии 2.3 пошел другой интерфейс, и мы выпустили новую стать о настройке MODX 2.3 и выше.

MODx — это скорее CMF, чем CMS. Чем отличается Content Management Framework от Content Management System? Кардинальное отличие в том, что CMS может настроить любой человек без знания «программирования», а у Content Management Framework есть свой внутренний язык и возможность разрабатывать новые и видоизменять старые модули на одном из языков программирования, в случае MODx Revo таким языком является PHP для логики и библиотека Java Script — Ext Js — для визуального представления в админке (back-end). Следовательно, можно сделать вывод, что нам, как минимум, понадобится подсветка синтаксиса в Modx.

Пункты меню MODx Revo, которые нам понадобятся

Подсветка синтаксиса в MODx Revo с Ace

Для подсветки синтаксиса мы выбираем пакет Ace. Почему именно его, а не CodeMirror ? В отличие от CodeMirror Ace позволяет:

• форматировать выделенный код при помощи комбинаций клавиш: Tab (сдвинуть вправо) и Shif+Tab (сдвинуть влево)
• поддерживает перетаскивание ресурсов и элементов из дерева в код
• дополняет открывающиеся скобки, кавычки и теги закрывающимися
• подсвечивает строчку с ошибкой в php-коде
• в файлах стилей (css) подсказывает синтаксис по комбинации клавиш CTRL+пробел

На заметку : полноэкранный режим редактирования кода в Ace включается комбинацией клавиш Ctrl+F11.

Почему Ace не подсвечивает код

Если Ace был поставлен после Codemirror и не подсвечивает код, то надо проверить настройки визуальных редакторов в MODx. Переходим в меню Система -> Настройка системы. Выбираем в фильтре «визуальный редактор»:

Включить подсветку содержимого ресурса через Ace

Если надо подсветить HTML у полей ресурсов (документов) с типом ввода «текстовой редактор», то следует отключить WYSIWYG функцию. Отключается в том же меню: Система -> Настройка системы, визуальный редактор:

Подключение WYSIWYG редактора — TinyMCE

Для удобной работы с текстом страниц клиентам подключается WYSIWYG редактор — What You See Is What You Get. Который позволяет людям, не знакомым с HTML, форматировать текст и вставлять в него изображения и ссылки. Для этого надо установить пакет — TinyMCE.

Преднастройка для SEO — пакет translit

По умолчанию MODx генерирует адреса страниц вида

Источник

Прямой эфир

3fir 7 ноября 2020, 17:01

skor 30 октября 2020, 22:11

andrewk74 29 октября 2020, 16:34

Begemotto 27 октября 2020, 19:32

Grinyaha 22 октября 2020, 13:41

Redduck 19 октября 2020, 16:01

SerNeo 15 октября 2020, 14:27

skor 10 октября 2020, 23:45

Инфо о авторе топика

Михаил

Контакты

Топики пользователя

Готовые дополнения для MODX

Категории

Подразделы блога

Блоги

• Готовые дополнения для MODX148
• Проект MODX.im50
• Оформления для frontend’a и backend’a41
• Для модераторов13
• Интегрированные среды разработки (IDE)13
• MODX custom by Dmi3yy51
• bid-cart24
• Социальная сеть12
• MODX Cloud8
• Юмор10
• Краундфандинг2
• Быстрые решения104
• В разработке47
• Вопросы779
• Обьявления о работе288
• Безопасность82
• Новости70
• Tips & tricks90
• Сайты на MODX47
• Форки MODX26
• Документация и уроки63
• Эксперименты и исследования59
• evoShop3

[EVO] Обновление CodeMirror (3.13) MODx Evo

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

Скачать и присоединиться к разработке всегда можно на GitHub.
Результат же можно увидеть в сборке MODX custom by Dmi3yy 1.0.10-d5.3RC.

Возможности:

Функционал:

«Базовый»

Открывая плагин мы сразу обращаем внимание на

1. подсветку синтаксиса
2. нумерацию строк
3. поддержку TAB и т.д.

на мой взгляд это базовые вещи без которых никуда и которых очень не хватает в стандартной сборке.

«Расширенный»

Если внимательнее присмотреться то можно разглядеть несколько интересностей

1. подсветка активной линии
2. точки останова возле цифр
3. различные темы
4. «плавающая высота» по размеру кода
5. настраиваемая ширина TABуляции

всё это так или иначе может помочь при разработке.

«Профи»

Ну и самое интересное

1. Full Screen по нажатию на F11
2. Сворачивание в таб функций и условий(JS), содержимого тегов(HTML) (Ctrl+Space)
3. Подсветка одинаковых «слов»

при фулскрине сворачивается левый фрейм, а блок с кодом растягивается на весь правый. Сворачивание в таб мне показалось очень удобным и теперь постоянно его использую что бы спрятать всё лишнее. А при выборе определённого куска кода CodeMirror бросается на поиски совпадений и подсвечивает их.

«Интеграция в MODx»

Удалено:

По сравнению с предыдущей версией плагина была удалена функция сохранения позиции курсора — по причине того что данный функционал был тщательно закомментирован, а после удаления комментариев работать не захотел.

Есть, но не добавлено:

1. Autocompletion (XML) (не вижу смысла )
2. Search/replace(вполне хватает стандартных)
3. Mixed font sizes(уменьшит читаемость)
4. close tag(долго думал, но решил что пока не нужно)

Планы:

1. заменить на сжатую версию (экономия места в 3 раза) пока не могу — сделать очень ругается
2. упростить код, улучшить
3. доработать подсветку MODx
4. добавить поддержку в текстовый редактор в файловом менеджере

Оставляйте ваши комментарии.

54 комментария

Решил обновить на готовом сайте. Полностью заменил папку codemirror. Плагин не заработал. Судя по ошибкам в консоли, не хватало значений параметрам:
matchBrackets, activeLine, selectionMatches. То есть новым добавленным.
Получается, что в файле codemirror.plugin.php этим параметрам назначены значения по умолчанию false или true. А дальше эти значения подставляются в javascript. Но подставлять надо текстовое значение, а передается булево. Поэтому получается пустота вместо значения. И, следовательно, ошибка
Я у себя решил это добавлением в конфигурацию плагина этих трех параметров.

И идущий сейчас у вас в проекте файлик codemirror.plugin.tpl стоит обновить. Указать там актуальную версию и новую конфигурацию. Это уже сделано в сборке Дмитрия.

А еще мне очень не хватает перетаскивания выделенного фрагмента кода, как это есть во всех десктопных редакторах. И на том же jsfiddle.net где используется CodeMirror. Но в modx почему-то не работает. Сколько не пытался, так и не понял почему.

Еще был бы рад сворачиванию функций и тегов не только по Ctrl+Space, но и кликов по какой-нить стрелочке в левом поле с нумерацией. Не знаю — возможно ли это вообще у этого плагина.

И еще. Спасибо вам большое за проделанную работу.

Перетаскивание попробую реализовать в ближайшее время.
Со стрелкой всё сложнее — CM автоматически не определяет что он может свернуть. а значит если я добавлю сбоку стрелочку с онкликом — сворачивание то они будут в каждой строке, но постараюсь придумать

Источник

Code Mirror — динамичная подсветка кода в браузере

Что такое CodeMirror?

Code Mirror — это мощная библиотека Java Script для подсветки синтаксиса около сорока с лишним языков программирования и разметки. Главным отличием от весьма известного Syntax Highlighter является реализация динамической продвинутой подсветки кода буквально на ходу, как это к примеру реализовано в десктопных приложених типа Geany или Notepad++. Помимо всего прочего присутсву.т настройки клавиш быстрого доступа, показ ключевых слов по Ctrl+Space, выделение текущей строчки (где остановился курсор мышки), полу-автоматическая расстановка отступов и много многое другое.

Пример простого использования

Будем использовать для распознавания и подсветки набранного PHP кода. Накидаем простейшую HTMl-страничку, содержащую одно единственное многострочное поле ввода Textarea с именем PHPCode.

Чтобы засветить один синтаксис интересуемого языка программирования иногда может понадобиться подключить вспомогательные наборы данных, как в текущем примере. Более подробную информацию читайте конечно же на официальном сайте данного проекта. Далее я лишь дам небольшие описания папок исходного дистрибутива:

• demo — наборы демонстрационных примеров.
• doc — документация.
• keymap — наборы горячих клавиш под стиль редакторов Emacs и Vim.
• lib — можно сказать ядро.
• mode — наборы для подсветки (HTML, PHP, Java Script, My SQL, Delphi и ещё куча всякой всячины). Каждая папка содержит документ с примером.
• test — какой-то набор тестов.
• theme — сборник тем-стилей для изменения внешнего вида.

Источник

Codemirror настройка modx revo

Установите редакторы, подсвечивающие код и облегчающие чтение кода. Рекомендую Ace

Для закачки файлов на сервер установите Filezilla

Установите подсветку синтаксиса через Ace.

Читайте официальную документацию и другие источники полезной информации, другие блоги (см.ссылки), общайтесь в сообществах, в MIRC канале #modx, #xpdo. Не бойтесь задавать вопросы, все когда-то начинали с нуля.

Изучайте новые инструменты и приёмы не только MODX, но и веб-разработки. Изучайте HTML5, CSS3, jQuery, sql, Seo и др. Читайте хабр, Codrops, смотрите что нового на Creattica

Научитесь пользоваться хотя бы несколькими редакторами кода и ПОСТОЯННО совершенствуйте навыки их использования, в основновном я использую Sublime Text 2

Научитесь пользоваться Chrome Developer Tool или Mozilla Firebug.

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

Что не нужно делать начинающему работу с MODX:

Не устанавливайте редактор WYSIWYG TinyMCE и аналогичные для «облегчения» набора содержания ресурса. Контент-менеджер ДОЛЖЕН знать HTML и уметь его использовать иначе «красоты ради» вы будете иметь страницы заполненые H1 текстом полностью (кто не понимает, скажу просто — это плохо). HTML нужно знать и уважать.

Не копируйте куски кода найденные где-то на форумах, в сообществах и в моём блоге бездумно. Попробуйте набрать их руками и осмыслить что к чему.

Не задавайте со старта вопросы, если что-то не выходит, попробуйсте найти самостоятельно ошибку, тогда вы её точно запомните и не сделаете снова.

Не сидите постоянно за компьютером, выходите чаще на улицу. Удалите все игры и избавьтесь от пожирателей времени как ТВ, WoW, вконтакт, одноклассники и др. Веб-разработка, как и любая другая работа требует усилий, если думаете, что без труда наловишь кучу рыбы в «энторнете», то должен вас разочаровать.

Как обычно жду ваших комментариев и советов для других. Всем спасибо

Олег Смедюк

устанавливаю постоянно tinymce и всегда пользуюсь в нем кнопкой html :D, теперь не буду этого делать

Евгений Петров

Я так понимаю, что этот учебник для тех, кто только начинает знакомится с modx. Я вхожу в их число и с первых слов учебник мне не понятен. Вы советуете установить какие-то дополнения (Ace, SyntaxChecker и т. д.), но не пишете как это сделать. Буду рад, если текст станет понятнее.

Viktor Minator

Поставил между 3м и 4м уроков. Думаю, когда первые 3 пройдёте, то поймёте.

Евгений

Евгений

Еще хочу посоветовать людям, которые не сильны в английском скачать и установить программку Dicter.
Работает по принципу — выделяем текст, нажимаем ctrl+alt и получаем перевод. Очень удобно, особенно для прочтения документации и описания различных дополнений. Заодно и английский можно немного выучить. )))

Мой Номер

Отличное напутствие в конце. И ведь действительно так. Следует избавиться, от кучи вещей, которые могут порою отвлекать. В принципе, как и в любом деле, следует подходить ко всему с головой.

Владимир

Интересно, а что вы думаете по поводу редактора Notepad++? Тоже ведь не плохой, редактор кода.

Viktor Minator

раньше активно пользовался, пока не появился Sublime.

Александр Наумов

Спасибо, про многие ссылки не знал.
У вас одна не рабочая ссылка: http://vk.com/modxrevolution?act=links

Александр Наумов

Я код подсвечиваю не Ace , а CodeMirror. Но вот только проблема, он не подсвечивает код в Ресурсах, скажите, пожалуйста, там как-нибудь возможно подсвечивать код?

Александр Наумов

Разобрался как подсвечивать в Ресурсах.

Никита Савинов

Разобрались, напишите как, некоторым тоже может быть интересно. Или дайте ссыль на решение.

hrk.kho

У меня тоже не подсвечивается код в Ресурсах, но, к сожалению, не разобрался. И подскажите, что можно сделать с «крякозябрами» (http://clip2net.com/s/2CliP). Спасибо

Viktor Minator

чтобы подсвечивался код в ресурсах, нужно снять галочку «Использовать ХТМЛ-редактор».
С «кракозябрами» пока ничего. у всех эта проблема. Как лечить — неизвестно.

Источник