svelte jsoneditor
v2.3.3
Un outil Web pour afficher, modifier, formater, transformer et valider JSON.
Essayez-le: https://jsoneditoronline.org
La bibliothèque est écrite avec Svelte, mais peut également être utilisée en JavaScript simple et dans n'importe quel cadre (SolidJS, React, Vue, Angular, etc.). Il nécessite un navigateur de mars 2022 ou plus récent.
Pour une utilisation dans un projet Svelte:
npm install svelte-jsoneditor
Pour une utilisation en JavaScript de vanille ou des frameworks comme SolidJS, React, Vue, Angular, etc.:
npm install vanilla-jsoneditor
Créez un JsonEditor avec 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 >Ou reliure à sens unique:
< 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 > La bibliothèque fournit un paquet de vanille de l'éditeur via la bibliothèque NPM vanilla-jsoneditor (au lieu de svelte-jsoneditor ) qui peut être utilisée dans n'importe quel environnement et cadre de navigateur. Dans un cadre comme React, Vue ou Angular, vous devrez écrire du code wrapper autour de l'interface de classe.
Si vous avez une configuration pour votre projet avec un bundler (comme Vite, Rollup ou WebPack), il est préférable d'utiliser l'importation ES par défaut:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Si vous souhaitez utiliser la bibliothèque directement dans le navigateur, utilisez le bundle ES autonome fourni:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' Le faisceau autonome contient toutes les dépendances de vanilla-jsoneditor , par exemple lodash-es et Ajv . Si vous utilisez également certaines de ces dépendances dans votre projet, cela signifie qu'ils seront regroupés deux fois dans votre application Web, conduisant à une taille d'application inutilement importante. En général, il est préférable d'utiliser l' import { createJSONEditor } from 'vanilla-jsoneditor' au lieu du bundle autonome afin que les dépendances puissent être réutilisées.
Exemple de navigateur Chargement du module ES autonome:
<!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 >Pour faciliter l'utilisation de la bibliothèque dans votre cadre de choix, vous pouvez utiliser une bibliothèque wrapper:
Composant svelte:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >Classe Javasscript:
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 } )
}
}
} ) Les propriétés telles que content et mode sont passées comme attributs au composant svelte, comme <JSONEditor {content} {mode} /> , ou via les props en cas de fonction d'usine Vanilla JS: createJSONEditor({ target, props: { content, mode } .
content: Content Passez le contenu JSON à rendre dans le JsonEditor. Content est un objet contenant une propriété json (un document JSON analysé) ou text (un document JSON Strimed). Une seule des deux propriétés doit être définie. Vous pouvez transmettre les deux types de contenu à l'éditeur indépendamment du mode. Vous pouvez utiliser la liaison bidirectionnelle via bind:content .
IMPORTANT: n'apportez que des modifications immuables au
content. Les changements mutables gâcheront l'histoire et rendu le contenu. Voir l'immuabilité de la section.
selection: JSONEditorSelection | undefined Le contenu sélectionné actuel. Vous pouvez utiliser la liaison bidirectionnelle à l'aide bind:selection . Le mode tree prend en charge MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection ou AfterSelection . Le mode table prend en charge ValueSelection et le mode text prend en charge TextSelection. .
mode: 'tree' | 'text' | 'table' Ouvrez l'éditeur en mode 'tree' (par défaut), mode 'table' ou mode 'text' (anciennement: mode code ).
mainMenuBar: boolean Afficher la barre de menu principale. La valeur par défaut est true .
navigationBar: boolean Affichez la barre de navigation avec, où vous pouvez voir le chemin sélectionné et naviguer dans votre document à partir de là. La valeur par défaut est true .
statusBar: boolean Afficher une barre d'état en bas de l'éditeur 'text' , montrant des informations sur l'emplacement du curseur et le contenu sélectionné. La valeur par défaut est true .
askToFormat: boolean Lorsque true (par défaut), l'utilisateur sera invité à savoir s'il souhaite formater le document JSON lorsqu'un document compact est chargé ou collé en mode 'text' . Uniquement applicable au mode 'text' .
readOnly: boolean Ouvrez l'éditeur en mode en lecture seule: aucune modification ne peut être apportée, les boutons non pertinents sont cachés dans le menu et le menu contextuel n'est pas activé. La valeur par défaut est false .
indentation: number | string Nombre d'espaces utilisés pour l'indentation lors de la chaîne JSON, ou une chaîne à utiliser comme indentation comme 't' pour utiliser un onglet comme indentation, ou ' ' pour utiliser 4 espaces (ce qui équivaut à la configuration indentation: 4 ). Voir aussi tabSize de propriété.
tabSize: number Lorsque l'indentation est configurée en tant que caractère d'onglet ( indentation: 't' ), tabSize configure la taille d'un caractère d'onglet. La valeur par défaut est 4 . Uniquement applicable au mode text .
escapeControlCharacters: boolean False par défaut. Lorsqu'il true , les caractères de contrôle comme Newline et Tab sont rendus en tant que caractères échappés n et t . Uniquement applicable pour le mode 'tree' , dans les caractères de contrôle du mode 'text' sont toujours échappés.
escapeUnicodeCharacters: boolean False par défaut. Quand true , des caractères Unicode comme ☎ et? sont rendus échappés comme u260e et ud83dude00 .
flattenColumns: boolean Vrai par défaut. Uniquement applicable au mode 'table' . Lorsque true , les propriétés d'objet imbriquées seront affichées chacune dans sa propre colonne, avec le chemin imbriqué comme nom de colonne. Lorsque des objets false , imbriqués seront rendus en ligne, et les double cliquer sur les ouvriront dans une fenêtre contextuelle.
validator : function ( json : unknown ) : ValidationError [ ]Valider le document JSON. Par exemple, utilisez le validateur de schéma JSON intégré alimenté par AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Configurez un analyseur JSON personnalisé, comme lossless-json . Par défaut, l'analyseur JSON natif de JavaScript est utilisé. L'interface JSON est un objet avec une fonction parse et stringify . Par exemple:
< 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 Uniquement applicable lorsqu'un validator est fourni. C'est la même chose que parser , sauf que cet analyseur est utilisé pour analyser les données avant de l'envoyer au validateur. Configurez un analyseur JSON personnalisé qui est utilisé pour analyser JSON avant de le passer au validator . Par défaut, l'analyseur JSON intégré est utilisé. Lorsque vous passez un validationParser personnalisé, assurez-vous que la sortie de l'analyseur est prise en charge par le validator configuré. Ainsi, lorsque le validationParser peut produire des nombres bigint ou d'autres types numériques, le validator doit également le prendre en charge. En mode arborescence, lorsque parser n'est pas égal à validationParser , le document JSON sera converti avant qu'il ne soit passé au validator via validationParser.parse(parser.stringify(json)) .
pathParser: JSONPathParser Un objet facultatif avec une méthode Parse et Stringify pour analyser et chaîner un JSONPath , qui est un tableau avec des noms de propriétés. Le pathParser est utilisé dans l'éditeur de chemin dans la barre de navigation, qui est ouvert en cliquant sur le bouton Modifier sur le côté droit de la barre de navigation. La fonction pathParser.parse est autorisée à lancer une erreur lorsque l'entrée n'est pas valide. Par défaut, une notation de chemin JSON est utilisée, qui ressemble à $.data[2].nested.property . Alternativement, il est possible d'utiliser par exemple une notation de pointeur JSON comme /data/2/nested/property ou quelque chose de sur mesure. Fonctions d'assistance associées: parseJSONPath et stringifyJSONPath , parseJSONPointer et compileJSONPointer .
onError ( err : Error )Le rappel a été tiré lorsqu'une erreur se produit. L'implémentation par défaut consiste à enregistrer une erreur dans la console et à afficher un message d'alerte simple à l'utilisateur.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) Le rappel qui est invoqué sur chaque changement du contenu effectué par l'utilisateur à partir de l'éditeur. Il ne déclenchera pas les modifications appliquées par programme via des méthodes comme .set() , .update() ou .patch() .
Le content renvoyé est parfois de type { json } , et parfois de type { text } . Lequel des deux est retourné dépend du mode de l'éditeur, de la modification appliquée et de l'état du document (valide, non valide, vide). Veuillez noter que { text } peut contenir JSON non valide: tout en tapant en mode text , un document JSON sera temporairement invalide, comme lorsque l'utilisateur tape une nouvelle chaîne. Le paramètre patchResult n'est renvoyé que sur des modifications qui peuvent être représentées comme un document de patch JSON, et par exemple non lors de la saisie librement en mode text .
onChangeMode ( mode : 'tree' | 'text' | 'table' )Invoqué lorsque le mode est modifié.
onClassName ( path : JSONPath , value : any ) : string | undefined Ajoutez un nom de classe personnalisé à des nœuds spécifiques, en fonction de leur chemin et / ou de leur valeur. Notez que dans la classe personnalisée, vous pouvez remplacer les variables CSS comme --jse-contents-background-color pour modifier le style d'un nœud, comme la couleur d'arrière-plan. Les variables pertinentes sont:
--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 Pour ajuster la couleur du texte des touches ou des valeurs, la couleur des classes .jse-key et .jse-value peut être écrasée.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Personnaliser le rendu des valeurs. Par défaut, renderValue est utilisé, ce qui rend une valeur en tant que div modifiable et en fonction de la valeur peut également rendre une bascule booléenne, un sélecteur de couleurs et une balise horodato. Plusieurs composants peuvent être rendus côte à côte, comme la booléenne et le sélecteur de couleurs rendues à partir de la div modifiable. Afin de désactiver par exemple le sélecteur de couleurs intégré ou la balise d'horodatage, vous pouvez rechercher le code source de renderValue , le copier, puis supprimer les composants que vous ne souhaitez pas de la fonction. Composants de rendu de valeur intégrés: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Pour le schéma JSON Enum, il y a un rendu de valeur prêt à l'emploi renderJSONSchemaEnum qui rend les énumérations à l'aide du composant EnumValue . Cela peut être utilisé comme:
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 )
} Le rappel onRenderValue doit renvoyer un tableau avec un ou plusieurs rendus. Chaque rendu peut être un composant Svelte ou une action Svelte:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} L'interface SvelteComponentRenderer peut être utilisée pour fournir des composants svelte comme le composant EnumValue mentionné ci-dessus. Le SvelteActionRenderer s'attend à une action Svelte comme propriété action . Étant donné que cette interface est une interface JavaScript simple, cela permet de créer des composants personnalisés dans un environnement JS Vanilla. Fondamentalement, c'est une fonction qui fait passer un nœud DOM et doit renvoyer un objet avec des fonctions update et 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 Rappel qui peut être utilisé pour apporter des modifications aux éléments du menu. De nouveaux articles peuvent être ajoutés ou les articles existants peuvent être supprimés ou réorganisés. Lorsque la fonction renvoie undefined , les items d'origine seront appliqués.
En utilisant le mode des valeurs de contexte, modal et readOnly , différentes actions peuvent être prises en fonction du mode de l'éditeur et si l'éditeur est rendu dans un modal ou non, ou selon qu'il est en lecture seule.
Un élément de menu MenuItem peut être l'un des types suivants:
Bouton:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Séparateur (ligne verticale grise entre un groupe d'articles):
interface MenuSeparator {
type : 'separator'
}Espace (remplit l'espace vide):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Rappel qui peut être utilisé pour apporter des modifications aux éléments du menu contextuel. De nouveaux articles peuvent être ajoutés ou les articles existants peuvent être supprimés ou réorganisés. Lorsque la fonction renvoie undefined , les items d'origine seront appliqués et le menu contextuel sera affiché lorsque readOnly est false . Lorsque la fonction renvoie false , le menu contextuel ne sera jamais affiché. Le rappel est également déclenché lorsque l'éditeur est readOnly , et dans la plupart des cas, vous souhaitez retourner false alors.
En utilisant le mode des valeurs de contexte, modal , readOnly et selection , différentes actions peuvent être prises en fonction du mode de l'éditeur, que l'éditeur soit rendu dans un modal ou non, que l'éditeur soit en lecture seule ou non, et selon le chemin de la sélection.
Un élément de menu ContextMenuItem peut être l'un des types suivants:
Bouton:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Bouton déroulant:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Séparateur (ligne grise entre un groupe d'articles):
interface MenuSeparator {
type : 'separator'
}Ligne de menu et colonne:
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 Rappel invoqué lorsque la sélection est modifiée. Lorsque la sélection est supprimée, le rappel est invoqué avec undefined comme argument. En mode text , un TextSelection sera tiré. En mode tree et table , une JSONSelection JONSE sera tirée (qui peut être MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection ou AfterSelection ). Utilisez des TypeGuards comme isTextSelection et isValueSelection pour vérifier le type de sélection.
queryLanguages: QueryLanguage [ ]Configurez un ou un langage de requête multiple qui peut être utilisé dans le modal de transformation. La bibliothèque est livrée avec les langues suivantes incluses:
Les langues peuvent être chargées comme suit:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] Par défaut, seul jsonQueryLanguage est chargé dans l'éditeur.
Notez que lodashQueryLanguage et javascriptQueryLanguage peuvent exécuter le code JavaScript arbitraire et utiliser new Function(...) pour exécuter le code. Par conséquent, ils ne conviennent pas en général pour stocker ou partager des requêtes en raison des risques de sécurité. Dans certains environnements, essayer de les utiliser entraînera des erreurs CSP (Content Security Policy) en fonction de la politique de sécurité.
queryLanguageId: string L' id du langage de requête actuellement sélectionné.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidFonction de rappel invoquée lorsque l'utilisateur modifie le langage de requête sélectionné dans le transformmodal via le bouton de configuration en haut à droite.
onFocus() a tiré lorsque l'éditeur s'est mis au point.onBlur() a tiré lorsque l'éditeur a perdu Focus.Les méthodes peuvent être appelées sur une instance JSONEditor. Dans Svelte, vous pouvez créer une référence et appeler une méthode comme:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />Dans l'éditeur de vanille, une fonction d'usine est utilisée pour créer une instance d'éditeur:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Notez que la plupart des méthodes sont asynchrones et se résoudront après la réadaptation de l'éditeur (sur la prochaine tick ).
JSONEditor . prototype . get ( ) : ContentObtenez le document JSON actuel.
IMPORTANT: Ne mutez pas le
contentreçu, qui gâchera l'histoire et le contenu rendu. Voir l'immuabilité de la section.
JSONEditor . prototype . set ( content : Content ) : Promise < void > Remplacez le contenu actuel. Réinitialisera l'état de l'éditeur. Voir aussi Méthode update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Mettez à jour le contenu chargé, en gardant l'état de l'éditeur (comme des objets étendus). Vous pouvez également appeler editor.updateProps({ content }) . Voir aussi set(content) .
Important: appliquez uniquement des modifications immuables au
content. Les changements mutables gâcheront l'histoire et rendu le contenu. Voir l'immuabilité de la section.
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Appliquez un document JSON Patch pour mettre à jour le contenu du document JSON. Un document JSON Patch est une liste avec les opérations de correctifs JSON.
Important: appliquez uniquement des modifications immuables au contenu. Les changements mutables gâcheront l'histoire et rendu le contenu. Voir l'immuabilité de la section.
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate certaines ou toutes les propriétés. content mis à jour peut également être passé; Cela équivaut à l'appel update(content) . Exemple:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Développer ou effondrer les chemins dans l'éditeur. Tous les nœuds le long du path fourni seront élargis et deviendront visibles (rendus). Ainsi, par exemple, les sections effondrées d'un tableau seront élargies. En utilisant le callback facultatif, le nœud lui-même et tout ou partie de ses nœuds enfants imbriqués peuvent également être élargis. La fonction callback itère uniquement sur les sections visibles d'un tableau et non sur aucune des sections effondrées. Par défaut, les 100 premiers éléments d'un tableau sont visibles et rendus.
Exemples:
editor.expand([], () => true) développer touteditor.expand([], relativePath => relativePath.length < 2) Développez tous les chemins jusqu'à 2 niveaux de profondeureditor.expand(['array', '204']) Développez l'objet racine, le tableau de cet objet et le 204e élément dans le tableau.editor.expand(['array', '204'], () => false) Développez l'objet racine, le tableau de cet objet, mais pas le 204e élément lui-même.editor.expand(['array', '204'], relativePath => relativePath.length < 2) Développez l'objet racine, le tableau dans cet objet et développent l'élément de tableau 204th et tout son enfant jusqu'à une profondeur de niveaux max 2. La bibliothèque exporte quelques fonctions utilitaires pour les fonctions callback couramment utilisées:
expandAll : développez récursivement tous les objets et tableaux imbriqués.expandNone : ne développe rien, pas non plus l'objet racine ou le tableau.expandSelf : développez le tableau ou l'objet racine. Il s'agit de la valeur par défaut du paramètre callback .expandMinimal : Développez le tableau ou l'objet racine, et en cas de tableau, développez le premier élément de tableau. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Effondrer un chemin dans l'éditeur. Lorsque recursive est true , tous les objets et tableaux imbriqués seront également effondrés. La valeur par défaut de recursive est false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Déclencher par programme par programme cliquer sur le bouton Transformer dans le menu principal, ouvrant le modèle de transformation. Si un rappel onTransform est fourni, il remplacera la logique d'intégration pour appliquer une transformation, vous permettant de traiter les opérations de transformation de manière alternative. Si vous êtes fourni, le rappel onClose déclenchera à la fermeture du modal de transformation, les deux après que l'utilisateur a cliqué sur l'application ou l'annulation. Si un id est fourni, le modal de transformation chargera l'état précédent de cet id au lieu de l'état du modal de transformation des éditeurs.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Faites défiler l'éditeur verticalement de telle sorte que le chemin spécifié soit en vue. Uniquement applicable à tree et table des modes. Le chemin sera élargi en cas de besoin. La promesse retournée est résolue une fois le défilement terminé.
JSONEditor . prototype . findElement ( path : JSONPath ) Trouvez l'élément DOM d'un chemin donné. Renvoie null lorsqu'il n'est pas trouvé.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > En mode arborescence, le JSON non valide est automatiquement réparé lorsqu'il est chargé. Lorsque la réparation a réussi, le contenu réparé est rendu mais pas encore appliqué au document lui-même jusqu'à ce que l'utilisateur clique sur "OK" ou commence à modifier les données. Au lieu d'accepter la réparation, l'utilisateur peut également cliquer sur "Réparer manuellement à la place". Invoquer .acceptAutoRepair() acceptera programmatiquement la réparation. Cela déclenchera une mise à jour et la méthode elle-même renvoie également le contenu mis à jour. En cas de mode text ou lorsque l'éditeur n'est pas dans un état "Accepter la réparation automatique", rien ne se passera et le contenu sera retourné tel quel.
JSONEditor . prototype . refresh ( ) : Promise < void > Rafraîchir le rendu du contenu, par exemple après avoir modifié la taille de la police. Ceci n'est disponible qu'en mode text .
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedObtenez toutes les erreurs de l'analyse actuelles et les erreurs de validation.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Modifiez la sélection actuelle. Voir aussi selection d'options.
JSONEditor . prototype . focus ( ) : Promise < void >Donnez à l'éditeur Focus.
JSONEditor . prototype . destroy ( ) : Promise < void >Détruisez l'éditeur, supprimez-le du DOM.
La bibliothèque exporte un ensemble de fonctions utilitaires. Les définitions exactes de ces fonctions peuvent être trouvées dans le dactylographie d
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch et utiliser ses fonctions:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Les types de typeScript (comme Content , JSONSelection et JSONPatchOperation ) sont définis dans le fichier source suivant:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
L'éditeur peut être conçu en utilisant les variables CSS disponibles. Une liste complète avec toutes les variables peut être trouvée ici:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Par exemple, pour modifier la couleur du thème bleu par défaut en anthracite:
< 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 >L'éditeur est livré avec un thème sombre intégré. Pour utiliser ce thème:
themes/jse-theme-dark.cssjse-theme-dark du thème sombre à l'élément de conteneur HTML où l'éditeur est chargé. Il est possible de charger le style de plusieurs thèmes et de les basculer en modifiant le nom de classe (comme jse-theme-dark ) attaché à l'élément de conteneur HTML.
Exemple complet de svelte:
< 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 > Lors de la mise à jour des variables CSS dynamiquement, il est nécessaire de rafraîchir la via editorRef.refresh() pour mettre à jour la taille de la police des numéros de ligne dans la gouttière et mettre à jour les couleurs des marqueurs d'indentation en mode text :
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> Il est important que le content de l'éditeur ne soit mis à jour que de manière immuable. La mutation du content brisera l'historique (annedo / redoo) et ne mettra pas à jour immédiatement l'interface utilisateur en fonction des modifications.
Les raisons pour nécessiter des changements immuables sont:
Les autres avantages d'une manière de travailler immuable sont que cela rend les données avec lesquelles vous travaillez avec beaucoup plus prédictif et moins sujet aux erreurs. Vous pouvez en savoir plus sur l'immuabilité en recherchant des articles ou des vidéos sur le sujet, comme cette vidéo ou cet article. L'immuabilité n'est pas toujours le meilleur choix, mais dans le cas de cet éditeur JSON, nous avons affaire à des structures de données grandes et profondément imbriquées, dans lesquelles nous n'apportons généralement que de petits changements comme la mise à jour d'une seule valeur imbriquée. Une approche immuable brille vraiment ici, permettant à svelte-jsoneditor de rendre et de modifier en douceur les documents JSON jusqu'à 512 Mo.
Voici un exemple de changement mutable:
// 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.
}Au lieu de cela, vous pouvez appliquer le même changement d'une manière immuable. Il existe différentes options pour cela:
// 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 et josdejong/jsoneditor Cette bibliothèque josdejong/svelte-jsoneditor est le successeur de josdejong/jsoneditor . Les principales différences sont:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Création | Original (publié pour la première fois en 2011) | Successeur (publié pour la première fois en 2021) |
| Cadre | Implémenté en JavaScript simple, en utilisant des opérations DOM de bas niveau | Utilise svelte |
| Mode arbre | Une vue d'arbre ayant des boutons de menu contextuel à gauche de chaque ligne. Les clés et les valeurs sont toujours à l'état modifiable. | Une vue d'arbre utilisant un clic droit pour ouvrir le menu contextuel, et double-cliquez pour commencer à modifier une clé ou une valeur (plus similaire à une feuille de calcul ou un éditeur de texte). Il prend en charge la copie / coller depuis et vers le presse-papiers système. |
| Mode texte | Propulsé par Ace Editor | Propulsé par Code Mirror |
| Mode d'aperçu | Utilisé pour prévisualiser de grands documents | Pas nécessaire, le mode tree et text peut gérer de grands documents |
Les principales raisons de créer une nouvelle bibliothèque au lieu de prolonger celle existante sont:
josdejong/jsoneditor est simple et simple, mais également limité. Le nouveau mode d'arbre de josdejong/svelte-jsoneditor permet l'édition et l'interaction beaucoup plus rationalisées. Il fonctionne assez similaire à une feuille de calcul ou à un éditeur de texte. Naviguez et sélectionnez à l'aide des touches flèches et Shift + flèches ou en faisant glisser avec la souris. Double-cliquez (ou appuyez sur Entrée) pour commencer la modification d'une touche ou d'une valeur. Ouvrez le menu contextuel en cliquant avec le bouton droit sur l'élément ou la sélection sur laquelle vous souhaitez fonctionner. Utilisez Cut / Copy / Coller pour déplacer des parties de la JSON et interopérer avec d'autres applications.Lorsque la bibliothèque donne des erreurs de compilation dans votre configuration svelte, il pourrait être lié à Vite ayant du mal à importer des bibliothèques ESM / CommonJS de la bonne façon. L'erreur pourrait ressembler:
Syntaxerror: le module demandé '/node_modules/json-source-map/index.js?v=fda884be' ne fournit pas d'exportation nommée 'par défaut' (sur jsonutils.js? V = fda884be: 2: 8)
Une solution de contournement consiste à ajouter ce qui suit à votre fichier vite.config.js (en savoir plus):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Pour commencer: cloner le référentiel GIT, exécuter npm install , puis npm run dev .
Tous les scripts disponibles:
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 est publié sous forme d'open source sous la licence ISC permissive.
Si vous utilisez svelte-jsoneditor commercialement, il y a une attente sociale (mais pas légale) que vous contribuez à financer sa maintenance. Commencez ici.
