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

07.02.24

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

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

Скачать файлы

Наименование Файл Версия Размер
Markdown и 1С:Предприятие. Визуализация разметки MD в поле HTML документа.:
.epf 59,86Kb
28
.epf 59,86Kb 28 Скачать

Лицензия 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 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61797    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

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

5000 руб.

14.01.2016    54403    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

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

2400 руб.

29.06.2020    16698    21    4    

35

Новогоднее оформление для 1С

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

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

27.12.2023    10738    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9615    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12080    1    5    

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

Обработка может и окажется кому-то полезной, но в вашем случае подход не выглядит верным.
Зачем городить огород с обработкой конвертации, если у Showdown есть CLI утилита? А далее.. раз у вас тиражная обработка, то она должна быть в гите. Должен быть настроен процесс ее "сборки" и тестирования. Один из этапов сборки как раз будет заключаться в том, чтобы MD файл с историей отрендерить в html, а потом уже этот html как макет запихнуть в обработку.
kuntashov; artbear; +2 Ответить
16. infosoft-v 871 13.06.18 18:29 Сейчас в теме
(3) Егор, спасибо за идею. Подумаю над ней. Пока вижу неудобный для меня момент, это наличие отдельного от обработки MD файла с историей. Все хранить в обработке, пока, мне кажется более удобным.
17. Infactum 315 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 1024 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 871 13.06.18 18:25 Сейчас в теме
(13) Спасибо за уточнение. Библиотека, которую вы рекомендуете компактнее той, которую использую я (5000 строк против 1500).
Попробую применить ее. Место лишним не бывает :-)
19. infosoft-v 871 02.07.18 22:12 Сейчас в теме
(13) Антон, попробовал библиотеку, которую вы рекомендовали. Отличная библиотека. Спасибо за совет.
20. BlizD 1024 03.07.18 08:27 Сейчас в теме
(19)
Евгений, спасибо. Рад, что помог.
18. nomadon 367 14.06.18 15:18 Сейчас в теме
Красиво оформили идею)
21. kuzz 25.07.20 07:47 Сейчас в теме
Спасибо! Очень пригодилось, markdown рулит!
Оставьте свое сообщение