[Markdown] Упрощаем жизнь менеджерам

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

Заказчик, конечно, "непрограммист", этих ваших тегов не знает и хочет чтобы было просто. Есть масса редакторов, которые, вроде как, должны упрошать жизнь, да только работают они далеко не идеально. Например, вставьте таблицу из Office в TinyMCE - будет круто.

Моё мнение таково, что редакторы нужно отключать, использовать можно только Ace или MarkItUp, а заказчик должен учить HTML. Ну честное слово, для управления автомобилем он же учит правила и сдаёет на права? А ведь некоторые сайты дороже иных автомобилей - тут тоже думать нужно.

Но вот после разработки сайта документации стало ясно, что можно очень упростить жизнь при помощи Markdown.

Синтаксис там простейший, можно легко делать списки, таблички, ссылочки и пр. Всё это запоминается за день, нужно только немного практики.

Чего не хватает? Верно - сниппета, который будет этот Markdown выводить на сайте. Ну я его и написал!

Параметры

Итак, сниппет включает в себя 3 парсера, которые работают по разным правилам: - Markdown - стандартный, классический вариант

  • MarkdownExtra - расширенный вариант, с поддержкой таблиц. Он включен по умолчанию.
  • Parsedown - быстрый парсер, поддерживающий Github flavored markdown. Например, там есть автосоздание ссылок.

Это был параметр &mode=MarkdownExtra.

Есть еще параметры &escapeTags и &stripTags. Первый экранирует все теги MODX, не давая им выполняться (он включен по умолчанию).

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

Таким образом, среднестатистический менеджер может пользоваться markdown + html, а вот теги MODX вызывать не сможет - мало ли, чего наколдует?

Особенности

В markdown встречается много ковычек `, которые парсер MODX воспринимает, как родные, и пытается обработать или вырезать. Конечно, хорошего из этого ничего не выходит, поэтому обычная передача тегов в сниппет отключена!

Сниппет должен сам выбрать поле документа, и спокойно обработать - без парсера MODX. Так что, у сниппета есть еще 2 параметра: - &id - Id ресурса. Если не указан, сниппет пытается использовать текущий.

  • &field - Поле для работы, по умолчанию - content.

В шаблоне вывода страницы можно вызывать просто:

[[Markdown]]

А вот в чанке pdoResources - можно вот так:

[[Markdown?id=`[[+id]]`&field=`[[+introtext]]`]]

Заключение

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

Протестировать работу можно у меня на сайте, в утилитах.

Исходный код лежит в репозитории на GitHub.

Еще много примеров готовых страниц находится в документации.

Мне осталось только, по возможности, перевести описание простого и расширенного синтаксиса markdown - чтобы кидать ссылку менеджерам.

Комментарии (36)
Чикин Артур
08.01.2014 14:48

Да, я его сегодня ждал:)

Еще бы в админ панель подобное, вместо tinymce.

Чикин Артур
08.01.2014 15:08

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

Чикин Артур
08.01.2014 15:46

Все разобрался как работает.

Chero
08.01.2014 15:32

А нет редактора, который оставляет HTML теги в их основном виде? Давно ищу, но так и не нашел. Т.е. чтобы вид был как в TinyMCE->показать HTML и при этом был редактор с возможностю выбора какие теги/элементы вставить?

Раньше тоже вручную теги прописывал, а потом надоело - открыть/закрыть)) TinyMCE удобен тем, что позволяет скопировать текст с предврительными тегами, но вот каждый раз переключаться на HTML и чистить, да еще избавляться от дурацких стилей уже неудобно.

Ну и плюс, он все же учит пользователя HTML синтаксису, если пользователь совсем без знаний.

bezumkinВасилий Наумкин
08.01.2014 16:45

MarkitUp в официальном репозитории - только он у меня сейчас не открывается.

Chero
08.01.2014 19:10

Спасибо, то что искал! Эх, жаль не поддерживается и подсветки синтаксиса нет((

Такое предложение к блогу, поскольку у вас гитхаб теперь есть и документация, но пользователи все равно по привычке тут будут пытаться писать можно при создании комментария сразу ссылку дать на то и другое, как на store.simpledream вы сделали. А файлохранилище может со временем удастся жестко связать со вставкой изображения, чтобы сначала окно с загрузчиком выводилось, а потом уже вставка.

ViktorminatorViktor Minator
08.01.2014 17:52

Думаю следующим логичным шагом будет дополнение для публикации через https://stackedit.io/, что существенно улучшит жизнь тех же менеджеров ;). Сам пользуюсь и другим советую данный сервис.

Ivan KuzmukIvan Kuzmuk
08.01.2014 23:42

Спасибо за линк!

Дмитрий Ломакин
09.01.2014 04:36

В стандартном репозитарии есть "Markdown Parser" Изумительно и стабильно работает.

из практического опыта: MODX и HTML теги нужно оставлять, без них никак при ситуации "не просто текст"

может предыдущий опыт накладывает отпечаток на мое мышление (1С), но меня в ужас приводит мысль пускать в админку сайта не админа, поэтому разделяю контекст/дизайн/программирование вроде получается

bezumkinВасилий Наумкин
09.01.2014 04:50

Возможно, изумительно, но: 1. Версия плагина от 2011 года, внутри парсер от 2009 года. 2. Это плагин, а не сниппет - его нельзя использовать при выводе списка документов. 3. Юзер должен писать код в тегах

<markdown></markdown>

Моя задача, сделать хорошо не программистам, а менеджерам, коих в админке MODX очень много. Тем более, что MODX позволяет очень гибко настроить права, и остаются только проблемы "ой, я вставил табличку из word и всё поехало!".

Дмитрий Ломакин
09.01.2014 10:48

1. не особо понял смысл. ну старый, ну и что? работает безупречно, что еще надо то? 2. "его нельзя использовать при выводе списка документов." - опять не понял 3. не обязательно ). у меня в файлах все лежит,теги модх приписывает, пользователи даже не догадываются.

PS мое ИМХО менеджеров в админке не должно быть вообще. PPS я то не против нового сниппета, я за более глубокие знания возможных вариантов.

bezumkinВасилий Наумкин
09.01.2014 15:36

Это нужно у автора спросить, зачем он продолжает разрабатывать свою библиотеку, если она работает безупречно с 2009 года.

Последняя версия, тем временем, от 29.11.2013.

Дмитрий Ломакин
10.01.2014 05:28

отвечать на понты не буду. Поучиться у тебя в программировании есть чему. Мне этого достаточно

bezumkinВасилий Наумкин
10.01.2014 07:06

Да причем здесь понты?

Речь о том, что парсер развивается с 2007 по 2013 год, а ты утверждаешь, что версия от 2009 "работает безупречно". Посмотри историю коммитов с 2009 года - там все уже переписано по 10 раз.

Например, вот код:


Код

Старая версия выдаст его вот так:

<p><code>Код

А новая версия вот так:

<pre><code>    Код

Как видишь, старая версия просто скушала табуляцию и вместо pre добавила p. А в официальной документации, написано, как именно должен обрабатываться код. Как в новой версии.

Более того, старая версия сжирает еще и переносы строк, и мой исходный код выводится в одну линию. То есть, на сайте документации её просто нельзя использовать.

А вот этот код старая версия вообще не вывела - показала 6 ковычек, с пустотой внутри:


[[!pdoPage? &tpl=@INLINE <p>[[+idx]] <a href="/[[+uri]]">[[+pagetitle]]</a></p> ]] [[!+page.nav]]


Наверное потому, что парсер MODX обработал эти теги раньше - ведь плагин срабатывает в самом конце подготовки страницы.

А ты говоришь, "безупречно", "понты".

Дмитрий Ломакин
10.01.2014 09:16

1. Спасибо. Доходчиво. 2. Про понты - наверное я не так понял твои слова. У тебя достаточно своеобразный стиль общения. Высокомерный. Будем считать что это мое восприятие такое неадекватное, и мне над ним надо поработать ). Извини если обидел, не хотел. В общем проехали. 3. Мы говорим о mardown для менеджеров. У меня востребовано: размер заголовка (#, ##, ###...), жирно, курсив вставить рисунок чанки и вкрапления HTML работают нормально. Например:

<img src="ext/brand/[[+brand]]/logo.png" alt="Логотип [[+brand]]" align="left" >

мне этого было достаточно и оно работало для меня безупречно. То что появился еще один инструмент, тоже замечательно. Я здесь писал для информации об альтернативе. Мыло ли. Вдруг у кого-то где-то твой код не заработает. както так.

Дмитрий Ломакин
09.01.2014 04:40

К слову, под Windows долго найти не мог нормальный редактор нашел, бесплатный, рекомендую. MarkdownPad 2 http://markdownpad.com может работать как portable, у меня в dropbox лежит Недостаток только один - долговато запускается

argnistВиталий Киреев
09.01.2014 15:32

заказчик должен учить HTML

Эх, если бы... :) Боюсь "менеджеры" не захотят учить новую разметку, так же как и не хотят учить HTML. Им надо, чтобы было все как в Ворде, т.к. они только его знают и ничего нового знать обычно не хотят.

bezumkinВасилий Наумкин
09.01.2014 15:33

Да тут проще чем в ворде.

В любом случае - показать и предложить стоит.

Chero
09.01.2014 19:35

Не спора ради, просто, хотел объяснить логику менеджеров, как я ее услышал )) Тут дело не только и не столько в тегах.

Плюс TinyMCE (он же Word) перед любыми решениями с тегами в том, что в них как отображается в админке, так выведется и во фронтенде. Даже если залезешь в html, то теги за тебя поправляются. А в любых решениях с тегами - в админке одно, а на сайте - другое и поди разбери, в чем проблема - толи теги криво написал, толи сайт "глючит" и надо админа звать.

Вопрос, как мне кажется в другой плоскости немного. В том, кто занимается сайтом? Если тот же менеджер, что и продажами занимается, то тут только TinyMCE спасет. Если отдельный менеджер контента, то пусть теги учит и не выпендривается.

Дмитрий Ломакин
10.01.2014 09:20

Самый крутой недостаток использования HTML для вывода контента - парные теги. Не поставил закрывающий, и глядишь на странице черте что получилось. Markdown гораздо удобнее для контента.

OnFoxПеретягин Илья
17.01.2014 13:09

Самая приятная новость за этот год ). Действительно решает много проблем с менеджерами, да и свой сайт наполнять становиться проще, быстрее. На самом деле просто не могу подобрать слова насколько мне это решение понравилось, но как обычно бывает, возникают вопросы….

Есть ли возможность менять хтмл код, который Markdown потом поставит? Например, я хочу создать простой список, открываю модх и пишу:

* красный * черный * белый

Собственно на выходе получаю:


<ul>
    <li>красный</li> 
    <li>черный</li> 
    <li>белый</li> 
</ul>

А мне надо, что бы список выглядел вот так:

  
<ul>
    <li><i class="fa"></i>красный</li> 
    <li><i class="fa"></i>черный</li> 
    <li><i class="fa"></i>белый</li> 
</ul>

В какую сторону смотреть, что бы осуществить подобные действия?

bezumkinВасилий Наумкин
17.01.2014 13:12

А ты можешь спокойно использовать html и делать так:


* <i class="fa"></i>красный
* <i class="fa"></i>черный
* <i class="fa"></i>белый

Ну и пошарься по документации MarkdownExtra - там вроде можно тегам классы указывать.

OnFoxПеретягин Илья
17.01.2014 13:17

Данное решение чем и понравилось, что надо меньше писать, добавление своего хтмл кода, когда видно, что можно сделать по человечески, как то.... Но, побегаю еще по документации, посмотрим что будет. Спасибо большое за быстрые ответы!

п.с. в письме, оповещении, что есть комментарий к теме, в его заголовке присутствует немного ереси - Ответ на ваш комментарий к тикету "[Markdown] Упрощаем жизнь менеджерам"

bezumkinВасилий Наумкин
17.01.2014 13:18

Ничего не поделать - скобочки у меня везде экранируются.

Антон СоловьёвАнтон Соловьёв
25.01.2014 17:50

Для полноты менеджерского счастья тока визуального редактора в админке не хватает под Markdown Если ещё и под bbcode будет - тогда вообще полный арсенал

Антон СоловьёвАнтон Соловьёв
25.01.2014 18:01

Почитал чуток - походу TinyMCE можно и на Markdown и на bbcode настроить, я это правильно понял?

bezumkinВасилий Наумкин
25.01.2014 18:03

Зачем?!

Звездочки, решетки и черточки без редактора нельзя писать?

Антон СоловьёвАнтон Соловьёв
26.01.2014 06:18

Ну так удобней написать слова через энтер, потом выделить мыхой и жмякнуть на кнопку "список" и ап - не нужно у каждого слова писать 1., 2. т.д. Или выделить абзац и жмякнуть мыхой "это цитата" - и перед каждой строчкой появится ">", не надо на каждую персонально ставить. Да и даже чисто hr поставить - аж три раза жмякнуть на * или один раз мыхой в соответствующую кнопку? Пользователи второе любят, они балованные и капризные. Вот даже здесь можно не писать b, а жмякнуть кнопк. А если мы предлагаем им писать чистый код, пусть и Markdown, но чуть ли не руками аж три звездочки жмякнуть, которые на сайте превратятся в hr, то они должны иметь возможность посмотреть на то, что получается и сравнить это с написанным кодом. А то ж память подводит, вроде звездочки нужно поставить, но точно мол не помню, сэкспериментирую. Т.е. нужен тогда уж предпросмотр, которым можно воспользоваться перед тем, как жмякать на "Сохранить". TinyMCE - визуальный редактор, показывает, как код будет выглядеть на сайте. И там есть Toggle Editor, позволяющая смотреть чистый код. Если б не это, пользователи просили бы предпросмотр "как в вордпресе". Т.е. в принципе всё описанное выше в TinyMCE (и TypoMCE) есть, сниппет под Markdown вы представили, сниппет для bbcode можно и самому сварганить или нагуглить. Ну т.е. красота, я здесь просто отвечаю на вопрос "зачем" ЗЫ Эт все для манагероф, меня Ace устраивает. Вот если б он ещё мог закрывающий тег выделять. Чтобы поставил курсор на открывающим

<div>

, и он подсветился б и

</div>
bezumkinВасилий Наумкин
26.01.2014 06:23

Эт все понятно, но Markdown настолько прост, что дальше уже некуда.

Если уж очень хочется - под него легко можно настроить MarkItUp, только предпросмотра нет. Но и это не проблема - сохранил, обновил страницу, посмотрел.

P.S. Пиши хотелку автору, иначе как он про неё узнает?

Антон СоловьёвАнтон Соловьёв
26.01.2014 06:32

Вот именно- сохранил. Если страница опубликована, её не создают, а правят, то после сохранения правки будут доступны посетителю сайта. А манагер желает и тренироваться на боевой странице и чтоб его эксперемент посетитель не увидел. Кнопк Toggle Editor и отключаемая ею визуализация кода для этого лучше. В MarkItUp для EVO, кстати работает подсветка кода EditArea. Удобно там получалось. С код Мирроу не ставил.

bezumkinВасилий Наумкин
26.01.2014 06:35

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

В общем, делай как знаешь, но с TinyMCE я бы не стал связываться.

Антон СоловьёвАнтон Соловьёв
26.01.2014 06:47

Что, в TinyMCE всё так жестко, лучше не соваться в него?

asxАлександр Котлов
26.01.2014 09:55

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

Если без визуального никак - смотри в сторону CKEditor, с ним головной боли меньше намного.

asxАлександр Котлов
08.03.2014 20:06

А картинки как в вики описано он вставлять умеет?

[Alt-текст]([[URL]] изображения "Заголовок изображения")

Такая конструкция у меня почему-то как ссылка отображается(

ЗЫ Проверил, нет(

bezumkinВасилий Наумкин
09.03.2014 04:33

Смотри официальную документацию.


![Alt text](https://file.modx.pro/files/8/5/3/85333575318f1fb2e7fe2881eb25559a.png "Optional title")
asxАлександр Котлов
09.03.2014 14:46

Rак всегда снимаю шляпу. В википедии забыли "!" (

Спасибо!

ЕвгенийК
09.04.2022 03:35
Это хорошо, что такая возможность есть и может быть использована. А то тенденция, мания, что-то в по...
begoodco1
07.04.2022 05:49
Зарегистрировался чтобы выразить благодарность за доступное и подробное описание процесса. Была возм...
bezumkin
Василий Наумкин
18.03.2022 12:35
Авторизация есть из коробки, для входа в базовую админку. Можно установить через composer и собрать ...
bezumkin
Василий Наумкин
10.03.2022 12:08
Ну, я имел в виду, что по закону можно =) А в реальности с валютой очевидные проблемы.
Сергей Лелеко
04.03.2022 06:12
О как! не знал! спасибо
bezumkin
Василий Наумкин
01.03.2022 15:32
Я делал одного бота на botman/botman, но из-за своей универсальности конкретно с Телеграм на нём раб...
bezumkin
Василий Наумкин
25.02.2022 09:22
P.S. Кажется цитаты у тебя никак не стилизуются в комментариях... Спасибо, поправил!
Electrica
Михаил
08.02.2022 11:19
Работает!
Алексей
09.01.2019 10:55
Насыщенный год ) От души поздравляю с ДР! Счастья, успехов и семейного благополучия! Жаль лимит заме...
septa rose
28.05.2018 22:16
hmmm, keren abis