JSON viewer/editor/редактор, удобный и простой визуальный просмотр JSON для WebKit 1С на базе Ace

Публикация № 1348459 22.12.20

Разработка - Системная интеграция - Файловые протоколы обмена, FTP

JSON отличный формат для обмена, но с ним абсолютно неудобно работать в 1С при файлах большого размера, нет нормального и красивого просмотра формата JSON, а если еще хочется интерактивно редактировать и видеть результат? Решение сделаем на базе Ace в публикации с полностью открытым кодом и бесплатной обработкой JSONeditor.

Подсистема EDIbot для 1С позволяет быстро и практически без программирования создавать приложения для мобильных и десктопов, в качестве основного формата обмена используется JSON. Однако, в процессе эксплуатации мы столкнулись с необходимостью удобного визуального просмотра JSON (форматирования, сворачивание/разворачивание узлов, свойств и т.п.) и редактирования JSON сообщений обмена (добавления новых узлов, изменения свойств ключей и т.п.) с одновременным просмотром будущего результата.

Для примера возьмем JSON диаграмм из публикации про Dashboard и давайте сразу посмотрим конечный результат нашей статьи:

 

Теперь разберем, как такое Вам сделать у себя, используя 1С платформу с WebKit (начиная с 8.3.14 релиза).

Пример будем делать в тестовой обработке, вот скрин-шот:

(слева у нас визуальный редактор (JSON formatter), справа текстовое представление JSON, редактировать можно в любой стороне)

 

Подготовим index.html - JSON editor на базе Ace editor

Итак, сначала мы подключаем JS JSON редактора:

  <link href="dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="dist/jsoneditor.min.js"></script>

 

Далее, чтобы в WebKit отслеживать события визуального редактора, мы разместим в HTML невидимую кнопку и будем ее нажимать при событии onChange:

<button id="onChange" style="display: none"></button>

 

Событие onChange на кнопку мы повесим при инициализации нашего JSON editor в JS wrapper1C:

function Init()  {  

	const container = document.getElementById("jsoneditor")
        const options = { mode: 'code', 
			onChange: function() {onChange.click()} }
        const editor = new JSONEditor(container, options)

	return editor
}

 

Добавим в index.html блок с нашим "jsoneditor":

   <div id="jsoneditor" style="width: 100%; height: 100%;"></div>

 

В итоге наш index.html будет выглядеть следующим образом:

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="utf-8">

    <link href="dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="dist/jsoneditor.min.js"></script>
    <script src="dist/wrapper1C.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 100%; height: 100%;"></div>
    <button id="onChange" style="display: none"></button>
</body>
</html>

 

Следующий шаг - это автоматически разворачивать JSON компонент - index.html и все его JS в общую папку или некую временную. Поэтому запакуем это в архив zip и разместим в макете обработки. Кстати, альтернативным вариантом является разворачивание и настройка IIS сервера и открытие JSON редактора по его адресу. 

 

Теперь сделаем все на стороне 1С, для начала установим компонент (JSON formatter):

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	JSONHTML = УстановитьJSONEditor();
	
КонецПроцедуры

 

&НаСервере
Функция УстановитьJSONEditor() экспорт
	
	РабочийКаталог = КаталогПрограммы(); //тут пишем  общую папку
	
	КаталогКомпоненты = "EDIbotJSONEditor";
	
	КаталогНаДиске = Новый Файл(РабочийКаталог+КаталогКомпоненты);
	Если НЕ КаталогНаДиске.Существует() Тогда
				 
		Чтение = Новый ЧтениеДанных(РеквизитФормыВЗначение("Объект").ПолучитьМакет("EDIbotJSONEditor"));
		
		Файл = Новый ЧтениеZipФайла(Чтение.ИсходныйПоток());
		
		Файл.ИзвлечьВсе(РабочийКаталог+КаталогКомпоненты);
		
	КонецЕсли;

	Возврат РабочийКаталог+КаталогКомпоненты+"\index.html";
КонецФункции

 

Дальше, после формирования документа сделаем инициализацию JSON editor:

&НаКлиенте
Перем editorJSON;

&НаКлиенте
Процедура JSONHTMLДокументСформирован(Элемент)
	
	editorJSON = Элементы.JSONHTML.Документ.defaultView.Init();
	
	ТекущийЭлемент = Элементы.JSONHTML;

	editorJSON.focus();
	
КонецПроцедуры

 

Далее, если нам нужно отслеживать изменение в обычном текстовом редакторе (справа) и обновлять визуальный редактор JSON слева, то ПриИзменении текста вызываем метод по установке его в объект editorJSON.

&НаКлиенте
Процедура JSONПриИзменении(Элемент)
	
	editorJSON.setText(JSON);

КонецПроцедуры

 

Сделаем и наоборот, при редактировании в визуальном JSON редакторе отображать изменения в текстовом:

&НаКлиенте
Процедура JSONHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	
	Если НЕ _ОбщегоНазначенияКлиентСервер.ПолучитьЗначениеКоллекции(ДанныеСобытия, "Button.id")="onChange" Тогда
		Возврат;
	КонецЕсли;	
		
	JSON = editorJSON.getText();

КонецПроцедуры

Обратите, внимание, что я использовал модифицированную функцию ПолучитьЗначениеКоллекции, которую разбирал в публикации Чтение вложенных свойств Структур Структуры, Соответствий, свойства через точку, разбор JSON (внес изменения в публикацию).

 

Собственно и всё )  Редактируем слева - отображается справа, редактируем справа - отображается слева, удобно просматривать JSON, вносить правки, добавлять разделы и узлы, менять значения свойств, добавлять новые свойства. 

UPD. 

Отключить возможность редактирования в JSON редакторе:

editorJSON.aceEditor.setReadOnly(Истина);

Перейти программно к определенной строке в JSON редакторе:

editorJSON.aceEditor.gotoLine(100);

Перейти в режим представления TreeView 

editorJSON.setMode("tree");

(обратно вернуться - "code")

Вот скрин-шот:

 

Управлять стилями панели JSON formatter:

//универсально
 	ЭлементыРедактора = Элементы.JSONHTML.Документ.getElementsByClassName("jsoneditor-menu");
	ЭлементыРедактора[0].style.backgroundColor = "red";
//а можно и так 
editorJSON.menu.style.backgroundColor = "red";

 

Установить фокус на JSON редактор:

&НаКлиенте
Процедура JSONHTMLДокументСформирован(Элемент)
	
	editorJSON = Элементы.JSONHTML.Документ.defaultView.Init();
	
	ТекущийЭлемент = Элементы.JSONHTML;

	editorJSON.focus();

КонецПроцедуры

А вот если нужно установить фокус по нажатию кнопки, то тут хитрее:

&НаКлиенте
Процедура Команда1(Команда)
	
	ТекущийЭлемент = Элементы.JSONHTML;
	
	Оповестить("Фокус");
		
КонецПроцедуры

&НаКлиенте
Процедура ОбработкаОповещения(ИмяСобытия, Параметр, Источник)
	
	Если ИмяСобытия="Фокус" Тогда
		editorJSON.focus();
	КонецЕсли;	
	
КонецПроцедуры

 

Спасибо автору компоненты JS - https://github.com/josdejong/jsoneditor, Jos de Jong, там есть примеры, как можно адаптировать редактор под свои потребности (валидация JSON, исправление JSON, и многое другое) 

 

Ссылка на пример обработки (бесплатный) - https://cloud.mail.ru/public/YPz9/ndzUJ9GER

За стартмани тоже самое - для донатов)

 

Надеюсь, моя публикация была Вам полезна и сэкономит Ваше время, ссылка на все публикации SizovE

думаю Вам также понравится HTML редактор (Wysiwyg) для WebKit 1С (CMS, B2B), альтернатива TinyMCE и стандартному ФорматированныйДокумент.

 

Подписывайтесь на мой канал (наверху), будет много интересного бесплатного контента :)

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

Наименование Файл Версия Размер
JSON viewer/editor/редактор, удобный и простой визуальный просмотр JSON для WebKit 1С на базе Ace editor

.epf 610,01Kb
50
.epf 610,01Kb 50 Скачать бесплатно

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. tormozit 6347 22.12.20 07:44 Сейчас в теме
При открытии получил ошибку
{ВнешняяОбработка.EDIbotJSONРедактор.Форма.Форма.Форма(14,10)}: Переменная не определена (_ОбщегоНазначенияКлиентСервер)
	Если НЕ <<?>>_ОбщегоНазначенияКлиентСервер.ПолучитьЗначениеКоллекции(ДанныеСобытия, "Button.id")="onChange" Тогда
4. SizovE 171 22.12.20 09:45 Сейчас в теме
(1) Как указано в публикации функция ПолучитьЗначениеКоллекции была описана в Чтение вложенных свойств Структур Структуры, Соответствий, свойства через точку, разбор JSON, у нас она расположена в модуле _ОбщегоНазначенияКлиентСервер
5. tormozit 6347 22.12.20 10:58 Сейчас в теме
(4) Так ты выложил внешнюю обработку как заявлено "для произвольной конфигурации". Но в ней она не работает. Получается некорректное обещание, либо некорректный код.
6. SizovE 171 22.12.20 11:26 Сейчас в теме
(5) ) В публикации ни где не написано, что пример сделан для произвольной конфигурации )
Собрал обработку для произвольной
Прикрепленные файлы:
EDIbotJSONРедактор.epf
7. tormozit 6347 22.12.20 11:49 Сейчас в теме
8. SizovE 171 22.12.20 12:21 Сейчас в теме
(7) ) буду знать, что означает данный выбор
10. SizovE 171 22.12.20 17:37 Сейчас в теме
(5) )) оказывается и эта была не рабочая для произвольной конфигурации, держи рабочую, специально проверил )
Прикрепленные файлы:
EDIbotJSONРедактор.epf
2. tormozit 6347 22.12.20 08:59 Сейчас в теме
Как установить выделение по номеру строки и колонки или по начальной и конечной позиции?
3. tormozit 6347 22.12.20 09:37 Сейчас в теме
Как отключить возможность редактирования?
Как уменьшить высоту и изменить цвет командной панели?
9. SizovE 171 22.12.20 13:48 Сейчас в теме
(3) Добавил в публикацию
tormozit; +1 Ответить
11. tormozit 6347 23.12.20 22:03 Сейчас в теме
Нашел еще проблему. JSON редактор получает фокус ввода только кликом. Например я разместил его на странице и при активации страницы хочу сразу приступить к редактированию текста. Но пока не кликнешь в нем, он не принимаем ввод клавиш. Решил вызовом метода JSONEditor.focus(). Рекомендую добавить это в демо обработку.
12. SizovE 171 23.12.20 22:22 Сейчас в теме
(11) ) только что добавил в апдейт публикации. Правда, выяснился нюанс, что если ее повесить на кнопку, то сработает только со второго раза. Т.е. ему нужно сначала перейти фокусом на поле, а потом видимо уже следующим шагом и отдельно перейти на фокус редактирования. ПодключитьОбработчикОжидания не помогает.
13. SizovE 171 23.12.20 22:29 Сейчас в теме
(11) Нашел решение )))) забавно, Оповестить("Фокус");

&НаКлиенте
Процедура ОбработкаОповещения(ИмяСобытия, Параметр, Источник)

editorJSON.focus();

КонецПроцедуры
14. tormozit 6347 02.01.21 09:37 Сейчас в теме
Еще есть неудобство в потере позиции при переключении режима отображения через JSON.setMode(). Особенно неудобно, если текст большой - приходится заново искать нужное место в тексте при каждом переключении в любую строну между "code" и "tree". Можно как то просто решить эту проблему? Возможно там есть какие то методы для сохранения восстановления позиции через синтаксическое дерево типа getBookmark и showBookmark?
15. SizovE 171 02.01.21 13:21 Сейчас в теме
(14) Я такого не встречал, мне не требовалось ) исходники JS открыты, так что можно допилить под себя и пересобрать
16. tormozit 6347 02.01.21 13:38 Сейчас в теме
(15) Задача непростая. Поэтому не хотелось бы ее решать самому. Написал автору на гитхабе https://github.com/josdejong/jsoneditor/issues/1209 .
18. SizovE 171 02.01.21 13:52 Сейчас в теме
(16) ага ) видел, тут видимо да, придется какую-то метку ставить или по узлу как-то смотреть, автор-то точно в курсах как проще, может и сделает, он ее развивает
17. tormozit 6347 02.01.21 13:38 Сейчас в теме
Еще заметил, что вызов метода setText в режиме дерева не меняет дерево - оно продолжает отображать старый текст. https://github.com/josdejong/jsoneditor/issues/1210
19. tormozit 6347 02.01.21 22:41 Сейчас в теме
(17) Оказалось причина была в моем коде. В самом редакторе тут нет проблемы.
20. SizovE 171 03.01.21 09:46 Сейчас в теме
21. tormozit 6347 27.04.21 07:28 Сейчас в теме
В ОС linux возникает ошибка
Метод объекта не обнаружен (Init)
мРедакторJSON = Элемент.Документ.defaultView.Init();

Из-за того в теле документа HTML в секции scripts идет подключение:
file:///tmp/JSONEditor/dist/wrapper1C.js

А имя файла в действительности с "1c" в нижнем регистре.
22. SizovE 171 27.04.21 10:36 Сейчас в теме
Оставьте свое сообщение

См. также

Помощник работы с VirtueMart Промо

WEB Розничная торговля Розничная торговля v8 УТ10 УПП1 Россия Бесплатно (free)

Обработка для обмена данными с интернет-магазином на базе VirtueMart. Позволяет выгружать товары с изображениями и загружать заказы покупателей. Управлять интернет-магазином теперь стало просто!

19.04.2012    26800    209    salexdv    13    

Загрузка данных с сервера по протоколу ftp и sftp

Обмен данными 1С Файловые протоколы обмена, FTP v8 1cv8.cf Бесплатно (free)

Обработка, позволяющая загружать данные с сервера по протоколам ftp и sftp в нужную Вам директорию.

11.05.2021    2401    53    suuuumcaa    1    

Групповая обработка контейнеров сертификатов ЭЦП

Универсальные обработки Файловые протоколы обмена, FTP v8 v8::УФ 1cv8.cf Россия Бесплатно (free)

Внешняя обработка для просмотра списка установленных на локальном компьютере контейнеров сертификатов ЭЦП, с возможностью групповой обработки: копирования, установки сертификатов, отправки на EMAIL или FTP.

25.05.2020    4966    163    independ    4    

Нейроконструктор

Интеграция Искусственный интеллект (AI) Прочие инструменты разработчика v8 Бесплатно (free)

Изучайте нейронные сети и экспериментируйте вместе с расширением конфигурации "Нейроконструктор". Навыки программирования не требуются.

20.05.2020    12642    175    user1404129    19    

Информация по регионам и ФО с использованием Яндекс.Карт

WEB Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Пример использования Yandex.Map API для отображения информации по регионам или федеральным округам РФ. Раскраска регионов и ФО, вывод меток, работа в режиме картограммы. Не привязан к какой-либо конфигурации. Просто пример. В 8.2 работает на толстом, тонком и WEB*-клиентах. *(WEB не во всех браузерах).

30.11.2011    6540    139    mgor    3    

Форма выбора координат Yandex карт (управляемая форма)

Универсальные обработки WEB Работа с интерфейсом v8 1cv8.cf Россия Бесплатно (free)

Обработка позволяет найти нужный адрес на карте Yandex. Отправить сообщение форме-владельцу или всем формам, со строкой координат.

06.09.2011    18558    374    motkot    27    

IBridges - новый, бесплатный сервис обмена документами между пользователями программы 1С:Предприятие

Управление взаимоотношениями с клиентами (СRM) Обработка документов WEB Перенос данных из 1C8 в 1C8 Управление взаимоотношениями с клиентами (СRM) v8 БП2.0 УТ10 Россия Бесплатно (free)

Основная задача сервиса IBridges – сделать документооборот между разными организациями - Легким - Быстрым - Бесплатным - Оперативным - Безопасным

11.08.2011    25536    240    O-Planet    61    

"Кривая" интеграция twitter

WEB v8 1cv8.cf Россия Бесплатно (free)

После введения сервисом Twitter новой системы авторизации работа с ним из 1С стала проблематичной... Тем не менее, была поставлена задача, и я попробовал ее решить...

04.08.2011    5348    16    Mike1978    13    

Загрузка курсов валют с сайта Национального Банка Азербайджана. 1С8

Обработка справочников WEB Банковские операции Банковские операции v8 1cv8.cf Бесплатно (free)

Обработка, позволяющая загружать курсы валют с сайта Национального Банка Азербайджана, www.cbar.az. 1С8

22.04.2011    25491    79    PaRaDoX    4    

АЦРК: Взаимодействие с сайтом (HTTP)

WEB Инструментарий разработчика v8 1cv8.cf Бесплатно (free)

Обработка демонстрирует взаимодействие программы на 1С с веб-сайтом. Оказывается, это не так сложно.

11.10.2010    16856    159    acrk    2    

Очередная обработка контрагентов STA.GOV.UA

Обработка справочников WEB v8 УТ10 Украина Бесплатно (free)

Доработанная обработка публикации http://infostart.ru/public/19921/ для типовой УТП, которая проставляет по контрагенту, с которым возникли нал. обязательства, информацию, найденную на сайте http://sta.gov.ua. Может кому пригодится - пользуйтесь на здоровье.

21.07.2010    7425    51    narus    2    

Выгрузка прайс-листов из линейки программ Далион-Авто на портал информационный Japancar.ru

Оптовая торговля WEB Оптовая торговля v8 1cv8.cf Автомобили, автосервисы Россия Бесплатно (free)

Выгрузка на сайты www.greenparts.ru , www.japancar.ru , www.qx9.ru , www.jcboat.ru , www.wiweb.ru , www.jcmoto.ru (относитльено не сложно переделать под УТ, БП , УПП и тд)

05.07.2010    15191    43    lame    4    

Танцы с Гуглом

Универсальные обработки WEB Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Работа с картами гугл из локального кэша формата google titles. Всего две функции: показать по координатам и получить координаты под курсором. Применяется для отображения на карте объектов, имеющих координатную привязку.

27.03.2010    8332    200    Путин    7    

Один из вариантов переноса данных из 1С 7.7 в 1С 8.Х

Перенос данных из 1С7.7 в 1C8.X Файловые протоколы обмена, FTP v8 1cv8.cf 1cv7.md Бесплатно (free)

Перенос данных — это почти всегда индивидуальный подход. И крайне важно выбрать наиболее подходящий инструмент из множества доступных. Я в этой статье опишу один из вариантов.

30.11.2009    23066    269    awk    29    

Загрузка курсов валют национального банка РБ с использованием web-сервиса.

Практика программирования WEB v8 Беларусь Бесплатно (free)

Написана под самописную конфигурацию, поэтому под типовыми она не заведется. Но можно использовать код получения данных с web-сервиса.

25.10.2009    9851    71    serg_gres    12    

Загрузка должностей из DBF

Файловые протоколы обмена, FTP Управление персоналом (HRM) Обработка справочников Управление персоналом (HRM) v8 ЗУП2.5 Россия Бесплатно (free)

Написанная обработка использовалась при переносе данных в 1С 8.1 Зарплата и Управление Персоналом, но она универсальна и подойдет я думаю для любой конфигурации..

23.10.2009    9180    106    netuser    8    

[TinyMCE] - редактор HTML WYSIWYG кода.

WEB Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Редактор HTML кода, использующий java-редактор TinyMCE (использующийся, кстати, на Инфостарте) Без внешних компонент. Сделан исключительно средствами 1С.

09.09.2009    43832    1807    Душелов    54    

[SendGoogleSMS] Отправка SMS уведомлений через сервис Google Calendar

WEB SMS рассылки Разработка внешних компонент v7.7 v8 1cv8.cf 1cv7.md Бесплатно (free)

Компонента генерирует события в Google Calendar с извещением по SMS. В архивах ВК для 7.7 (работает и в 8-ке) и ActiveX - для работы в контексте сервера 1С 8.х

07.08.2009    31403    557    Душелов    37    

Обработка поиска контрагентов на картах Яндекса

WEB Поиск данных Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Поиск ведет по контактной информации.

16.04.2009    14961    206    kwazi    11    

Облако 1С

WEB Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Обработка для 1С Предприятие 8.1 предназначена для навигации по справочникам и документам через новый для 1С орган управления - облако. В обработку добавлена ДемоФорма, которую можно назначить основной и посмотреть как построить свое облако.

14.02.2009    17351    642    mrWatson    24    

Хранение реквизитов вне конфигурации

Файловые протоколы обмена, FTP Обработка справочников Рабочее место v8 1cv8.cf Бесплатно (free)

Добавление реквизитов без включения возможности редактирования конфигурации.

20.01.2009    13126    155    Дуб    13    

Навеяно кризисом

Универсальные обработки WEB Работа с интерфейсом Банковские операции Банковские операции v8 1cv8.cf Бесплатно (free)

Используя эту обработку Вы всегда будете знать состояние кризиса на данный момент :)

11.11.2008    20647    1180    ValeriVP    27    

"WebCam" - ActiveX-компонента для 1С

WEB Разработка внешних компонент v7.7 v8 1cv8.cf 1cv7.md Бесплатно (free)

Компонента работает с устройствами, поддерживающими Twain32 драйвер (вебкамеры, фотоаппараты и др.)

28.09.2008    44704    1114    Душелов    77    

Яndex.Погода - узнаем погоду, не отрываясь от работы!

Универсальные обработки WEB v8 Россия Бесплатно (free)

Погодный информер от Яндекса, интегрированный в 1С.

18.08.2008    20057    1203    coder1cv8    26    

Загрузка цитат с сайта bash.org.ru

WEB Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Обработка для загрузки цитат с сайта bash.org.ru в таблицу.

08.06.2008    23807    446    Aleksey.Bochkov    11    

DBFViewer

Файловые протоколы обмена, FTP Инструментарий разработчика v8 1cv8.cf 1cv7.md Бесплатно (free)

На новой работе пришлось заниматься экспортом из дремучих DOS-DBF. Пригодилась старая разработка. Может, кому понадобится. Интерфейс, надеюсь, интуитивно-понятный Добавлен облегченный вариант для 8.1

18.02.2007    23009    1572    Abadonna    31    

Пример работы УРИБД для УТ 8.0

Распределенная БД (УРИБ, УРБД) WEB Перенос данных из 1C8 в 1C8 v8 УТ10 Россия Бесплатно (free)

Пример работы УРИБД для 1С Управление торговлей 8.0 (тестировалась - УТ 10.2.12.1). Обмен файлами производится через встроенного в конфигурацию почтового клиента.

30.10.2006    8915    637    researcher01    1    

Генератор отчетов GenRep

Инструментарий разработчика Файловые протоколы обмена, FTP Загрузка и выгрузка в Excel v8 1cv8.cf 1cv7.md Бесплатно (free)

GenRep - Генератор отчетов в Word, Excel, Нtml, TXT. Шаблон отчета разрабатывается в самом Word'е, Excel. Подробная документация на русском языке и пример для 1С есть внутри архива.

26.07.2006    20281    3479    kudenzov    8