Подсистема 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 и стандартному ФорматированныйДокумент.
Подписывайтесь на мой канал (наверху), будет много интересного бесплатного контента :)
