svelte jsoneditor
v2.3.3
Ein webbasiertes Tool zum Anzeigen, Bearbeiten, Formatieren, Transformieren und Validieren von JSON.
Probieren Sie es aus: https://jsoneditoronline.org
Die Bibliothek ist mit Svelte geschrieben, kann aber auch in einfacher JavaScript und in jedem Rahmen verwendet werden (SolidJs, React, Vue, Angular usw.). Es erfordert einen Browser vom März 2022 oder neuer.
Für die Verwendung in einem schlanken Projekt:
npm install svelte-jsoneditor
Für die Verwendung in Vanille -JavaScript oder Frameworks wie SolidJs, React, Vue, Angular usw.:
npm install vanilla-jsoneditor
Erstellen Sie einen JsonEditor mit bid-Wege- 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 >Oder Einwegbindung:
< 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 > Die Bibliothek bietet ein Vanillepaket des Editors über den NPM-Bibliothek vanilla-jsoneditor (anstelle von svelte-jsoneditor ), der in jeder Browser-Umgebung und im Rahmen verwendet werden kann. In einem Framework wie React, Vue oder Angular müssen Sie einen Wrapper -Code über die Klassenschnittstelle schreiben.
Wenn Sie ein Setup für Ihr Projekt mit einem Bundler (wie Vite, Rollup oder WebPack) haben, verwenden Sie am besten den Standard -ES -Import:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Wenn Sie die Bibliothek gerade im Browser verwenden möchten, verwenden Sie das bereitgestellte eigenständige ES -Bundle:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' Das eigenständige Bündel enthält alle Abhängigkeiten von vanilla-jsoneditor , zum Beispiel lodash-es und Ajv . Wenn Sie auch einige dieser Abhängigkeiten in Ihrem Projekt verwenden, bedeutet dies, dass sie zweimal in Ihrer Webanwendung gebündelt werden, was zu einer unnötig großen Anwendungsgröße führt. Im Allgemeinen ist es vorzuziehen, den Standardimport import { createJSONEditor } from 'vanilla-jsoneditor' anstelle des eigenständigen Bündels zu verwenden, damit die Abhängigkeiten wiederverwendet werden können.
BROWSER -Beispiel laden das eigenständige ES -Modul:
<!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 >Um die Verwendung der Bibliothek in Ihrem Framework Ihrer Wahl zu vereinfachen, können Sie eine Wrapper -Bibliothek verwenden:
Svelt -Komponente:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >Javascript -Klasse:
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 } )
}
}
} ) Eigenschaften wie content und mode werden entweder als Attribute an die Svelte -Komponente wie <JSONEditor {content} {mode} /> oder über die props im Falle der Vanille -Fabrikfunktion: createJSONEditor({ target, props: { content, mode } übergeben.
content: Content Pass an den JSON -Inhalt vorbei, der im JSONEDITOR gerendert werden soll. Content ist ein Objekt, das eine Eigenschaft json (ein analysiertes JSON -Dokument) oder text (ein stringatifiziertes JSON -Dokument) enthält. Es muss nur eines der beiden Eigenschaften definiert werden. Sie können beide Inhaltstypen an den Editor übergeben, unabhängig von dem Modus. Sie können eine Zwei-Wege-Bindung über bind:content verwenden.
WICHTIG: NUR EINFALISCHE ALDEN DER
content. Veränderliche Veränderungen werden die Geschichte durcheinander bringen und Inhalte gerendert. Siehe Abschnitt Unveränderlichkeit.
selection: JSONEditorSelection | undefined Der aktuelle ausgewählte Inhalt. Sie können eine Zwei-Wege-Bindung unter Verwendung von bind:selection verwenden. Der tree unterstützt MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection oder AfterSelection . Der table unterstützt ValueSelection und text unterstützt TextSelection. .
mode: 'tree' | 'text' | 'table' Öffnen Sie den Editor im 'tree' -Modus (Standard), 'table' oder 'text' -Modus (früher: code -Modus).
mainMenuBar: boolean Zeigen Sie die Hauptmenüleiste an. Standardwert ist true .
navigationBar: boolean Zeigen Sie die Navigationsleiste mit, in der Sie den ausgewählten Pfad sehen und von dort durch Ihr Dokument navigieren können. Standardwert ist true .
statusBar: boolean Zeigen Sie eine Statusleiste am Ende des Editors 'text' an, in dem Informationen zum Cursorort und ausgewählten Inhalten angezeigt werden. Standardwert ist true .
askToFormat: boolean Wenn true (Standard), wird der Benutzer gefragt, ob er das JSON -Dokument formatieren möchte, wenn ein kompaktes Dokument im 'text' geladen oder eingefügt wird. Nur für 'text' -Modus anwendbar.
readOnly: boolean Öffnen Sie den Editor im schreibgeschützten Modus: Es können keine Änderungen vorgenommen werden, nicht relevante Schaltflächen sind im Menü versteckt, und das Kontextmenü ist nicht aktiviert. Der Standardwert ist false .
indentation: number | string Anzahl der Leerzeichen, die für die Einklingung verwendet werden, wenn JSON mit JSON gestrichen wird, oder eine Zeichenfolge, die als Eindrückung verwendet werden soll, wie 't' ' ' eine Registerkarte als Eindrückung zu verwenden, oder um 4 Räume zu verwenden (was der Konfiguration indentation: 4 ). Siehe auch tabSize Eigenschaft".
tabSize: number Wenn die Einführung als Registerkartenzeichen konfiguriert ist ( indentation: 't' ), konfiguriert tabSize , wie groß ein Registerkartenzeichen gerendert wird. Standardwert ist 4 . Nur für den text anwendbar.
escapeControlCharacters: boolean Standardmäßig falsch. Wenn true , werden Steuerzeichen wie Newline und Tab als entkommene Zeichen n und t gerendert. Nur für 'tree' -Modus wird im 'text' -Modus -Steuerzeichen immer entkommen.
escapeUnicodeCharacters: boolean Standardmäßig falsch. Wenn true , Unicode -Zeichen wie ☎ und? werden wie u260e und ud83dude00 gerendert.
flattenColumns: boolean Standardmäßig wahr. Nur für 'table' -Modus anwendbar. Wenn true , werden verschachtelte Objekteigenschaften jeweils in ihrer eigenen Spalte mit dem verschachtelten Pfad als Spaltenname angezeigt. Wenn false , werden verschachtelte Objekte inline gerendert, und Doppelklicken werden sie in einem Popup öffnen.
validator : function ( json : unknown ) : ValidationError [ ]Validieren Sie das JSON -Dokument. Verwenden Sie beispielsweise den integrierten JSON-Schema-Validator von AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Konfigurieren Sie einen benutzerdefinierten JSON-Parser wie lossless-json . Standardmäßig wird der native JSON -Parser von JavaScript verwendet. Die JSON -Schnittstelle ist ein Objekt mit einer parse und stringify -Funktion. Zum Beispiel:
< 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 Nur dann anwendbar, wenn ein validator bereitgestellt wird. Dies ist der gleiche wie parser , außer dass dieser Parser verwendet wird, um die Daten vor dem Senden an den Validator zu analysieren. Konfigurieren Sie einen benutzerdefinierten JSON -Parser, mit dem JSON vor dem Übergeben an den validator analysiert wird. Standardmäßig wird der eingebaute JSON Parser verwendet. Stellen Sie beim Übergeben eines benutzerdefinierten validationParser sicher, dass die Ausgabe des Parsers vom konfigurierten validator unterstützt wird. Wenn der validationParser bigint -Zahlen oder andere numerische Typen ausgeben kann, muss der validator dies auch unterstützen. Im Baummodus wird das JSON -Dokument, wenn parser nicht gleich dem validationParser ist, konvertiert, bevor es über validationParser.parse(parser.stringify(json)) an den validator übergeben wird.
pathParser: JSONPathParser Ein optionales Objekt mit einer Analyse- und String -Methode zum Analysieren und String eines JSONPath , bei dem es sich um ein Array mit Eigenschaftennamen handelt. Der pathParser wird im Pfadeditor in der Navigationsleiste verwendet, die durch Klicken auf die Schaltfläche Bearbeiten auf der rechten Seite der Navigationsleiste geöffnet wird. Die Funktion pathParser.parse darf einen Fehler werfen, wenn die Eingabe ungültig ist. Standardmäßig wird eine JSON -Pfadnotation verwendet, die wie $.data[2].nested.property aussieht. Alternativ ist es möglich, beispielsweise eine JSON-Zeigernotation wie /data/2/nested/property oder etwas Mobile hergestellt zu verwenden. Verwandte Helferfunktionen: parseJSONPath und stringifyJSONPath , parseJSONPointer und compileJSONPointer .
onError ( err : Error )Rückruf abgefeuert, wenn ein Fehler auftritt. Die Standardimplementierung besteht darin, einen Fehler in der Konsole zu protokollieren und dem Benutzer eine einfache Warnmeldung anzuzeigen.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) Der Rückruf, der bei jeder Änderung des Inhalts des Benutzers aus dem Editor hergestellt wird. Es wird nicht auf Änderungen ausgelöst, die mit Methoden wie .set() , .update() oder .patch() programmgesteuert angewendet werden.
Der zurückgegebene content ist manchmal vom Typ { json } und manchmal vom Typ { text } . Welcher der beiden zurückgegeben wird, hängt vom Modus des Editors, der angewendeten Änderung und dem Status des Dokuments ab (gültig, ungültig, leer). Bitte beachten Sie, dass { text } ungültige JSON enthalten kann: Während des Eintippens im text ist ein JSON -Dokument vorübergehend ungültig, z. B. wenn der Benutzer eine neue Zeichenfolge eingibt. Der Parameter patchResult wird nur bei Änderungen zurückgegeben, die als JSON -Patch -Dokument dargestellt werden können, und beispielsweise nicht, wenn sie im text frei eingeben.
onChangeMode ( mode : 'tree' | 'text' | 'table' )Aufgerufen, wenn der Modus geändert wird.
onClassName ( path : JSONPath , value : any ) : string | undefined Fügen Sie bestimmten Knoten einen benutzerdefinierten Klassennamen hinzu, basierend auf ihrem Pfad und/oder ihrem Wert. Beachten Sie, dass Sie in der benutzerdefinierten Klasse CSS-Variablen wie --jse-contents-background-color überschreiben können, um das Styling eines Knotens wie die Hintergrundfarbe zu ändern. Relevante Variablen sind:
--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 Um die Textfarbe von Schlüssel oder Werten anzupassen, kann die Farbe der Klassen .jse-key und .jse-value überschrieben werden.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Anpassen der Werte anpassen. Standardmäßig wird renderValue verwendet, wodurch ein Wert als bearbeitbarer DIV und abhängig vom Wert auch einen Booleschen Umschalter, einen Farbwähler und ein Zeitstempel -Tag rendern. Mehrere Komponenten können nebeneinander gerendert werden, z. Um beispielsweise den integrierten Farbwählers oder Timestamp-Tag zu deaktivieren, können Sie den Quellcode von renderValue nachschlagen, ihn kopieren und dann die Komponenten entfernen, die Sie nicht aus der Funktion möchten. Eingebaute Value -Renderer -Komponenten: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Für JSON Schema Enums gibt es einen vorgefertigten Value-Renderer renderJSONSchemaEnum , der die Enum mithilfe der EnumValue Komponente verwandelt. Dies kann verwendet werden wie:
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 )
} Der Rückruf onRenderValue muss ein Array mit einem oder mehreren Renderern zurückgeben. Jeder Renderer kann entweder eine schlanke Komponente oder eine Sufle -Aktion sein:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} Die SvelteComponentRenderer -Schnittstelle kann verwendet werden, um Selte -Komponenten wie die oben erwähnte EnumValue -Komponente bereitzustellen. Der SvelteActionRenderer erwartet eine Svelt -Aktion als action . Da es sich bei dieser Schnittstelle um eine einfache JavaScript -Schnittstelle handelt, können benutzerdefinierte Komponenten in einer Vanille -JS -Umgebung erstellt werden. Grundsätzlich ist es eine Funktion, die einen DOM -Knoten übergeben erhält und ein Objekt mit update zurückgeben und destroy muss:
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 Rückruf, mit dem Änderungen an den Menüpunkten vorgenommen werden können. Neue Elemente können hinzugefügt oder vorhandene Elemente entfernt oder neu organisiert werden. Wenn die Funktion undefined zurückgibt, werden die items angewendet.
Verwenden des mode , modal und readOnly können unterschiedliche Aktionen abhängig vom Modus des Editors und der Frage, ob der Editor in einem Modal gerendert wird oder nicht oder nicht, ob es sich um schreibgeschützte handelt.
Ein Menüpunkt MenuItem kann einer der folgenden Typen sein:
Taste:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Separator (graue vertikale Linie zwischen einer Gruppe von Elementen):
interface MenuSeparator {
type : 'separator'
}Raum (füllt den leeren Raum):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Rückruf, mit dem Änderungen an den Kontextmenüelementen vorgenommen werden können. Neue Elemente können hinzugefügt oder vorhandene Elemente entfernt oder neu organisiert werden. Wenn die Funktion undefined zurückgibt, werden die items angewendet und das Kontextmenü wird angezeigt, wenn readOnly false ist. Wenn die Funktion false zurückgibt, wird das Kontextmenü niemals angezeigt. Der Rückruf wird ebenfalls ausgelöst, wenn der Editor readOnly ist und in den meisten Fällen dann false zurückkehren möchten.
Unter Verwendung des mode , modal , readOnly und selection können je nach Modus des Editors unterschiedliche Aktionen ergriffen werden, unabhängig davon, ob der Editor in einem Modal gerendert wird oder nicht, unabhängig davon, ob der Editor nur schreibgeschützt ist oder nicht, und abhängig vom Weg der Auswahl.
Ein Menüelement ContextMenuItem kann einer der folgenden Typen sein:
Taste:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Dropdown -Taste:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Separator (graue Linie zwischen einer Gruppe von Elementen):
interface MenuSeparator {
type : 'separator'
}Menüzeile und Spalte:
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 Rückruf aufgerufen, wenn die Auswahl geändert wird. Wenn die Auswahl entfernt wird, wird der Rückruf mit undefined Argument aufgerufen. Im text wird eine TextSelection abgefeuert. Im tree und table wird eine JSONSelection abgefeuert (die MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection oder AfterSelection ) sein kann. Verwenden Sie Typeguards wie isTextSelection und isValueSelection um zu überprüfen, welche Art die Auswahl hat.
queryLanguages: QueryLanguage [ ]Konfigurieren Sie eine oder mehrere Abfragesprache, die im Transformationsmodal verwendet werden können. Die Bibliothek enthält die folgenden Sprachen enthalten:
Die Sprachen können wie folgt geladen werden:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] Standardmäßig wird nur jsonQueryLanguage im Editor geladen.
Beachten Sie, dass sowohl lodashQueryLanguage als auch javascriptQueryLanguage beliebigen JavaScript -Code ausführen und new Function(...) verwenden können, um den Code auszuführen. Daher sind sie aufgrund der Sicherheitsrisiken im Allgemeinen nicht geeignet, Anfragen zu speichern oder zu teilen. In einigen Umgebungen führt der Versuch, sie zu verwenden, abhängig von der Sicherheitsrichtlinie zu CSP -Fehlern (Inhaltssicherheitsrichtlinie).
queryLanguageId: string Die id der aktuell ausgewählten Abfragesprache.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidRückruffunktion aufgerufen, wenn der Benutzer die ausgewählte Abfragesprache im TransformModal über die Konfigurationschaltfläche oben rechts ändert.
onFocus() Callback wurde abgefeuert, als der Herausgeber Fokus erhielt.onBlur() Rückruf abgefeuert, als der Herausgeber den Fokus verlor.Methoden können auf eine JsonEditor -Instanz aufgerufen werden. In Sufle können Sie eine Referenz erstellen und eine Methode wie folgt aufrufen:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />Im Vanille -Editor wird eine Fabrikfunktion verwendet, um eine Editorinstanz zu erstellen:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Beachten Sie, dass die meisten Methoden asynchron sind und nach dem erneuten Rendern des Editors auflösen werden (auf der nächsten tick ).
JSONEditor . prototype . get ( ) : ContentHolen Sie sich das aktuelle JSON -Dokument.
WICHTIG: Mutieren Sie den empfangenen
contentnicht, was die Geschichte durcheinander bringt und Inhalte gemacht hat. Siehe Abschnitt Unveränderlichkeit.
JSONEditor . prototype . set ( content : Content ) : Promise < void > Ersetzen Sie den aktuellen Inhalt. Wird den Zustand des Herausgebers zurücksetzen. Siehe auch Method update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Aktualisieren Sie den geladenen Inhalt und führen Sie den Status des Editors (wie erweiterte Objekte). Sie können auch editor.updateProps({ content }) anrufen. Siehe auch Method set(content) .
WICHTIG: Wenden Sie nur unveränderliche Änderungen des
contentan. Veränderliche Veränderungen werden die Geschichte durcheinander bringen und Inhalte gerendert. Siehe Abschnitt Unveränderlichkeit.
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Wenden Sie ein JSON -Patch -Dokument an, um den Inhalt des JSON -Dokuments zu aktualisieren. Ein JSON -Patch -Dokument ist eine Liste mit JSON -Patch -Operationen.
Wichtig: Wenden Sie nur unveränderliche Änderungen des Inhalts an. Veränderliche Veränderungen werden die Geschichte durcheinander bringen und Inhalte gerendert. Siehe Abschnitt Unveränderlichkeit.
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate einige oder alle Eigenschaften. Auch aktualisierte content können übergeben werden. Dies entspricht dem Aufrufen von update(content) . Beispiel:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Erweitern oder kollabieren Sie die Pfade im Herausgeber. Alle Knoten entlang des bereitgestellten path werden erweitert und sichtbar (gerendert). So werden beispielsweise zusammengebrochene Abschnitte eines Arrays erweitert. Mit dem optionalen callback können der Knoten selbst und einige oder alle verschachtelten Kinderknoten ebenfalls erweitert werden. Die callback iteriert nur über die sichtbaren Abschnitte eines Arrays und nicht über einen der zusammengebrochenen Abschnitte. Standardmäßig sind die ersten 100 Elemente eines Arrays sichtbar und gerendert.
Beispiele:
editor.expand([], () => true) alle erweiterneditor.expand([], relativePath => relativePath.length < 2) Erweitern Sie alle Pfade bis zu 2 Stufen tiefeditor.expand(['array', '204']) das Stammobjekt, das Array in diesem Objekt und das 204. Element im Array erweitern.editor.expand(['array', '204'], () => false) erweitern das Stammobjekt, das Array in diesem Objekt, aber nicht das 204. Element selbst.editor.expand(['array', '204'], relativePath => relativePath.length < 2) Erweitern Sie das Root -Objekt, das Array in diesem Objekt und erweitern Sie das 204. Array -Element und alle seine Kindes bis zu einer Tiefe von max. Die Bibliothek exportiert einige Dienstprogrammfunktionen für häufig verwendete callback :
expandAll : Erweitern Sie rekursiv alle verschachtelten Objekte und Arrays.expandNone : Nichts erweitern, auch nicht das Root -Objekt oder das Array.expandSelf : Erweitern Sie das Root -Array oder das Objekt. Dies ist die Standardeinstellung für den callback .expandMinimal : Erweitern Sie das Root -Array oder das Objekt und erweitern Sie im Falle eines Arrays das erste Array -Element. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Kollabieren Sie einen Pfad im Herausgeber. Wenn recursive true ist, werden auch alle verschachtelten Objekte und Arrays zusammengebrochen. Der Standardwert der recursive ist false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Programmatisch auslösen Sie das Klicken auf die Transformationstaste im Hauptmenü und öffnen Sie das Transformationsmodell. Wenn ein Rückruf onTransform wird, ersetzt er die Build-In-Logik, um eine Transformation anzuwenden, sodass Sie die Transformationsvorgänge auf alternative Weise verarbeiten können. Wenn der Onclose -Callback bereitgestellt wird, löst sich onClose -Callback aus, wenn das Transformationsmodal schließt, sowohl nachdem der Benutzer geklickt oder abbrechen geklickt hat. Wenn eine id bereitgestellt wird, lädt das Transformationsmodal den vorherigen Status dieser id anstelle des Status der Editoren Transformation Modal.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Scrollen Sie den Editor vertikal, so dass der angegebene Pfad in Sichtweise kommt. Nur für Modi tree and table anwendbar. Der Weg wird bei Bedarf erweitert. Das zurückgegebene Versprechen wird nach Abschluss der Scrollen gelöst.
JSONEditor . prototype . findElement ( path : JSONPath ) Finden Sie das DOM -Element eines bestimmten Pfades. Gibt null zurück, wenn nicht gefunden wird.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > Im Baummodus wird ungültiger JSON beim Laden automatisch repariert. Wenn die Reparatur erfolgreich war, werden die reparierten Inhalte gerendert, aber noch nicht auf das Dokument selbst angewendet, bis der Benutzer "OK" klickt oder die Daten bearbeitet. Anstatt die Reparatur zu akzeptieren, kann der Benutzer auch auf "Stattdessen manuell reparieren" klicken. Das Aufrufen von .acceptAutoRepair() akzeptiert die Reparatur programmgesteuert. Dadurch wird ein Update ausgelöst, und die Methode selbst gibt auch den aktualisierten Inhalt zurück. Im text oder wenn sich der Editor nicht in einem Status "Automatische Reparatur akzeptieren" befindet, wird nichts passieren, und der Inhalt wird so zurückgegeben.
JSONEditor . prototype . refresh ( ) : Promise < void > Aktualisierung des Inhalts Aktualisierung, beispielsweise nach Ändern der Schriftgröße. Dies ist nur im text verfügbar.
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedHolen Sie sich alle aktuellen Analysefehler und Validierungsfehler.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Ändern Sie die aktuelle Auswahl. Siehe auch Option selection .
JSONEditor . prototype . focus ( ) : Promise < void >Geben Sie den Herausgeber Fokus.
JSONEditor . prototype . destroy ( ) : Promise < void >Zerstören Sie den Herausgeber, entfernen Sie ihn aus dem DOM.
Die Bibliothek exportiert eine Reihe von Versorgungsfunktionen. Die genauen Definitionen dieser Funktionen finden Sie im Typenkript d
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch installieren und seine Funktionen verwenden:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Die Typscript -Typen (wie Content , JSONSelection und JSONPatchOperation ) sind in der folgenden Quelldatei definiert:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
Der Editor kann mit den verfügbaren CSS -Variablen gestylt werden. Eine vollständige Liste mit allen Variablen finden Sie hier:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Zum Beispiel, um die Standard -Blue -Themenfarbe in Anthrazit zu ändern:
< 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 >Der Herausgeber verfügt über ein integriertes dunkles Thema. Um dieses Thema zu verwenden:
themes/jse-theme-dark.cssjse-theme-dark des dunklen Themas dem HTML-Containerelement hinzu, in dem der Editor geladen wird. Es ist möglich, das Styling mehrerer Themen zu laden und sie umzuschalten, indem der Klassenname (wie jse-theme-dark ) an das HTML-Containerelement geändert wird.
Volles schlankes Beispiel:
< 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 > Bei der dynamischen Aktualisierung von CSS-Variablen müssen Sie die über editorRef.refresh() aktualisiert, um die Schriftgröße der Zeilennummern in der Dachrinne zu aktualisieren und die Farben der Eindrückungsmarkierungen im text zu aktualisieren:
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> Es ist wichtig, dass der content des Editors nur auf unveränderliche Weise aktualisiert wird. Durch Mutieren des content wird der Verlauf (rückgängig gemacht) und die Benutzeroberfläche gemäß den Änderungen nicht immer sofort aktualisiert.
Die Gründe für unveränderliche Änderungen sind:
Weitere Vorteile einer unveränderlichen Arbeitsweise bestehen darin, dass die Daten, die Sie mit viel prädiktiveren und weniger fehleranfälligen Arbeiten arbeiten. Sie können mehr über die Unveränderlichkeit erfahren, indem Sie nach Artikeln oder Videos zu diesem Thema suchen, z. B. dieses Video oder diesen Artikel. Unveränderlichkeit ist nicht immer die beste Wahl, aber im Fall dieses JSON -Editors haben wir uns mit großen und tief verschachtelten Datenstrukturen zu tun, bei denen wir normalerweise nur kleine Änderungen vornehmen, z. B. die Aktualisierung eines einzelnen verschachtelten Wertes. Ein unveränderlicher Ansatz leuchtet hier wirklich und ermöglicht es svelte-jsoneditor JSON-Dokumente reibungslos zu rendern und zu bearbeiten, bis zu 512 MB.
Hier ist ein Beispiel für eine veränderliche Veränderung:
// 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.
}Stattdessen können Sie dieselbe Änderung auf unveränderliche Weise anwenden. Dafür gibt es verschiedene Optionen:
// 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 und josdejong/jsoneditor Diese Bibliothek josdejong/svelte-jsoneditor ist der Nachfolger von josdejong/jsoneditor . Die Hauptunterschiede sind:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Schaffung | Original (erstmal 2011 veröffentlicht) | Nachfolger (erstmals im Jahr 2021 veröffentlicht) |
| Rahmen | Implementiert in einfach JavaScript unter Verwendung von DOM -Operationen mit niedrigem Niveau | Verwendet Sufle |
| Baummodus | Eine Baumansicht mit Kontextmenüschaltflächen links von jeder Zeile. Die Schlüssel und Werte sind immer im bearbeitbaren Zustand. | Eine Baumansicht unter Verwendung der rechten Maustaste, um das Kontextmenü zu öffnen, und doppelklicken Sie mit der Bearbeitung eines Schlüssels oder eines Werts (ähnlicher wie eine Tabelle oder einen Texteditor). Es unterstützt kopieren/einfügen von und in die Systemklemme. |
| Textmodus | Angetrieben von Ace Editor | Mit Codespiegel betrieben |
| Vorschau -Modus | Wird zur Vorschau großer Dokumente verwendet | Nicht benötigt, sowohl tree als auch text können große Dokumente verarbeiten |
Die Hauptgründe für die Erstellung einer neuen Bibliothek, anstatt die vorhandenen zu erweitern, sind:
josdejong/jsoneditor ist einfach und unkompliziert, aber auch begrenzt. Der neue Baummodus von josdejong/svelte-jsoneditor ermöglicht eine viel optimiertere Bearbeitung und Interaktion. Es funktioniert einer Tabelle oder einem Texteditor ziemlich ähnlich. Navigieren Sie und wählen Sie mit den Pfeil- und Verschiebungstasten oder durch Ziehen mit der Maus. Doppelklicken Sie doppelklicken (oder drücken Sie die Eingabetaste), um eine Taste oder einen Wert zu bearbeiten. Öffnen Sie das Kontextmenü, indem Sie mit der rechten Maustaste auf das Element oder die Auswahl klicken, auf der Sie arbeiten möchten. Verwenden Sie Schnitt/Kopieren/Einfügen, um Teile des JSON herumzuschieben und mit anderen Anwendungen zusammenzuarbeiten.Wenn die Bibliothek Kompilierfehler in Ihrem SufleTe -Setup enthält, kann sie mit VITE in Verbindung stehen, wenn Sie Probleme mit dem Importieren von ESM/CommonJS -Bibliotheken richtig importieren. Der Fehler könnte wie:
SyntaxError: Das angeforderte Modul '/node_modules/json-source-map/index.js?v=fda884be' liefert keinen Export mit dem Namen 'Standard' (unter jsonutils.js? V = fda884be: 2: 8)
Eine Problemumgehung besteht darin, Ihre vite.config.js -Datei (lesen Sie mehr) hinzu:
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Zu Beginn: Klonen Sie das Git -Repository, führen Sie npm install aus und dann npm run dev .
Alle verfügbaren Skripte:
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 wird als Open Source unter der Erlaubnis der ISC-Lizenz freigelassen.
Wenn Sie svelte-jsoneditor kommerziell verwenden, gibt es eine soziale (aber rechtliche) Erwartung, dass Sie bei der Finanzierung seiner Instandhaltung helfen. Beginnen Sie hier.
