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

19.01.21

Интеграция - WEB-интеграция

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

Скачать исходный код

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

Подсистема 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 и стандартному ФорматированныйДокумент.

 

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

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    16180    14    18    

14

Интеграция 1С — Битрикс24. Обмен задачами

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

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    18297    10    15    

16

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    13042    34    8    

13

Автоматическая загрузка файлов (например, прайс-листов) из электронной почты, FTP, HTTP, их обработка и выгрузка на FTP (на сайт) и для других целей

Прайсы WEB-интеграция Ценообразование, анализ цен Файловый обмен (TXT, XML, DBF), FTP Автомобили, автосервисы Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Программа с заданным интервалом времени (или по ручной команде) скачивает файлы (например, прайс-листы поставщиков) из различных источников: письма электронной почты, FTP или HTTP-адреса, и сохраняет их в каталог упорядоченной структуры. При этом извлекает файлы из архивов, может переименовывать файлы и менять их формат (csv, xls, txt). Можно настроить выгрузку обработанных файлов на сайт (через FTP-подключение). Программа будет полезна компаниям, у которых есть большое количество поставщиков и/или прайс-листы поставщиков обновляются часто (необязательно прайс-листы, файлы могут быть любого назначения). Собранные таким образом актуальные версии прайс-листов можно выгрузить с помощью программы себе на сайт (или на любой FTP-сервер) или выполнить другие необходимые задачи.

25200 руб.

28.05.2015    85588    26    51    

50

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16687    43    49    

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

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

editorJSON.focus();

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

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

А имя файла в действительности с "1c" в нижнем регистре.
22. SizovE 263 27.04.21 10:36 Сейчас в теме
23. tormozit 7160 21.08.21 10:36 Сейчас в теме
Можно ли найти уже инициализированный объект JSONEditor в поле HTML?
24. SizovE 263 22.08.21 12:49 Сейчас в теме
(23) Не очень понял, а зачем?
25. tormozit 7160 22.08.21 13:26 Сейчас в теме
(24) Затем что мне нужно для унификации работы с разными редакторами на базе поля HTML. Например редактор Monaco такое позволяет.
26. SizovE 263 22.08.21 16:56 Сейчас в теме
(25) Есть такой код
<!DO CTYPE HTML>
<ht ml lang="ru">
<head>
    <met a charset="utf-8">

    [*]
    <sc ript src="dist/jsoneditor.min.js"></sc ript>
    <sc ript src="dist/wrapper1C.js"></sc ript>
</head>
<body>
    <div id="jsoneditor" style="width: 100%; height: 100%;"></div>
    <button id="onChange" style="display: none"></button>
</body>
</html>
Показать

Что Вы хотите в нем найти?
далее, Вы получаете объект в 1С и им управляете editorJSON = Элементы.JSONHTML.Документ.defaultView.Init();
27. tormozit 7160 22.08.21 17:21 Сейчас в теме
(26) Если я правильно понял, то метод Init() всегда создает новый экземпляр редактора. А мне нужен существующий, чтобы его состояние при этом не изменилось.
28. SizovE 263 23.08.21 15:09 Сейчас в теме
(27) Да, он его создает и возвращает в 1С, в текущей реализации вы его так не получите. Нужно тогда иначе писать JS.
29. vladnet 364 03.12.21 00:01 Сейчас в теме
А делать редактор 1с на нем не пробовали? Я что то так и нормального решения для редактирования 1с кода с раскраской не нашел под управляемые формы. Ace вроде то что надо, особенно после того как на ВебКит перешла 1с.
30. SizovE 263 03.12.21 08:46 Сейчас в теме
Оставьте свое сообщение