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
138
.epf 610,01Kb 138 Скачать бесплатно

Подсистема 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    15748    10    17    

11

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

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

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

5040 руб.

04.05.2021    17551    6    15    

13

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

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

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

12000 руб.

02.02.2021    16360    42    49    

23

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25741    9    0    

7

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88582    160    215    

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

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

editorJSON.focus();

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

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

А имя файла в действительности с "1c" в нижнем регистре.
22. SizovE 262 27.04.21 10:36 Сейчас в теме
23. tormozit 7136 21.08.21 10:36 Сейчас в теме
Можно ли найти уже инициализированный объект JSONEditor в поле HTML?
24. SizovE 262 22.08.21 12:49 Сейчас в теме
(23) Не очень понял, а зачем?
25. tormozit 7136 22.08.21 13:26 Сейчас в теме
(24) Затем что мне нужно для унификации работы с разными редакторами на базе поля HTML. Например редактор Monaco такое позволяет.
26. SizovE 262 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 7136 22.08.21 17:21 Сейчас в теме
(26) Если я правильно понял, то метод Init() всегда создает новый экземпляр редактора. А мне нужен существующий, чтобы его состояние при этом не изменилось.
28. SizovE 262 23.08.21 15:09 Сейчас в теме
(27) Да, он его создает и возвращает в 1С, в текущей реализации вы его так не получите. Нужно тогда иначе писать JS.
29. vladnet 361 03.12.21 00:01 Сейчас в теме
А делать редактор 1с на нем не пробовали? Я что то так и нормального решения для редактирования 1с кода с раскраской не нашел под управляемые формы. Ace вроде то что надо, особенно после того как на ВебКит перешла 1с.
30. SizovE 262 03.12.21 08:46 Сейчас в теме
Оставьте свое сообщение