svelte jsoneditor
v2.3.3
Una herramienta basada en la web para ver, editar, formatear, transformar y validar JSON.
Pruébalo: https://jsoneditoronline.org
La biblioteca está escrita con esbelte, pero también se puede usar en JavaScript simple y en cualquier marco (SolidJS, React, Vue, Angular, etc.). Requiere un navegador de marzo de 2022 o más nuevo.
Para el uso en un proyecto esbelto:
npm install svelte-jsoneditor
Para el uso en Vanilla JavaScript o marcos como Solidjs, React, Vue, Angular, etc:
npm install vanilla-jsoneditor
Cree un JSONEDITOR con 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 >O vinculación unidireccional:
< 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 biblioteca proporciona un paquete de vainilla del editor a través de la biblioteca NPM vanilla-jsoneditor (en lugar de svelte-jsoneditor ) que puede usarse en cualquier entorno y marco del navegador. En un marco como React, Vue o Angular, deberá escribir algún código de envoltura alrededor de la interfaz de clase.
Si tiene una configuración para su proyecto con un Bundler (como Vite, Rollup o Webpack), es mejor usar la importación ES predeterminada:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Si desea usar la biblioteca directamente en el navegador, use el paquete ES independiente proporcionado:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' El paquete independiente contiene todas las dependencias de vanilla-jsoneditor , por ejemplo lodash-es y Ajv . Si también usa algunas de estas dependencias en su proyecto, significa que se incluirán dos veces en su aplicación web, lo que llevará a un tamaño de aplicación innecesariamente grande. En general, es preferible usar la import { createJSONEditor } from 'vanilla-jsoneditor' en lugar del paquete independiente para que se puedan reutilizar dependencias.
Ejemplo del navegador Carga del módulo ES independiente:
<!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 que sea más fácil usar la biblioteca en su marco de elección, puede usar una biblioteca de envoltorio:
Componente Svelte:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >Clase 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 } )
}
}
} ) Propiedades como content y mode se pasan como atributos al componente SVELTE, como <JSONEditor {content} {mode} /> , o a través de los props en caso de la función de fábrica de vainilla js: createJSONEditor({ target, props: { content, mode } .
content: Content Pase el contenido de JSON para ser presentado en el Jsoneditor. Content es un objeto que contiene una propiedad json (un documento JSON analizado) o text (un documento JSON Stringified). Solo se debe definir una de las dos propiedades. Puede pasar ambos tipos de contenido al editor independientemente de qué modo es. Puede usar la vinculación bidireccional a través de bind:content .
Importante: solo haga cambios inmutables al
content. Los cambios mutables estropearán la historia y el contenido renderizado. Ver Sección Inmutabilidad.
selection: JSONEditorSelection | undefined El contenido actual seleccionado. Puede usar la unión bidireccional usando bind:selection . El modo tree admite MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection o AfterSelection . El modo table admite ValueSelection , y el modo text admite TextSelection. .
mode: 'tree' | 'text' | 'table' Abra el editor en modo 'tree' (predeterminado), modo 'table' o modo 'text' (anteriormente: modo code ).
mainMenuBar: boolean Muestre la barra de menú principal. El valor predeterminado es true .
navigationBar: boolean Muestre la barra de navegación con, donde puede ver la ruta seleccionada y navegar a través de su documento desde allí. El valor predeterminado es true .
statusBar: boolean Muestre una barra de estado en la parte inferior del editor de 'text' , que muestra información sobre la ubicación del cursor y el contenido seleccionado. El valor predeterminado es true .
askToFormat: boolean Cuando true (predeterminado), se le preguntará al usuario si quiere formatear el documento JSON cuando un documento compacto se carga o pegado en el modo 'text' . Solo aplicable al modo 'text' .
readOnly: boolean Abra el editor en modo de solo lectura: no se pueden hacer cambios, los botones no relevantes están ocultos en el menú y el menú contextual no está habilitado. El valor predeterminado es false .
indentation: number | string Número de espacios se usa para la sangría al triturar JSON, o una cadena para ser utilizada como sangría como 't' para usar una pestaña como sangría, o ' ' para usar 4 espacios (que es equivalente a configurar indentation: 4 ). Consulte también Propiedad tabSize .
tabSize: number Cuando la sangría se configura como un carácter de pestaña ( indentation: 't' ), tabSize configura cuán grande se representa un carácter de pestaña. El valor predeterminado es 4 . Solo aplicable al modo text .
escapeControlCharacters: boolean Falso por defecto. Cuando true , los personajes de control como Newline y Tab se representan como personajes escapados n y t . Solo se aplican solo para el modo 'tree' , en los caracteres de control del modo 'text' siempre se escapan.
escapeUnicodeCharacters: boolean Falso por defecto. Cuando true , los personajes unicode como ☎ y? se representan escapados como u260e y ud83dude00 .
flattenColumns: boolean Verdadero por defecto. Solo aplicable al modo 'table' . Cuando sea true , las propiedades de los objetos anidados se mostrarán cada una en su propia columna, con la ruta anidada como nombre de columna. Cuando false , los objetos anidados se pondrán en línea, y hacer doble clic en ellos los abrirá en una ventana emergente.
validator : function ( json : unknown ) : ValidationError [ ]Validar el documento JSON. Por ejemplo, use el validador de esquema JSON incorporado impulsado por AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Configure un analizador JSON personalizado, como lossless-json . Por defecto, se utiliza el analizador JSON de JavaScript nativo. La interfaz JSON es un objeto con una función parse y stringify . Por ejemplo:
< 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 Solo aplicable cuando se proporciona un validator . Esto es lo mismo que parser , excepto que este analizador se usa para analizar los datos antes de enviarlos al validador. Configure un analizador JSON personalizado que se utilice para analizar JSON antes de pasarlo al validator . Por defecto, se utiliza el analizador JSON incorporado. Cuando pase un validationParser personalizado, asegúrese de que el validator configurado sea compatible con la salida del analizador. Por lo tanto, cuando validationParser puede generar números bigint u otros tipos numéricos, el validator también debe admitir eso. En el modo de árbol, cuando parser no es igual a validationParser , el documento JSON se convertirá antes de pasar al validator a través de validationParser.parse(parser.stringify(json)) .
pathParser: JSONPathParser Un objeto opcional con un método de análisis y Stringify para analizar y Stringify a JSONPath , que es una matriz con nombres de propiedades. El pathParser se usa en el editor de rutas en la barra de navegación, que se abre haciendo clic en el botón Editar en el lado derecho de la barra de navegación. La función pathParser.parse puede lanzar un error cuando la entrada no es válida. Por defecto, se usa una notación de ruta JSON, que parece $.data[2].nested.property . Alternativamente, es posible usar, por ejemplo, una notación de puntero JSON como /data/2/nested/property o algo hecho a medida. Funciones de ayuda de ayuda: parseJSONPath y stringifyJSONPath , parseJSONPointer y compileJSONPointer .
onError ( err : Error )La devolución de llamada se disparó cuando ocurre un error. La implementación predeterminada es registrar un error en la consola y mostrar un mensaje de alerta simple al usuario.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) La devolución de llamada que se invoca en cada cambio de los contenidos realizados por el usuario desde el editor. No activará los cambios que se aplican programáticamente a través de métodos como .set() , .update() o .patch() .
El content devuelto a veces es de tipo { json } , y a veces de tipo { text } . El cual de los dos se devuelve depende del modo del editor, el cambio que se aplica y el estado del documento (válido, inválido, vacío). Tenga en cuenta que { text } puede contener JSON inválido: mientras se escribe en modo text , un documento JSON no será válido temporalmente, como cuando el usuario está escribiendo una nueva cadena. El parámetro patchResult solo se devuelve en los cambios que pueden representarse como un documento de parche JSON y, por ejemplo, no cuando se escribe libremente en el modo text .
onChangeMode ( mode : 'tree' | 'text' | 'table' )Invocado cuando se cambia el modo.
onClassName ( path : JSONPath , value : any ) : string | undefined Agregue un nombre de clase personalizado a nodos específicos, según su ruta y/o valor. Tenga en cuenta que en la clase personalizada, puede anular las variables CSS como --jse-contents-background-color para cambiar el estilo de un nodo, como el color de fondo. Las variables relevantes son:
--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 el color de texto de las teclas o valores, el color de las clases .jse-key y .jse-value se puede sobrescribir.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Personalizar la representación de los valores. Por defecto, se usa renderValue , que hace que un valor como DIV editable y, dependiendo del valor, también pueda hacer una palanca booleana, un selector de color y una etiqueta de marca de tiempo. Se pueden representar múltiples componentes entre sí, como la palanca booleana y el selector de color que se renderiza de la división editable. Para deshabilitar, por ejemplo, el selector de color incorporado o la etiqueta de marca de tiempo, puede buscar el código fuente de renderValue , copiarlo y luego eliminar los componentes que no desea de la función. Componentes de renderizador de valor integrados: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Para JSON Schema Enums, hay un renderizador de valor hecho listo renderJSONSchemaEnum que hace que las enumines usen el componente EnumValue . Esto se puede usar 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 )
} La devolución de llamada onRenderValue debe devolver una matriz con uno o múltiples renderistas. Cada renderizador puede ser un componente esbelto o una acción esbelta:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} La interfaz SvelteComponentRenderer se puede utilizar para proporcionar componentes de SVELTE como el componente EnumValue mencionado anteriormente. El SvelteActionRenderer espera una acción esbelta como propiedad action . Dado que esta interfaz es una interfaz JavaScript simple, esto permite crear componentes personalizados en un entorno JS de vainilla. Básicamente, es una función que obtiene un nodo DOM, y necesita devolver un objeto con funciones update y 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 Devolución de llamada que se puede usar para hacer cambios en los elementos del menú. Se pueden agregar nuevos elementos, o se pueden eliminar o reorganizar los artículos existentes. Cuando la función regresa undefined , se aplicarán los items originales.
Usando el mode de valores de contexto, modal y readOnly , se pueden tomar diferentes acciones dependiendo del modo del editor y si el editor se representa dentro de un modal o no, o dependiendo de si es de solo lectura.
Un elemento de menú MenuItem puede ser uno de los siguientes tipos:
Botón:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Separador (línea vertical gris entre un grupo de elementos):
interface MenuSeparator {
type : 'separator'
}Espacio (llena espacio vacío):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Devolución de llamada que se puede usar para realizar cambios en los elementos del menú contextual. Se pueden agregar nuevos elementos, o se pueden eliminar o reorganizar los artículos existentes. Cuando la función regrese undefined , se aplicarán los items originales y el menú contextual se mostrará cuando readOnly sea false . Cuando la función devuelve false , el menú contextual nunca se mostrará. La devolución de llamada también se activa cuando el editor es readOnly , y en la mayoría de los casos desea devolver false entonces.
Usando el mode de valores de contexto, modal , readOnly y selection , se pueden tomar diferentes acciones dependiendo del modo del editor, si el editor se representa dentro de un modal o no, si el editor es de solo lectura o no, y dependiendo de la ruta de selección.
Un elemento de menú ContextMenuItem puede ser uno de los siguientes tipos:
Botón:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Botón desplegable:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Separador (línea gris entre un grupo de elementos):
interface MenuSeparator {
type : 'separator'
}Fila de menú y columna:
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 La devolución de llamada invocada cuando se cambia la selección. Cuando se elimina la selección, la devolución de llamada se invoca con undefined como argumento. En el modo text , se disparará a TextSelection . En el modo tree y table , se disparará una JSONSelection (que puede ser MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection o AfterSelection ). Use tipoguardas como isTextSelection y isValueSelection para verificar qué tipo tiene la selección.
queryLanguages: QueryLanguage [ ]Configure uno o un lenguaje de consulta múltiple que se pueda usar en el modal de transformación. La biblioteca viene con los siguientes idiomas incluidos:
Los idiomas se pueden cargar de la siguiente manera:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] Por defecto, solo jsonQueryLanguage se carga en el editor.
Tenga en cuenta que tanto lodashQueryLanguage como javascriptQueryLanguage pueden ejecutar el código de JavaScript arbitrario y usar new Function(...) para ejecutar el código. Por lo tanto, no son adecuados en general para almacenar o compartir consultas debido a los riesgos de seguridad. En algunos entornos, tratar de usarlos dará como resultado errores de CSP (política de seguridad de contenido) dependiendo de la política de seguridad.
queryLanguageId: string La id del lenguaje de consulta seleccionado actualmente.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidFunción de devolución de llamada invocada cuando el usuario cambia el idioma de consulta seleccionado en el transformado a través del botón de configuración a la derecha.
onFocus() Callback disparó cuando el editor se enfocó.onBlur() devolución de llamada disparada cuando el editor perdió el enfoque.Los métodos se pueden llamar a una instancia de JSONEditor. En SVELTE, puede crear una referencia y llamar a un método como:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />En el editor de vainilla, se utiliza una función de fábrica para crear una instancia de editor:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Tenga en cuenta que la mayoría de los métodos son asíncronos y se resolverán después de que el editor se vuelva a renderizar (en la siguiente tick ).
JSONEditor . prototype . get ( ) : ContentObtenga el documento JSON actual.
IMPORTANTE: No mutar el
contentrecibido, que arruinará la historia y el contenido de hará. Ver Sección Inmutabilidad.
JSONEditor . prototype . set ( content : Content ) : Promise < void > Reemplace el contenido actual. Restablecerá el estado del editor. Consulte también update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Actualice el contenido cargado, manteniendo el estado del editor (como objetos expandidos). También puede llamar editor.updateProps({ content }) . Consulte también set(content) .
IMPORTANTE: Solo aplique cambios inmutables al
content. Los cambios mutables estropearán la historia y el contenido renderizado. Ver Sección Inmutabilidad.
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Aplique un documento JSON Patch para actualizar el contenido del documento JSON. Un documento JSON Patch es una lista con operaciones de parche JSON.
IMPORTANTE: Solo aplique cambios inmutables a los contenidos. Los cambios mutables estropearán la historia y el contenido renderizado. Ver Sección Inmutabilidad.
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate algunas o todas las propiedades. content actualizado también se puede aprobar; Esto es equivalente a llamar update(content) . Ejemplo:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Expandir o colapsar caminos en el editor. Todos los nodos a lo largo de la path proporcionada se ampliarán y se volverán visibles (representados). Entonces, por ejemplo, se ampliarán secciones colapsadas de una matriz. Usando la callback opcional, el nodo en sí y algunos o todos sus nodos infantiles anidados también se pueden ampliar. La función callback solo itera sobre las secciones visibles de una matriz y no sobre ninguna de las secciones colapsadas. Por defecto, los primeros 100 elementos de una matriz son visibles y representados.
Ejemplos:
editor.expand([], () => true) expandir todoeditor.expand([], relativePath => relativePath.length < 2) expandir todas las rutas hasta 2 niveles de profundidadeditor.expand(['array', '204']) expandir el objeto root, la matriz en este objeto y el elemento 204 en la matriz.editor.expand(['array', '204'], () => false) Expanda la raíz, la matriz en este objeto, pero no el elemento 204 en sí.editor.expand(['array', '204'], relativePath => relativePath.length < 2) expandir el objeto raíz, la matriz en este objeto, y expandir el elemento de matriz 204 y todos sus hijos hasta una profundidad de los niveles máximo de 2x 2. La biblioteca exporta un par de funciones de servicios públicos para funciones callback de uso común:
expandAll : expandir recursivamente todos los objetos y matrices anidados.expandNone : no expandir nada, tampoco el objeto o la matriz raíz.expandSelf : expandir la matriz u objeto raíz. Este es el valor predeterminado para el parámetro callback .expandMinimal : expanda la matriz u objeto raíz, y en el caso de una matriz, expanda el primer elemento de la matriz. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Colapsar una ruta en el editor. Cuando recursive es true , todos los objetos y matrices anidados también se colapsarán. El valor predeterminado de recursive es false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Activar programáticamente el clic del botón Transformar en el menú principal, abriendo el modelo de transformación. Si se proporciona una devolución de llamada onTransform , reemplazará la lógica incorporada para aplicar una transformación, lo que le permite procesar las operaciones de transformación de manera alternativa. Si se proporciona, la devolución de llamada onClose se activará cuando se cierre la transformación modal, tanto después de que el usuario hizo clic en aplicar o cancelar. Si se proporciona una id , el modal de transformación cargará el estado anterior de esta id en lugar del estado de los editores de transformación modal.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Desplácese el editor verticalmente de tal manera que aparezca la ruta especificada. Solo aplicable a los modos tree y table . El camino se ampliará cuando sea necesario. La promesa devuelta se resuelve después de finalizar el desplazamiento.
JSONEditor . prototype . findElement ( path : JSONPath ) Encuentre el elemento DOM de una ruta dada. Devuelve null cuando no se encuentra.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > En el modo de árbol, JSON inválido se repara automáticamente cuando se carga. Cuando la reparación fue exitosa, los contenidos reparados se representan pero aún no se aplican al documento en sí hasta que el usuario haga clic en "Aceptar" o comienza a editar los datos. En lugar de aceptar la reparación, el usuario también puede hacer clic en "reparar manualmente". Invocar .acceptAutoRepair() aceptará programáticamente la reparación. Esto activará una actualización, y el método en sí también devuelve el contenido actualizado. En el caso del modo text o cuando el editor no está en un estado de "aceptar la reparación automática", no sucederá nada y el contenido se devolverá tal como está.
JSONEditor . prototype . refresh ( ) : Promise < void > Actualice la representación del contenido, por ejemplo, después de cambiar el tamaño de fuente. Esto solo está disponible en modo text .
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedObtenga todos los errores de análisis y errores de validación actuales.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Cambiar la selección actual. Ver también selection de opciones.
JSONEditor . prototype . focus ( ) : Promise < void >Dale al editor Focus.
JSONEditor . prototype . destroy ( ) : Promise < void >Destruye el editor, elimínelo del DOM.
La biblioteca exporta un conjunto de funciones de utilidad. Las definiciones exactas de esas funciones se pueden encontrar en el mecanografiado D
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch y usar sus funciones:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Los tipos de TypeScript (como Content , JSONSelection y JSONPatchOperation ) se definen en el siguiente archivo de origen:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
El editor se puede diseñar utilizando las variables CSS disponibles. Una lista completa con todas las variables se puede encontrar aquí:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Por ejemplo, para cambiar el color de tema azul predeterminado a antracita:
< 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 >El editor viene con un tema oscuro incorporado. Para usar este tema:
themes/jse-theme-dark.cssjse-theme-dark del tema oscuro al elemento contenedor HTML donde se carga el editor. Es posible cargar el estilo de múltiples temas y alternarlos cambiando el nombre de clase (como jse-theme-dark ) conectado al elemento del contenedor HTML.
Ejemplo completo de 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 > Al actualizar las variables CSS dinámicamente, es necesario actualizar el vía editorRef.refresh() para actualizar el tamaño de fuente de los números de línea en la canaleta y actualizar los colores de los marcadores de sangría en el modo text :
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> Es importante que el content del editor solo se actualice de manera inmutable. La mutación del content romperá el historial (deshacer/rehacer), y no siempre actualizará inmediatamente la interfaz de usuario de acuerdo con los cambios.
Las razones para requerir cambios inmutables son:
Otras ventajas de una forma inmutable de trabajar son que hace que los datos trabajen con mucho más predictivos y menos propensos a errores. Puede obtener más información sobre la inmutabilidad buscando artículos o videos sobre el tema, como este video o este artículo. La inmutabilidad no siempre es la mejor opción, pero en el caso de este editor JSON estamos tratando con estructuras de datos grandes y profundamente anidadas, en las que generalmente hacemos solo pequeños cambios como actualizar un solo valor anidado. Un enfoque inmutable realmente brilla aquí, lo que permite svelte-jsoneditor renderizar sin problemas y editar documentos JSON de hasta 512 MB.
Aquí hay un ejemplo de un cambio 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.
}En cambio, puede aplicar el mismo cambio de manera inmutable. Hay varias opciones para eso:
// 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 y josdejong/jsoneditor Esta biblioteca josdejong/svelte-jsoneditor es el sucesor de josdejong/jsoneditor . Las principales diferencias son:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Creación | Original (publicado por primera vez en 2011) | Sucesor (publicado por primera vez en 2021) |
| Estructura | Implementado en JavaScript simple, utilizando operaciones DOM de bajo nivel | Usa esbelte |
| Modo de árbol | Una vista de árbol que tiene botones de menú contextual a la izquierda de cada línea. Las claves y los valores siempre están en estado editable. | Una vista de árbol que utiliza el clic derecho para abrir el menú contextual y haga doble clic para comenzar a editar una clave o valor (más similar a una hoja de cálculo o editor de texto). Admite copiar/pegar desde y hacia el portapapeles del sistema. |
| Modo de texto | Impulsado por el editor de ACE | Impulsado por Code Mirror |
| Modo de vista previa | Se utiliza para obtener una vista previa de documentos grandes | No es necesario, tanto el modo tree como text pueden manejar documentos grandes |
Las razones principales para crear una nueva biblioteca en lugar de extender la existente son:
josdejong/jsoneditor es simple y directo, pero también limitado. El nuevo modo de árbol de josdejong/svelte-jsoneditor permite una edición e interacción mucho más aerodinámica. Funciona bastante similar a una hoja de cálculo o editor de texto. Navegue y seleccione usando las teclas de flecha y cambiar+flechas o arrastrando con el mouse. Haga doble clic (o presione Entrar) para comenzar a editar una tecla o valor. Abra el menú contextual haciendo clic derecho en el elemento o la selección en la que desea operar. Use cortar/copiar/pegar para mover partes del JSON e interoperar con otras aplicaciones.Cuando la biblioteca ofrece errores de compilación en su configuración de Svelte, podría estar relacionado con que VITE tenga problemas para importar las bibliotecas ESM/CommonJS de la manera correcta. El error podría parecer:
SyntaxError: el módulo solicitado '/node_modules/json-source-map/index.js?v=fda884be' no proporciona una exportación llamada 'predeterminada' (en jsonutils.js? V = fda884be: 2: 8)
Una solución es agregar lo siguiente a su archivo vite.config.js (leer más):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Para comenzar: Clone el repositorio de git, ejecute npm install y luego npm run dev .
Todos los 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 se lanza como código abierto bajo el permiso de la licencia ISC.
Si está utilizando svelte-jsoneditor comercialmente, hay una expectativa social (pero no legal) de que ayude a financiar su mantenimiento. Empiece aquí.
