svelte jsoneditor
v2.3.3
Uma ferramenta baseada na Web para visualizar, editar, formatar, transformar e validar JSON.
Experimente: https://jsoneditoronline.org
A biblioteca é escrita com esbelta, mas também pode ser usada em JavaScript simples e em qualquer estrutura (SolidJS, React, Vue, Angular, etc.). Requer um navegador de março de 2022 ou mais recente.
Para uso em um projeto esbelto:
npm install svelte-jsoneditor
Para uso em JavaScript de baunilha ou estruturas como SolidJs, React, Vue, Angular, etc:
npm install vanilla-jsoneditor
Crie um jsonEditor com 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 ligação unidirecional:
< 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 > A biblioteca fornece um pacote de baunilha do editor através da biblioteca NPM vanilla-jsoneditor (em vez de svelte-jsoneditor ), que pode ser usada em qualquer ambiente e estrutura do navegador. Em uma estrutura como React, Vue ou Angular, você precisará escrever algum código de wrapper em torno da interface da classe.
Se você tiver uma configuração para o seu projeto com um empacota (como vite, rollup ou webpack), é melhor usar o padrão ESMPORT PADE:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Se você deseja usar a biblioteca direta no navegador, use o pacote ESTALONO ESTALONO:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' O pacote independente contém todas as dependências do vanilla-jsoneditor , por exemplo lodash-es e Ajv . Se você também usar algumas dessas dependências em seu projeto, isso significa que elas serão incluídas duas vezes no seu aplicativo da Web, levando a um tamanho desnecessariamente grande do aplicativo. Em geral, é preferível usar a import { createJSONEditor } from 'vanilla-jsoneditor' em vez do pacote independente para que as dependências possam ser reutilizadas.
Exemplo de navegador carregando o módulo ESPEDALONO 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 >Para facilitar o uso da biblioteca em sua estrutura de escolha, você pode usar uma biblioteca de wrapper:
Componente esbelto:
< 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 } )
}
}
} ) Propriedades como content e mode são passadas como atributos para o componente esbelto, como <JSONEditor {content} {mode} /> , ou através dos props no caso da função da fábrica JS de baunilha: createJSONEditor({ target, props: { content, mode } .
content: Content Passe o conteúdo JSON a ser renderizado no JSoneditor. Content é um objeto que contém uma propriedade json (um documento JSON analisado) ou text (um documento JSON rigoroso). Apenas uma das duas propriedades deve ser definida. Você pode passar os dois tipos de conteúdo para o editor independente de que modo é. Você pode usar a ligação bidirecional via bind:content .
Importante: apenas faça alterações imutáveis no
content. Mudanças mutáveis atrapalharão a história e renderizarão o conteúdo. Consulte a seção imutabilidade.
selection: JSONEditorSelection | undefined O conteúdo selecionado atual. Você pode usar a ligação bidirecional usando bind:selection . O modo tree suporta MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection ou AfterSelection . O modo table suporta ValueSelection e o modo text suporta TextSelection. .
mode: 'tree' | 'text' | 'table' Abra o editor no modo 'tree' (padrão), o modo 'table' ou o modo 'text' (anteriormente: modo code ).
mainMenuBar: boolean Mostre a barra de menu principal. O valor padrão é true .
navigationBar: boolean Mostre a barra de navegação com, onde você pode ver o caminho selecionado e navegar pelo seu documento a partir daí. O valor padrão é true .
statusBar: boolean Mostre uma barra de status na parte inferior do editor 'text' , mostrando informações sobre a localização do cursor e o conteúdo selecionado. O valor padrão é true .
askToFormat: boolean Quando true (padrão), o usuário será perguntado se deseja formatar o documento JSON quando um documento compacto é carregado ou colado no modo 'text' . Somente aplicável ao modo 'text' .
readOnly: boolean Abra o editor no modo somente leitura: nenhuma alteração pode ser feita, os botões não relevantes estão ocultos no menu e o menu de contexto não está ativado. O valor padrão é false .
indentation: number | string Número de espaços usam para recuo ao rastrear o JSON, ou uma string a ser usada como indentação como 't' para usar uma guia como indentação, ou ' ' para usar 4 espaços (o que é equivalente a configurar indentation: 4 ). Veja também a propriedade tabSize .
tabSize: number Quando o recuo é configurado como um caractere de guia ( indentation: 't' ), tabSize configura o tamanho de um caractere de guia. O valor padrão é 4 . Apenas aplicável ao modo text .
escapeControlCharacters: boolean Falso por padrão. Quando true , caracteres de controle como Newline e Tab são renderizados como caracteres escapados n e t . Somente aplicável ao modo de 'tree' , no modo 'text' Os caracteres são sempre escapados.
escapeUnicodeCharacters: boolean Falso por padrão. Quando true , caracteres unicode como ☎ e? são renderizados escaparam como u260e e ud83dude00 .
flattenColumns: boolean Verdadeiro por padrão. Somente aplicável ao modo de 'table' . Quando true , as propriedades do objeto aninhadas serão exibidas cada uma em sua própria coluna, com o caminho aninhado como nome da coluna. Quando false , objetos aninhados serão renderizados em linha, e clicar duas vezes-lhes em um pop-up.
validator : function ( json : unknown ) : ValidationError [ ]Validar o documento JSON. Por exemplo, use o validador de esquema JSON integrado alimentado por AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Configure um analisador JSON personalizado, como lossless-json . Por padrão, o analisador nativo JSON de JavaScript é usado. A interface JSON é um objeto com uma função parse e stringify . Por exemplo:
< 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 Somente aplicável quando um validator é fornecido. É o mesmo que parser , exceto que este analisador é usado para analisar os dados antes de enviá -los para o validador. Configure um analisador JSON personalizado usado para analisar o JSON antes de passá -lo para o validator . Por padrão, o analisador JSON embutido é usado. Ao passar por um validationParser personalizado, verifique se a saída do analisador é suportada pelo validator configurado. Portanto, quando o validationParser pode gerar números bigint ou outros tipos numéricos, o validator também deve suportar isso. No modo de árvore, quando parser não for igual ao validationParser , o documento JSON será convertido antes de ser passado ao validator via validationParser.parse(parser.stringify(json)) .
pathParser: JSONPathParser Um objeto opcional com um método Parse e Stringify para analisar e rigificar um JSONPath , que é uma matriz com nomes de propriedades. O pathParser é usado no editor de caminho na barra de navegação, que é aberta clicando no botão Editar no lado direito da barra de navegação. A função pathParser.parse é permitida um erro quando a entrada é inválida. Por padrão, é usada uma notação do caminho JSON, que parece $.data[2].nested.property . Como alternativa, é possível usar, por exemplo, uma notação de ponteiro JSON, como /data/2/nested/property ou algo personalizado. Funções auxiliares relacionadas: parseJSONPath e stringifyJSONPath , parseJSONPointer e compileJSONPointer .
onError ( err : Error )Retorno de chamada disparado quando ocorre um erro. A implementação padrão é registrar um erro no console e mostrar uma mensagem de alerta simples para o usuário.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) O retorno de chamada que é chamado em todas as alterações do conteúdo feito pelo usuário dentro do editor. Não acionará as alterações aplicadas programaticamente por meio de métodos como .set() , .update() ou .patch() .
O content retornado às vezes é do tipo { json } e às vezes do tipo { text } . Qual dos dois é retornado depende do modo do editor, da alteração aplicada e do estado do documento (válido, inválido, vazio). Esteja ciente de que { text } pode conter JSON inválido: enquanto digitam o modo text , um documento JSON será temporariamente inválido, como quando o usuário estiver digitando uma nova string. O parâmetro patchResult é retornado apenas em alterações que podem ser representadas como um documento JSON Patch e, por exemplo, não quando digitando livremente no modo text .
onChangeMode ( mode : 'tree' | 'text' | 'table' )Invocou quando o modo é alterado.
onClassName ( path : JSONPath , value : any ) : string | undefined Adicione um nome de classe personalizado a nós específicos, com base em seu caminho e/ou valor. Observe que, na classe personalizada, você pode substituir as variáveis CSS como --jse-contents-background-color para alterar o estilo de um nó, como a cor de fundo. As variáveis relevantes são:
--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 Para ajustar a cor do texto de teclas ou valores, a cor das classes .jse-key e .jse-value podem ser substituídos.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Personalize a renderização dos valores. Por padrão, é usado renderValue , o que torna um valor como uma divisível e, dependendo do valor, também pode renderizar uma alternância booleana, um seletor de cores e uma tag de timestamp. Vários componentes podem ser renderizados um ao lado do outro, como a alternância booleana e o seletor de cores sendo renderizado à esquerda da Div Editável. Para desativar, por exemplo, o seletor de cores interno ou a tag de timestamp, você pode procurar o código-fonte do renderValue , copiá-lo e remover os componentes que você não deseja da função. Componentes do renderizador de valor integrados: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Para enumes de esquema JSON, existe um renderizador de valor pronto renderJSONSchemaEnum de valor que renderiza enumes usando o componente EnumValue . Isso pode ser usado como:
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 )
} O retorno de chamada onRenderValue deve devolver uma matriz com um ou vários renderizadores. Cada renderizador pode ser um componente esbelto ou uma ação esbelta:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} A interface SvelteComponentRenderer pode ser usada para fornecer componentes esbeltos, como o componente EnumValue mencionado acima. O SvelteActionRenderer espera uma ação esbelta como propriedade action . Como essa interface é uma interface JavaScript simples, isso permite criar componentes personalizados em um ambiente JS de baunilha. Basicamente, é uma função que recebe um nó DOM e precisa devolver um objeto com funções update e 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 Retorno de chamada que pode ser usado para fazer alterações nos itens do menu. Novos itens podem ser adicionados ou itens existentes podem ser removidos ou reorganizados. Quando a função retornar undefined , os items originais serão aplicados.
Usando o mode de valores de contexto, modal e readOnly , ações diferentes podem ser tomadas dependendo do modo do editor e se o editor é renderizado dentro de um modal ou não, ou dependendo se é somente leitura.
Um item de menu MenuItem pode ser um dos seguintes tipos:
Botão:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Separador (linha vertical cinza entre um grupo de itens):
interface MenuSeparator {
type : 'separator'
}Espaço (preenche o espaço vazio):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Retorno de chamada que pode ser usado para fazer alterações nos itens do menu de contexto. Novos itens podem ser adicionados ou itens existentes podem ser removidos ou reorganizados. Quando a função retornar undefined , os items originais serão aplicados e o menu de contexto será exibido quando readOnly for false . Quando a função retorna false , o menu de contexto nunca será exibido. O retorno de chamada também é acionado quando o editor é readOnly e, na maioria dos casos, você deseja retornar false então.
Usando o mode de valores de contexto, modal , readOnly e selection , ações diferentes podem ser tomadas dependendo do modo do editor, seja o editor renderizado dentro de um modal ou não, seja o editor ou não e dependendo do caminho da seleção.
Um item de menu ContextMenuItem pode ser um dos seguintes tipos:
Botão:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Botão suspenso:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Separador (linha cinza entre um grupo de itens):
interface MenuSeparator {
type : 'separator'
}Linha de menu e coluna:
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 Retorno de chamada chamado quando a seleção é alterada. Quando a seleção é removida, o retorno de chamada é invocado com undefined como argumento. No modo text , uma TextSelection será disparada. No modo de tree e table , será disparada uma JSONSelection (que pode ser MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection ou AfterSelection ). Use o TypeGuards como isTextSelection e isValueSelection para verificar que tipo a seleção possui.
queryLanguages: QueryLanguage [ ]Configure um ou vários idiomas de consulta que podem ser usados no modal de transformação. A biblioteca vem com os seguintes idiomas incluídos:
Os idiomas podem ser carregados da seguinte forma:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] Por padrão, apenas jsonQueryLanguage é carregado no editor.
Observe que lodashQueryLanguage e javascriptQueryLanguage podem executar o código JavaScript arbitrário e usar new Function(...) para executar o código. Portanto, eles não são adequados em geral para armazenar ou compartilhar consultas devido aos riscos de segurança. Em alguns ambientes, tentar usá -los resultará em erros de CSP (Política de Segurança de Conteúdo), dependendo da política de segurança.
queryLanguageId: string O id da linguagem de consulta atualmente selecionada.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidFunção de retorno de chamada invocou quando o usuário altera a linguagem de consulta selecionada no transformmodal através do botão de configuração direito.
onFocus() de retorno de chamada de disparou quando o editor recebeu o foco.onBlur() retornou quando o editor perdeu o foco.Os métodos podem ser chamados em uma instância do JSONEDITOR. Em esbelta, você pode criar uma referência e chamar um método como:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />No editor de baunilha, uma função de fábrica é usada para criar uma instância do editor:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Observe que a maioria dos métodos é assíncrona e resolverá depois que o editor for renderizado (no próximo tick ).
JSONEditor . prototype . get ( ) : ContentObtenha o documento JSON atual.
IMPORTANTE: Não se move o
contentrecebido, que atrapalhará a história e renderizou o conteúdo. Consulte a seção imutabilidade.
JSONEditor . prototype . set ( content : Content ) : Promise < void > Substitua o conteúdo atual. Redefinirá o estado do editor. Consulte também update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Atualize o conteúdo carregado, mantendo o estado do editor (como objetos expandidos). Você também pode ligar para editor.updateProps({ content }) . Veja também set(content) .
Importante: aplique apenas alterações imutáveis ao
content. Mudanças mutáveis atrapalharão a história e renderizarão o conteúdo. Consulte a seção imutabilidade.
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Aplique um documento JSON Patch para atualizar o conteúdo do documento JSON. Um documento de patch json é uma lista com operações de patch json.
Importante: aplique apenas alterações imutáveis ao conteúdo. Mudanças mutáveis atrapalharão a história e renderizarão o conteúdo. Consulte a seção imutabilidade.
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate algumas ou todas as propriedades. content atualizado também pode ser passado; Isso é equivalente a chamar update(content) . Exemplo:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Expanda ou colapso caminhos no editor. Todos os nós ao longo do path fornecido serão expandidos e se tornarão visíveis (renderizados). Assim, por exemplo, seções em colapso de uma matriz serão expandidas. Usando o callback opcional, o nó em si e alguns ou todos os seus nós filhos aninhados também podem ser expandidos. A função callback apenas itera as seções visíveis de uma matriz e não sobre nenhuma das seções em colapso. Por padrão, os 100 primeiros itens de uma matriz são visíveis e renderizados.
Exemplos:
editor.expand([], () => true) expandir tudoeditor.expand([], relativePath => relativePath.length < 2) Expanda todos os caminhos até 2 níveis de profundidadeeditor.expand(['array', '204']) Expanda o objeto raiz, a matriz nesse objeto e o 204º item na matriz.editor.expand(['array', '204'], () => false) expanda o objeto raiz, a matriz nesse objeto, mas não o 204º item.editor.expand(['array', '204'], relativePath => relativePath.length < 2) Expanda o objeto raiz, a matriz nesse objeto e expanda o 204º item da matriz e todo o seu filho até uma profundidade de níveis máximos. A biblioteca exporta algumas funções de utilidade para funções callback comumente usadas:
expandAll : expandir recursivamente todos os objetos e matrizes aninhados.expandNone : Expanda nada, também não é o objeto ou matriz raiz.expandSelf : expanda a matriz ou objeto raiz. Este é o padrão para o parâmetro callback .expandMinimal : expanda a matriz ou objeto raiz e, no caso de uma matriz, expanda o primeiro item de matriz. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Colapse um caminho no editor. Quando recursive é true , todos os objetos e matrizes aninhados também serão colapsados. O valor padrão do recursive é false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Acionador programaticamente clicando no botão Transform no menu principal, abrindo o modelo de transformação. Se um onTransform de retorno de chamada for fornecido, ele substituirá a lógica de construção para aplicar uma transformação, permitindo que você processe as operações de transformação de uma maneira alternativa. Se fornecido, o retorno de chamada onClose acionará quando a transformação modal fechar, depois que o usuário clicou em aplicar ou cancelar. Se um id for fornecido, o modal de transformação carregará o status anterior desse id em vez do status dos editores transformará modal.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Role o editor verticalmente, de modo que o caminho especificado seja exibido. Somente aplicável aos modos tree e table . O caminho será expandido quando necessário. A promessa devolvida é resolvida após o término da rolagem.
JSONEditor . prototype . findElement ( path : JSONPath ) Encontre o elemento DOM de um determinado caminho. Retorna null quando não encontrado.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > No modo árvore, o JSON inválido é reparado automaticamente quando carregado. Quando o reparo foi bem -sucedido, o conteúdo reparado é renderizado, mas ainda não aplicado ao próprio documento até que o usuário clique "OK" ou comece a editar os dados. Em vez de aceitar o reparo, o usuário também pode clicar em "Reparar manualmente". Invocar .acceptAutoRepair() aceitará programaticamente o reparo. Isso acionará uma atualização e o próprio método também retornará o conteúdo atualizado. Em caso de modo text ou quando o editor não estiver em um status de "Reparo automático", nada acontecerá e o conteúdo será retornado como está.
JSONEditor . prototype . refresh ( ) : Promise < void > Atualizar a renderização do conteúdo, por exemplo, depois de alterar o tamanho da fonte. Isso está disponível apenas no modo text .
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedObtenha todos os erros de análise e validação atuais.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Altere a seleção atual. Veja também selection de opções.
JSONEditor . prototype . focus ( ) : Promise < void >Dê o foco do editor.
JSONEditor . prototype . destroy ( ) : Promise < void >Destrua o editor, remova -o do DOM.
A biblioteca exporta um conjunto de funções de utilidade. As definições exatas dessas funções podem ser encontradas no datilografado D
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch e usar suas funções:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Os tipos TypeScript (como Content , JSONSelection e JSONPatchOperation ) são definidos no seguinte arquivo de origem:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
O editor pode ser estilizado usando as variáveis CSS disponíveis. Uma lista completa com todas as variáveis pode ser encontrada aqui:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Por exemplo, para alterar a cor do tema azul padrão para antracite:
< 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 >O editor vem com um tema escuro embutido. Para usar este tema:
themes/jse-theme-dark.cssjse-theme-dark do tema sombrio ao elemento de contêiner HTML em que o editor é carregado. É possível carregar o estilo de vários temas e alterná-los alterando o nome da classe (como jse-theme-dark ) conectado ao elemento de contêiner HTML.
Exemplo completo e esbelto:
< 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 > Ao atualizar as variáveis CSS dinamicamente, é necessário atualizar o Via editorRef.refresh() para atualizar o tamanho da fonte dos números de linha na calha e atualizar as cores dos marcadores de indentação no modo text :
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> É importante que o content do editor seja atualizado apenas de maneira imutável. A mutação do content quebrará o histórico (desfazer/refazer) e nem sempre atualizará imediatamente a interface do usuário de acordo com as alterações.
As razões para exigir mudanças imutáveis são:
Outras vantagens de uma maneira imutável de trabalhar são que ele torna os dados que você trabalha com muito mais preditivos e menos propensos a erros. Você pode aprender mais sobre a imutabilidade pesquisando artigos ou vídeos sobre o assunto, como este vídeo ou este artigo. A imutabilidade nem sempre é a melhor escolha, mas no caso deste editor JSON estamos lidando com estruturas de dados grandes e profundamente aninhadas, nas quais normalmente fazemos apenas pequenas alterações, como atualizar um único valor aninhado. Uma abordagem imutável realmente brilha aqui, permitindo que svelte-jsoneditor renderize e edite documentos JSON de até 512 MB.
Aqui está um exemplo de uma mudança mutável:
// 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.
}Em vez disso, você pode aplicar a mesma alteração de maneira imutável. Existem várias opções para isso:
// 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 e josdejong/jsoneditor Esta biblioteca josdejong/svelte-jsoneditor é o sucessor de josdejong/jsoneditor . As principais diferenças são:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Criação | Original (publicado pela primeira vez em 2011) | Sucessor (publicado pela primeira vez em 2021) |
| Estrutura | Implementado em javascript simples, usando operações de baixo nível DOM | Usa esbelto |
| Modo de árvore | Uma visualização de árvore com botões de menu de contexto à esquerda de todas as linhas. As chaves e valores estão sempre em estado editável. | Uma visualização de árvore utilizando o botão direito do mouse para abrir o menu de contexto e clique duas vezes para começar a editar uma chave ou valor (mais semelhante a uma planilha ou editor de texto). Ele suporta copiar/colar de e para a área de transferência do sistema. |
| Modo de texto | Alimentado pelo editor da ACE | Alimentado por espelho de código |
| Modo de visualização | Usado para visualizar grandes documentos | Não é necessário, o modo de tree e text pode lidar com documentos grandes |
Os principais motivos para criar uma nova biblioteca em vez de estender a existente são:
josdejong/jsoneditor é simples e direto, mas também limitado. O novo modo de árvore de josdejong/svelte-jsoneditor permite edição e interação muito mais simplificadas. Funciona bastante semelhante a uma planilha ou editor de texto. Navegue e selecione usando as teclas de seta e shift+seta ou arrastando com o mouse. Clique duas vezes (ou pressione Enter) para começar a editar uma tecla ou valor. Abra o menu de contexto clicando com o botão direito do mouse no item ou seleção em que você deseja operar. Use Cut/Copy/Colar para mover partes do JSON e interoperar com outras aplicações.Quando a biblioteca fornece erros de compilação em sua configuração esbelta, ela pode estar relacionada ao Vite ter problemas para importar bibliotecas ESM/Commonjs da maneira certa. O erro poderia parecer:
SyntaxError: o módulo solicitado '/node_modules/json-source-map/index.js?v=fda884be' não fornece uma exportação nomeada 'padrão' (em jsonutils.js? V = fda884be: 2: 8)
Uma solução alternativa é adicionar o seguinte ao seu arquivo vite.config.js (leia mais):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Para começar: clone o repositório Git, execute npm install e, em seguida, npm run dev .
Todos os scripts disponíveis:
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 é liberado como código aberto sob a licença permissiva da ISC.
Se você estiver usando comercialmente svelte-jsoneditor , existe uma expectativa social (mas nenhuma legal) de que você ajude a financiar sua manutenção. Comece aqui.
