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

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

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