svelte jsoneditor
v2.3.3
Веб-инструмент для просмотра, редактирования, формата, преобразования и проверки JSON.
Попробуйте: https://jsoneditoronline.org
Библиотека написана с помощью стрте, но также может использоваться в простом JavaScript и в любой структуре (SolidJS, React, Vue, Angular и т. Д.). Это требует браузера с марта 2022 года или новым.
Для использования в стройном проекте:
npm install svelte-jsoneditor
Для использования в ванильном JavaScript или рамках, таких как SolidJS, React, Vue, Angular и т. Д.
npm install vanilla-jsoneditor
Создайте JSonEditor с двусторонним bind:json :
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
array : [ 1 , 2 , 3 ] ,
boolean : true ,
color : '#82b92c' ,
null : null ,
number : 123 ,
object : { a : 'b' , c : 'd' } ,
string : 'Hello World'
}
}
</ script >
< div >
< JSONEditor bind:content />
</ div >Или одностороннее переплет:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
greeting : 'Hello World'
}
}
function handleChange ( updatedContent , previousContent , { contentErrors , patchResult } ) {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange: ' , { updatedContent , previousContent , contentErrors , patchResult } )
content = updatedContent
}
</ script >
< div >
< JSONEditor {content} onChange =" {handleChange} " />
</ div > Библиотека предоставляет ванильный пакет редактора через библиотеку NPM vanilla-jsoneditor (вместо svelte-jsoneditor ), который можно использовать в любой среде и структуры браузера. В таком рамках, как React, Vue или Angular, вам нужно написать код обертки вокруг интерфейса класса.
Если у вас есть настройка для вашего проекта с Bundler (например, Vite, Rollup или WebPack), лучше всего использовать импорт ES по умолчанию:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Если вы хотите использовать библиотеку прямо в браузере, используйте предоставленную отдельную пакет ES:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' Автономный комплект содержит все зависимости vanilla-jsoneditor , например lodash-es и Ajv . Если вы используете некоторые из этих зависимостей в своем проекте, это означает, что они будут дважды в комплекте в вашем веб -приложении, что приведет к безличее большим размерам приложения. В общем, предпочтительнее использовать import { createJSONEditor } from 'vanilla-jsoneditor' вместо автономного пакета, чтобы можно было повторно использовать зависимости.
Пример браузера Загрузка автономного модуля ES:
<!doctype html >
< html lang =" en " >
< head >
< title > JSONEditor </ title >
</ head >
< body >
< div id =" jsoneditor " > </ div >
< script type =" module " >
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
// Or use it through a CDN (not recommended for use in production):
// import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/standalone.js'
// import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/standalone.js'
let content = {
text : undefined ,
json : {
greeting : 'Hello World'
}
}
const editor = createJSONEditor ( {
target : document . getElementById ( 'jsoneditor' ) ,
props : {
content ,
onChange : ( updatedContent , previousContent , { contentErrors , patchResult } ) => {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange' , { updatedContent , previousContent , contentErrors , patchResult } )
content = updatedContent
}
}
} )
// use methods get, set, update, and onChange to get data in or out of the editor.
// Use updateProps to update properties.
</ script >
</ body >
</ html >Чтобы облегчить использование библиотеки в выбранной основе, вы можете использовать библиотеку обертки:
Стройный компонент:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >Javasscript Class:
import { createJSONEditor } from 'vanilla-jsoneditor' // or 'vanilla-jsoneditor/standalone.js'
const content = { text : '[1,2,3]' }
const editor = createJSONEditor ( {
target : document . getElementById ( 'jsoneditor' ) ,
props : {
content ,
onChange : ( updatedContent , previousContent , { contentErrors , patchResult } ) => {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange' , { updatedContent , previousContent , contentErrors , patchResult } )
}
}
} ) Свойства, такие как content и mode либо передаются в качестве атрибутов с компонентом Svelte, таких как <JSONEditor {content} {mode} /> , или через props в случае заводской функции vanilla JS: createJSONEditor({ target, props: { content, mode } .
content: Content Передайте содержимое JSON, которое будет представлено в JSonEditor. Content - это объект, содержащий свойство json (анализированный документ JSON) или text (струнный документ JSON). Только одно из двух свойств должно быть определена. Вы можете передать оба типа контента редактору, независимо от того, в каком режиме он. Вы можете использовать двустороннее привязку с помощью bind:content .
ВАЖНО: Внесите только неизменные изменения в
content. Изменяемые изменения будут испортить историю и оказывать содержимое. См. Раздел «Необываемость».
selection: JSONEditorSelection | undefined Текущее выбранное содержимое. Вы можете использовать двустороннее привязка с помощью bind:selection . Режим tree поддерживает MultiSelection , KeySelection , EditKeySelection , ValueSelection , селекция, EditValueSelection , InsideSelection или AfterSelection . Режим table поддерживает ValueSelection , а text режим поддерживает TextSelection. Полем
mode: 'tree' | 'text' | 'table' Откройте редактор в режиме 'tree' (по умолчанию), режиму 'table' или режима 'text' (ранее: code режим).
mainMenuBar: boolean Покажите основной меню. Значение по умолчанию true .
navigationBar: boolean Покажите навигационную панель, где вы можете увидеть выбранный путь и перемещаться по вашему документу оттуда. Значение по умолчанию true .
statusBar: boolean Показать строку состояния в нижней части редактора 'text' , показывающая информацию о местоположении курсора и выбранном содержимое. Значение по умолчанию true .
askToFormat: boolean Когда true (по умолчанию) пользователя спросят, хочет ли он/она отформатировать документ JSON, когда компактный документ загружается или вставлен в режиме 'text' . Применимо только к режиму 'text' .
readOnly: boolean Откройте редактор в режиме только для чтения: никаких изменений не может быть внесено, не связанные кнопки скрыты из меню, а контекстное меню не включено. Значение по умолчанию false .
indentation: number | string Количество пробелов используется для вдавления в отступе при строки json, или строку, которая будет использоваться в качестве вдачи 't' для использования вкладки в качестве вложения или ' ' для использования 4 пространства (что эквивалентно настройке indentation: 4 ). См. Также свойство tabSize .
tabSize: number Когда вмешательство настроено как символ вкладки ( indentation: 't' ), tabSize настраивает, насколько большой символ вкладки. Значение по умолчанию 4 . Применимо только к text режиму.
escapeControlCharacters: boolean Ложь по умолчанию. Когда true , управляющие символы, такие как Newline и Tab, отображаются в виде сбежавших символов n и t . Только применимо для режима 'tree' , в 'text' режиме элементов управления режимом всегда избегаются.
escapeUnicodeCharacters: boolean Ложь по умолчанию. Когда true , символы Unicode, такие как ☎ и? выводятся сбежаты как u260e и ud83dude00 .
flattenColumns: boolean Верно по умолчанию. Только применимо к режиму 'table' . Когда true , вложенные свойства объекта будут отображаться в своем собственном столбце, с вложенным путем в качестве имени столбца. Когда false , вложенные объекты будут оказаны встроенными, и дважды щелкнуть их откроет их во всплывающем окне.
validator : function ( json : unknown ) : ValidationError [ ]Проверить документ JSON. Например, используйте встроенный валидатор схемы JSON, работающий на AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Настройте пользовательский диапазон JSON, например, lossless-json . По умолчанию используется нативный анализатор JSON JavaScript. Интерфейс JSON - это объект с функцией parse и stringify . Например:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
import { parse , stringify } from 'lossless-json'
const LosslessJSONParser = { parse , stringify }
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} parser =" {LosslessJSONParser} " />
</ div > validationParser: JSONParser = JSON Применимо только в случае предоставления validator . Это то же самое, что и parser , за исключением того, что этот анализатор используется для анализа данных перед отправкой в валидатор. Настройте пользовательский анализатор JSON, который используется для анализа JSON, прежде чем передавать его в validator . По умолчанию используется встроенный анализатор JSON . При прохождении пользовательского validationParser убедитесь, что вывод анализатора поддерживается настроенным validator . Таким образом, когда validationParser может выводить номера bigint или другие числовые типы, validator также должен поддерживать это. В режиме дерева, когда parser не будет равен validationParser , документ JSON будет преобразован до того, как он будет передан в validator через validationParser.parse(parser.stringify(json)) .
pathParser: JSONPathParser Дополнительный объект с методом разбора и строки для анализа и строительства JSONPath , который представляет собой массив с именами свойств. pathParser используется в редакторе Path в навигационной панели, которая открывается, нажав кнопку «Редактировать» в правой стороне навигационной панели. Функции pathParser.parse разрешено бросить ошибку, когда ввод недействителен. По умолчанию используется обозначение пути JSON, которое выглядит как $.data[2].nested.property . В качестве альтернативы, можно использовать, например, указатель JSON Pointer, как /data/2/nested/property или что-то специально сделанное. Связанные вспомогательные функции: parseJSONPath и stringifyJSONPath , parseJSONPointer и compileJSONPointer .
onError ( err : Error )Обратный вызов стрелял, когда возникает ошибка. Реализация по умолчанию заключается в том, чтобы войти в систему ошибки в консоли и показать пользователь простое сообщение о предупреждении.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) Обратный вызов, который используется при каждом изменении содержимого, сделанного пользователем из редактора. Он не будет вызывать изменения, которые применяются программно через такие методы, как .set() , .update() или .patch() .
Возвращенный content иногда типа { json } , а иногда и типа { text } . Что из них возвращается, зависит от режима редактора, применяемого изменения и состояния документа (допустимого, недействительного, пустого). Имейте в виду, что { text } может содержать недействительный JSON: во время ввода в text режиме документ JSON будет временно недействительным, например, когда пользователь печатает новую строку. patchResult возвращается только при изменениях, которые могут быть представлены в виде документа JSON Patch, и, например, не при свободном вводе в text режиме.
onChangeMode ( mode : 'tree' | 'text' | 'table' )Вызывается при изменении режима.
onClassName ( path : JSONPath , value : any ) : string | undefined Добавьте пользовательское имя класса в определенные узлы, основываясь на их пути и/или значении. Обратите внимание, что в пользовательском классе вы можете переопределить переменные CSS, такие как --jse-contents-background-color чтобы изменить стиль узла, например, цвет фона. Соответствующие переменные:
--jse-contents-background-color
--jse-selection-background-color
--jse-selection-background-inactive-color
--jse-hover-background-color
--jse-context-menu-pointer-hover-background
--jse-context-menu-pointer-background
--jse-context-menu-pointer-background-highlight
--jse-collapsed-items-background-color
--jse-collapsed-items-selected-background-color Чтобы отрегулировать цвет текста ключей или значений, цвет классов .jse-key и .jse-value может быть перезаписан.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Настройка рендеринга значений. По умолчанию используется renderValue , что делает значение в качестве редактируемого Div и в зависимости от значения также может сделать логический переключатель, выборщик цветов и тег TimeStamp. Несколько компонентов могут быть отображены рядом друг с другом, например, логический переключатель и сборщик цветов, который оставляют от редактируемого Div. Чтобы отключить, например, встроенный цветовой сборщик или тег TimeMant, вы можете найти исходный код renderValue , скопировать его, а затем удалить компоненты, которые вы не хотите от функции. Встроенные компоненты рендеринга стоимости: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Для перечисления схемы JSON существует готовый рендеринг renderer renderJSONSchemaEnum , который перечисляет перечисление с использованием компонента EnumValue . Это можно использовать как:
import { renderJSONSchemaEnum , renderValue } from 'svelte-jsoneditor'
function onRenderValue ( props ) {
// use the enum renderer, and fallback on the default renderer
return renderJSONSchemaEnum ( props , schema , schemaDefinitions ) || renderValue ( props )
} Обратный вызов onRenderValue должен вернуть массив с одним или несколькими визуализациями. Каждый визуализатор может быть либо стройным компонентом, либо стройным действием:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} Интерфейс SvelteComponentRenderer может использоваться для предоставления стройных компонентов, таких как компонент EnumValue упомянутый выше. SvelteActionRenderer ожидает более стройного действия в качестве собственности action . Поскольку этот интерфейс является простым интерфейсом JavaScript, это позволяет создавать пользовательские компоненты в ванильной среде JS. По сути, это функция, которая передает узел DOM, и необходимо вернуть объект с помощью функций update и destroy :
const myRendererAction = {
action : ( node ) => {
// attach something to the HTML DOM node
return {
update : ( node ) => {
// update the DOM
} ,
destroy : ( ) => {
// cleanup the DOM
}
}
}
} onRenderMenu ( items : MenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean } ) : MenuItem [ ] | undefined Обратный вызов, который можно использовать для внесения изменений в пункты меню. Новые элементы могут быть добавлены, или существующие элементы могут быть удалены или реорганизованы. Когда функция возвращает undefined , исходные items будут применяться.
Используя mode значений контекста, modal и readOnly , могут быть предприняты различные действия в зависимости от режима редактора и того, отображается ли редактор внутри модала или нет, или в зависимости от того, является ли он только для чтения.
Меню MenuItem может быть одним из следующих типов:
Кнопка:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Сепаратор (серая вертикальная линия между группой предметов):
interface MenuSeparator {
type : 'separator'
}Пространство (заполняет пустое пространство):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Обратный вызов, который можно использовать для внесения изменений в пункты контекстного меню. Новые элементы могут быть добавлены, или существующие элементы могут быть удалены или реорганизованы. Когда функция возвращается undefined , исходные items будут применяться, а контекстное меню будет отображаться, когда readOnly является false . Когда функция возвращает false , контекстное меню никогда не будет отображаться. Обратный вызов также запускается, когда редактор readOnly , и в большинстве случаев вы хотите вернуть false .
Используя mode значений контекста, modal , readOnly и selection , можно предпринять различные действия в зависимости от режима редактора, независимо от того, отображается ли редактор внутри модала или нет, независимо от того, является ли редактор только для чтения или нет, и в зависимости от пути выбора.
ContextMenuItem пункта меню может быть одним из следующих типов:
Кнопка:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Кнопка раскрытия:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Сепаратор (серая линия между группой предметов):
interface MenuSeparator {
type : 'separator'
}Строка меню и столбец:
interface MenuLabel {
type : 'label'
text : string
}
interface ContextMenuColumn {
type : 'column'
items : Array < MenuButton | MenuDropDownButton | MenuLabel | MenuSeparator >
}
interface ContextMenuRow {
type : 'row'
items : Array < MenuButton | MenuDropDownButton | ContextMenuColumn >
} onSelect : ( selection : JSONEditorSelection | undefined ) => void Обратный вызов вызван при изменении выбора. Когда выбор удаляется, обратный вызов вызывается undefined как аргумент. В text режиме будет выпущено TextSelection . В режиме tree и table будет выпущена JSONSelection (которые могут быть MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection или AfterSelection ). Используйте типовые обороты, такие как isTextSelection и isValueSelection чтобы проверить, какой тип выбора.
queryLanguages: QueryLanguage [ ]Настройте один или несколько языка запросов, который можно использовать в Transform Modal. Библиотека поставляется со следующими языками, включенными:
Языки можно загрузить следующим образом:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] По умолчанию в редакторе загружается только jsonQueryLanguage .
Обратите внимание, что как lodashQueryLanguage , так и javascriptQueryLanguage могут выполнить произвольный код JavaScript и использовать new Function(...) для выполнения кода. Поэтому они не подходят в целом для хранения или обмена запросами из -за рисков безопасности. В некоторых средах попытка их использовать приведет к ошибкам CSP (политика безопасности контента) в зависимости от политики безопасности.
queryLanguageId: string id выбранного в настоящее время языка запросов.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidФункция обратного вызовов вызвана, когда пользователь изменяет выбранное язык запроса в TransformModal через правую кнопку конфигурации.
onFocus() выстрелил, когда редактор получил фокус.onBlur() выстрелил, когда редактор потерял фокус.Методы могут быть вызваны на экземпляр jsoneditor. В Svelte вы можете создать ссылку и вызвать метод, подобный:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />В редакторе Vanilla для создания экземпляра редактора используется заводская функция:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Обратите внимание, что большинство методов являются асинхронными и будут решать после повторного возрождения редактора (на следующем tick ).
JSONEditor . prototype . get ( ) : ContentПолучите текущий документ JSON.
ВАЖНО: Не мутируйте полученный
content, который испортит историю и одетый содержимое. См. Раздел «Необываемость».
JSONEditor . prototype . set ( content : Content ) : Promise < void > Замените текущий контент. Сбросит состояние редактора. См. Также Method update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Обновите загруженный контент, сохраняя состояние редактора (например, расширенные объекты). Вы также можете вызвать editor.updateProps({ content }) . См. Также set(content) .
Важно: применить только неизменные изменения в
content. Изменяемые изменения будут испортить историю и оказывать содержимое. См. Раздел «Необываемость».
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Примените документ JSON для обновления содержимого документа JSON. Документ JSON Patch - это список с операциями JSON Patch.
ВАЖНО: Примените только неизменные изменения в содержимое. Изменяемые изменения будут испортить историю и оказывать содержимое. См. Раздел «Необываемость».
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate некоторые или все свойства. Обновленный content тоже может быть передан; Это эквивалентно вызова update(content) . Пример:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Расширить или разрушить пути в редакторе. Все узлы вдоль предоставленного path будут расширены и станут видимыми (отображаются). Так, например, разрушенные разделы массива будут расширены. Используя необязательный callback , сам узел и некоторые или все его вложенные дочерние узлы также могут быть расширены. Функция callback итерапии итерации по видимым секциям массива, а не над какими -либо из свернутых разделов. По умолчанию первые 100 пунктов массива видны и отображаются.
Примеры:
editor.expand([], () => true) разверните всеeditor.expand([], relativePath => relativePath.length < 2)editor.expand(['array', '204']) Расширяйте корневой объект, массив в этом объекте и 204 -й элемент в массиве.editor.expand(['array', '204'], () => false) Разверните корневой объект, массив в этом объекте, но не сам 204 -й элемент.editor.expand(['array', '204'], relativePath => relativePath.length < 2) Расширяйте корневой объект, массив в этом объекте и расширяйте 204 -й массив и все его ребенка на глубине уровня максимума 2. Библиотека экспортирует пару функций утилиты для обычно используемых функций callback :
expandAll : рекурсивно расширить все вложенные объекты и массивы.expandNone : ничего не разверните, а также не корневой объект или массив.expandSelf : расширить корневую массив или объект. Это по умолчанию для параметра callback .expandMinimal : разверните корневую массив или объект, и в случае массива, расширите первый элемент массива. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Пройдите путь в редакторе. Когда recursive true , все вложенные объекты и массивы тоже будут обрушены. Значение recursive по умолчанию false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Программно нажатие кнопки «Преобразование» в главном меню, открывая модель преобразования. Если предоставлен обратный вызов onTransform , он заменит логику встроения, чтобы применить преобразование, что позволит вам обработать операции преобразования альтернативным образом. Если предоставлено, обратный вызов onClose будет запускать при закрытии Transform Modal, оба после нажатия пользователя нажали или отменили. Если предоставлен id , Modal Transform загрузит предыдущий статус этого id вместо состояния редакторов Transform Modal.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Прокрутите редактор вертикально так, чтобы представил указанный путь. Применимо только к tree режимов и table . Путь будет расширен при необходимости. Возвращенное обещание разрешено после завершения прокрутки.
JSONEditor . prototype . findElement ( path : JSONPath ) Найдите элемент DOM данного пути. Возвращает null , когда не найдено.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > В режиме деревьев неверный JSON автоматически ремонтируется при загрузке. Когда ремонт был успешным, отремонтированное содержимое отображается, но еще не применяется к самому документу, пока пользователь не нажмет «ОК» или не начнет редактировать данные. Вместо того, чтобы принимать ремонт, пользователь также может нажать «ремонт вручную». Вызов .acceptAutoRepair() программно примет ремонт. Это запустит обновление, и сам метод также возвращает обновленное содержимое. В случае text режима или когда редактор не находится в статусе «принять автоматическое ремонт», ничего не произойдет, и содержимое будет возвращено как есть.
JSONEditor . prototype . refresh ( ) : Promise < void > Обновить рендеринг содержимого, например, после изменения размера шрифта. Это доступно только в text режиме.
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedПолучите все текущие ошибки анализа и ошибки проверки.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Измените текущий выбор. Смотрите также selection опции.
JSONEditor . prototype . focus ( ) : Promise < void >Дайте редактору сосредоточиться.
JSONEditor . prototype . destroy ( ) : Promise < void >Уничтожьте редактора, удалите его из DOM.
Библиотека экспортирует набор функций утилиты. Точные определения этих функций могут быть найдены в типографии D
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch и использовать его функции:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Типы типов (например, Content , JSONSelection и JSONPatchOperation ) определены в следующем исходном файле:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
Редактор может быть стилизован с использованием доступных переменных CSS. Полный список со всеми переменными можно найти здесь:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Например, чтобы изменить синий цвет темы по умолчанию на антрацит:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
string : 'Hello custom theme color :)'
}
}
</ script >
< div class =" my-json-editor " >
< JSONEditor bind:content />
</ div >
< style >
.my-json-editor {
/* define a custom theme color */
--jse-theme-color: #383e42;
--jse-theme-color-highlight: #687177;
}
</ style >Редактор поставляется со встроенной темной темой. Чтобы использовать эту тему:
themes/jse-theme-dark.cssjse-theme-dark темной темы в элемент контейнера HTML, где загружается редактор. Можно загрузить стиль нескольких тем и переключить их, изменив имя класса (например jse-theme-dark ), прикрепленный к элементу контейнера HTML.
Полный стройный пример:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
string : 'Hello dark theme :)'
}
}
</ script >
<!-- use a theme by adding its name to the container class -->
< div class =" my-json-editor jse-theme-dark " >
< JSONEditor bind:content />
</ div >
< style >
/* load one or multiple themes */
@import 'svelte-jsoneditor/themes/jse-theme-dark.css';
</ style > При динамической обновлении переменных CSS необходимо обновить VIA editorRef.refresh() , чтобы обновить размер шрифта номеров линий в желобе и обновить цвета маркеров отступления в text режиме:
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> Важно, чтобы content редактора обновлялось только неизменным образом. Мутирование content нарушит историю (отмену/повторный) и не всегда сразу же обновляет пользовательский интерфейс в соответствии с изменениями.
Причины требуют неизменных изменений:
Другие преимущества неизменного способа работы заключаются в том, что он делает данные, которые вы работаете с гораздо более прогнозирующими и менее подверженными ошибкам. Вы можете узнать больше о неизменности, искав статьи или видео о предмете, таких как это видео или в этой статье. Не всегда лучший выбор, но в случае этого редактора JSON мы имеем дело с большими и глубоко вложенными структурами данных, в которых мы обычно вносим только небольшие изменения, такие как обновление одного вложенного значения. Необходимый подход действительно сияет здесь, позволяя svelte-jsoneditor плавно отображать и редактировать документы JSON до 512 МБ.
Вот пример измененного изменения:
// mutable change (NOT SUPPORTED!)
function updateDate ( ) {
const lastEdited = new Date ( ) . toISOString ( )
const content = toJsonContent ( myJsonEditor . get ( ) )
content . json . lastEdited = lastEdited // <- this is a mutable change
myJsonEditor . update ( content )
// ERROR: The UI will not update immediately but only update after changing something
// inside the editor like the selection. And most importantly, history is broken now,
// because the original document is mutated. You cannot undo this action.
}Вместо этого вы можете применять то же самое изменение неизменным образом. Для этого есть различные варианты:
// immutable change using a libary like "mutative" or "immer" (efficient and easy to work with)
import { create } from 'mutative'
function updateDate1 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = create ( content , ( draft ) => {
draft . json . lastEdited = new Date ( ) . toISOString ( )
} )
myJsonEditor . update ( updatedContent )
}
// immutable change using "immutable-json-patch"
import { setIn } from 'immutable-json-patch'
function updateDate2 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = setIn ( content , [ 'json' , 'lastEdited' ] , new Date ( ) . toISOString ( ) )
myJsonEditor . update ( updatedContent )
}
// immutable change using the spread operator (not handy for updates in nested data)
function updateDate3 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = {
json : {
... content . json ,
lastEdited : new Date ( ) . toISOString ( )
}
}
myJsonEditor . update ( updatedContent )
}
// immutable change by creating a deep clone (simple though inefficient)
import { cloneDeep } from 'lodash-es'
function updateDate4 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = cloneDeep ( content )
updatedContent . json . lastEdited = new Date ( ) . toISOString ( )
myJsonEditor . update ( updatedContent )
} josdejong/svelte-jsoneditor и josdejong/jsoneditor Эта библиотека josdejong/svelte-jsoneditor является преемником josdejong/jsoneditor . Основные различия:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Создание | Оригинал (впервые опубликовано в 2011 году) | Преемник (впервые опубликовано в 2021 году) |
| Рамки | Реализовано в простом JavaScript, используя низкоуровневые операции DOM | Использует SVELTE |
| Дерево режим | Вид дерева, имеющая кнопки контекстного меню слева от каждой линии. Ключи и ценности всегда в редактируемом состоянии. | Вид дерева, использующий правой кнопкой мыши, чтобы открыть контекстное меню, и дважды щелкните, чтобы начать редактирование ключа или значения (больше похоже на электронную таблицу или текстовый редактор). Он поддерживает копирование/вставку с и в системный буфер обмена. |
| Текстовый режим | Powered от Ace Editor | Питание от кодового зеркала |
| Режим предварительного просмотра | Используется для предварительного просмотра больших документов | Не требуется, как tree , так и text режим может обрабатывать большие документы |
Основными причинами создания новой библиотеки вместо расширения существующей являются:
josdejong/jsoneditor прост и просто, но также ограничен. Новый режим дерева josdejong/svelte-jsoneditor обеспечивает гораздо более упорядоченное редактирование и взаимодействие. Это работает очень похоже на электронную таблицу или текстовый редактор. Перейдите и выберите, используя клавиши стрелки и Shift+стрелки или перетаскивая мышью. Дважды щелкните (или нажмите Enter), чтобы начать редактирование клавиши или значение. Откройте контекстное меню, щелкнув правой кнопкой мыши по элементу или выбору, на котором вы хотите работать. Используйте Cut/Copy/Paste, чтобы перемещать части JSON вокруг и взаимодействовать с другими приложениями.Когда библиотека дает ошибки компиляции в вашей стройной настройке, она может быть связана с Vite, имеющим проблемы с импортом библиотек ESM/CommonJS правильно. Ошибка может выглядеть как:
SyntaxError: запрошенный модуль '/node_modules/json-source-map/index.js?v=fda884be' не предоставляет экспорт с именем «по умолчанию» (на jsonutils.js? V = fda884be: 2: 8)
Обходной путь состоит в том, чтобы добавить следующее в ваш файл vite.config.js (Подробнее):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Для начала: клонируйте репозиторий GIT, запустите npm install , а затем npm run dev .
Все доступные сценарии:
npm install # Install dependencies (once)
npm run dev # Start the demo project (at http://localhost:5173)
npm run build # Build the library (output in ./package and ./package-vanilla)
npm run test # Run unit tests in watch mode
npm run test-ci # Run unit tests once
npm run coverage # Run unit test coverage (output in ./coverage)
npm run check # Run Svelte checks
npm run lint # Run linter
npm run format # Automatically fix linting issues
npm run release-dry-run # To run the build and see the change list without actually publishing
npm run release # Publish to npm (requires login). This will test, check, lint, build,
# increase the version number, update the changelog, and publish to npm.
# Note that it will publish two npm packages: `svelte-jsoneditor`
# and `vanilla-jsoneditor`.
svelte-jsoneditor выпускается в качестве открытого исходного кода по разрешению лицензии ISC.
Если вы используете svelte-jsoneditor коммерчески, существует социальное (но нет законного) ожидания, что вы помогаете финансировать его обслуживание. Начните здесь.
