Markdown и 1С:Предприятие. Визуализация разметки MD в поле HTML документа

07.02.24

Разработка - Работа с интерфейсом

Пример работы с документами Markdown (MD) на платформе 1С:Предприятие 8. Используется поле HTML документа, подключение JavaScript библиотеки преобразования разметки Markdown в HTML. Лицензия MIT - https://choosealicense.com/licenses/mit/

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Markdown и 1С:Предприятие. Визуализация разметки MD в поле HTML документа.:
.epf 59,86Kb
34
34 Скачать (1 SM) Купить за 1 850 руб.

Лицензия MIT - https://choosealicense.com/licenses/mit/ 

Популярный формат разметки текстовых документов Markdown (MD) широко используется при оформлении документации, пояснительных записок и других сопровождающих текстовых документов. Команды разметки просты и легко запоминаются. Markdown удобен тем, что документацию можно сразу писать вставляя команды разметки, читаемость plain текста от этого не ухудшается. Посоветую хорошую шпаргалку по разметке MD, сам ей иногда пользуюсь.

Пример документа с разметкой MD
 
 

Мне Markdown понадобился, когда встал вопрос о ведении истории изменений changelog в тиражной обработке. История изменений в обработке ведется в макете текстового документа и выше приведен пример, как выглядит эта история. Практически сразу возникла задача отображения этой истории пользователю обработки. Решение я искал в готовых конверторах MD to HTML на платформе 1С:Предприятие, но поиски не привели к результату. Помощь пришла с другой стороны. На хакатоне IsThisDesign я поделился проблемой и коллеги дали мне правильную идею, которая сработала.

Несколько слов о хакатоне IsThisDesign
 
 

Визуализация разметки Markdown

Идея, положенная в данный проект, это применить библиотеку конвертации Markdown в HTML на JavaScript и воспользоваться полем HTML документа для исполнения этого скрипта.

Пример обработки, которая реализует идею, доступен во вложенных файлах. Этот проект на GitHub

Библиотека конвертации Markdown в HTML

Не мудря взял самую популярную на GitHub JavaScript библиотеку Showdown, которая имеет более 6900 звездочек. Файл скрипта этой библиотеки showdown.js располагается в папке проекта showdown/dist/

Шаблон обработки для тестирования

Для тестирования была доработана обработка из проекта 1C_HTML_JavaScript_Test

Хранение скриптов

Скрипты библиотеки Showdown и функции вызова методов библиотеки хранятся в макетах обработки как текстовые документы.

Здесь макет:

  • Showdown - скрипт библиотеки Showdown
  • MD_Convert - скрипт привязанный к кнопке HTML документа и реализующий вызов методов библиотеки
  • STYLY - CSS разметка

Вызов методов библиотеки

HTML документ имеет следующую размету:

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="GENERATOR" content="MSHTML 11.00.9600.19003">
    <base href="/redirect.php?url=djhjb25maWc6Ly9jMWQzZTdkMi03MTUwLTQ3ZmMtOGRjYy0xNThlMjBlNTE5OTUvbWRvYmplY3QvaWQ2MTI5YzI1Ni1iMWVjLTRlMTYtOTUxMi0xNDljNjhkMzdjYWUvOGViNGZhZDEtMWZhNi00MDNlLTk3MGYtMmMxMmRiYjQzZTIz">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style" />
</head>

<body>

    <textarea id="sourceTA" rows="10" cols="82"></textarea>
    <hr/>
    <button id="runBtn" onClick="MD_Convert()">Конвертировать MD в HTML</button>
    <hr/>
    <div id="targetDiv"></div>
    
    <script src="Showdown"></script>
    <script src="MD_Convert"></script>
</body>

</html>

На кнопку runBtn повешен скрипт, который вызывает методы библиотеки и результат работы вставляет в элемент <DIV>

function MD_Convert() {
    var text = document.getElementById('sourceTA').value,
        target = document.getElementById('targetDiv'),
        converter = new showdown.Converter(),
        html = converter.makeHtml(text);

    target.innerHTML = html;
}

 

Проверено на следующих конфигурациях и релизах:

  • Бухгалтерия предприятия, редакция 3.0, релизы 3.0.147.30

См. также

Работа с интерфейсом Системный администратор Программист Платформа 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    55439    17    23    

43

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    19721    28    6    

44

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024    21849    mrXoxot    44    

128

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

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

27.05.2024    10962    smielka    37    

105

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    17961    1225    elcoan    53    

125

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

3 стартмани

10.04.2023    12656    167    acces969    31    

126

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    7374    kalyaka    6    

33
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. 1c-intelligence 12761 13.06.18 07:44 Сейчас в теме
Как раз такая задача возникла - готовый markdown в 1С показывать. Спасибо за материал!
Evil Beaver; Scorpion4eg; infosoft-v; +3 Ответить
14. infosoft-v 944 13.06.18 18:18 Сейчас в теме
(1) Буду рад, если пригодиться.
2. olegtymko 917 13.06.18 11:33 Сейчас в теме
Интересно наблюдать на результат одного из обсуждений второго дня isthisdesign=) Однозначно плюс!
Evil Beaver; artbear; infosoft-v; +3 Ответить
3. Infactum 318 13.06.18 15:02 Сейчас в теме
Мне Markdown понадобился, когда встал вопрос о ведении истории изменений changelog в тиражной обработке. История изменений в обработке ведется в макете текстового документа и выше приведен пример, как выглядит эта история.

Обработка может и окажется кому-то полезной, но в вашем случае подход не выглядит верным.
Зачем городить огород с обработкой конвертации, если у Showdown есть CLI утилита? А далее.. раз у вас тиражная обработка, то она должна быть в гите. Должен быть настроен процесс ее "сборки" и тестирования. Один из этапов сборки как раз будет заключаться в том, чтобы MD файл с историей отрендерить в html, а потом уже этот html как макет запихнуть в обработку.
kuntashov; artbear; +2 Ответить
16. infosoft-v 944 13.06.18 18:29 Сейчас в теме
(3) Егор, спасибо за идею. Подумаю над ней. Пока вижу неудобный для меня момент, это наличие отдельного от обработки MD файла с историей. Все хранить в обработке, пока, мне кажется более удобным.
17. Infactum 318 13.06.18 18:38 Сейчас в теме
(16) Файл вовсе не отдельный. Это часть репозитория будет. Можно и вовсе никакой файл не хранить, а брать информацию из описания релиз коммита.
Хранить механизм отрисовки в обработке/конфигурации можно, если он необходим самой обработке/конфигурации для непосредственного исполнения её задач. В вашем случае вы отдаете пользователю совершенно ненужный мусор. Вместо крохотной html странички - огромная (относительно, конечно) библиотека и механизм работы с ней.
infosoft-v; +1 Ответить
4. пользователь 13.06.18 15:29
Сообщение было скрыто модератором.
...
5. пользователь 13.06.18 15:33
Сообщение было скрыто модератором.
...
6. пользователь 13.06.18 15:36
Сообщение было скрыто модератором.
...
7. пользователь 13.06.18 15:39
Сообщение было скрыто модератором.
...
8. пользователь 13.06.18 15:45
Сообщение было скрыто модератором.
...
9. пользователь 13.06.18 15:51
Сообщение было скрыто модератором.
...
10. пользователь 13.06.18 15:53
Сообщение было скрыто модератором.
...
11. пользователь 13.06.18 15:53
Сообщение было скрыто модератором.
...
12. пользователь 13.06.18 15:55
Сообщение было скрыто модератором.
...
13. BlizD 1089 13.06.18 15:55 Сейчас в теме
Спасибо, за статью.

Решали такую же задачу в конфигурации infostart.ru/public/552480/
Правда использовали другую библиотеку github.com/chjj/marked (16к звезд у нее)

Если кому интересно, то можно посмотреть вот в этом методе:
узОбщийМодульСервер.ПолучитьHTMLMarkdown(ТекстСодержания);

P.S. какой то глюк форума, не могу указать ссылки в разметке (не добавляется сообщение с ними).
Прикрепленные файлы:
lolega; DrAku1a; botokash; Foxtrot1388; JohnyDeath; Evil Beaver; infosoft-v; +7 Ответить
15. infosoft-v 944 13.06.18 18:25 Сейчас в теме
(13) Спасибо за уточнение. Библиотека, которую вы рекомендуете компактнее той, которую использую я (5000 строк против 1500).
Попробую применить ее. Место лишним не бывает :-)
19. infosoft-v 944 02.07.18 22:12 Сейчас в теме
(13) Антон, попробовал библиотеку, которую вы рекомендовали. Отличная библиотека. Спасибо за совет.
20. BlizD 1089 03.07.18 08:27 Сейчас в теме
(19)
Евгений, спасибо. Рад, что помог.
18. nomadon 369 14.06.18 15:18 Сейчас в теме
Красиво оформили идею)
21. kuzz 25.07.20 07:47 Сейчас в теме
Спасибо! Очень пригодилось, markdown рулит!
Оставьте свое сообщение