react json editor ajrm
Locale Support & Other
Advertencia:
Como quizás ya sepa, el proyecto original de react-json-editor-ajrm no se mantiene activamente y eventualmente quedará obsoleto. Así que he decidido fijar una fecha oficial para su desuso. La fecha tentativa para esto es el 15 de junio de 2023.
Me gustaría agradecer a quienes lo utilizaron en sus proyectos y a quienes han contribuido de alguna manera al proyecto. Simplemente ya no deseo mantener este proyecto. Fue creado en los primeros días de mi carrera de ingeniero de software y no ha alcanzado los estándares actuales ni los míos.
Pero no te preocupes. Tengo la intención de darle nueva vida a este proyecto reescribiéndolo desde cero.
Me gustaría aprovechar los aprendizajes del pasado y evitar algunos de los problemas que tiene actualmente react-json-editor-ajrm. También me gustaría destacar las cosas bien hechas y deseo seguir adelante.
He configurado mi hogar para este nuevo proyecto aquí enio. También he creado una discusión aquí si tiene alguna pregunta o comentario.
¡Un componente de reacción elegante, modular y similar a un editor para ver, editar y depurar la sintaxis de objetos de JavaScript!
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Sugerencia : hay dos rutas raíz diferentes: react-json-editor-ajrm y react-json-editor-ajrm/es . El primero contiene código ES5 polirelleno, el segundo ES6 sin polirelleno. La versión react-json-editor-ajrm/es no es compatible con create-react-app . Si no está seguro de cuál necesita o desea, elija el primero: tiene la mejor compatibilidad con herramientas y navegadores.
La carpeta ./examples contiene dos ejemplos:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 en el navegador web placeholder para mostrarlo después del montaje del componente.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese y Tamil . | Nombre | Descripción | Tipo | Requerido |
|---|---|---|---|
| lugar | La configuración regional de su editor. Importe configuraciones regionales como esta: import locale from 'react-json-editor-ajrm/locale/en' . Más información | objeto | Obligatorio |
| identificación | Una id opcional para asignar al nodo DOM de entrada de texto real. Además de la entrada de texto, los siguientes nodos también recibirán una identificación: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | cadena | Opcional |
| marcador de posición | Envíe un objeto javascript válido para que se muestre una vez montado el componente. Asigne un valor diferente para volver a representar el contenido inicial del componente. | objeto | Opcional |
| reiniciar | Envíe true para que el componente siempre se vuelva a representar o se "restablezca" al valor proporcionado en la propiedad placeholder . | booleano | Opcional |
| ver solo | Envíe true si desea que el contenido que se muestra no sea editable. | booleano | Opcional |
| en cambio | Siempre que tenga lugar el evento onKeyPress , devolverá valores de contenido. | objeto | Opcional |
| en desenfoque | Siempre que tenga lugar el evento onBlur , devolverá valores de contenido. | objeto | Opcional |
| confirmarBueno | Envíe false si desea que se oculte la marca de verificación para confirmar que la sintaxis correcta está oculta. | booleano | Opcional |
| altura | Una propiedad abreviada para establecer una altura específica para todo el componente. | cadena | Opcional |
| ancho | Una propiedad abreviada para establecer un ancho específico para todo el componente. | cadena | Opcional |
| onKeyPressActualizar | Envíe false si desea que el componente no se actualice automáticamente al presionar una tecla. | booleano | Opcional |
| esperar después de presionar la tecla | Cantidad de milisegundos que se deben esperar antes de volver a representar el contenido después de presionar una tecla. El valor predeterminado es 1000 cuando no se especifica. En otras palabras, el componente se actualizará si no se pulsa ninguna tecla adicional después de la última en 1 segundo. Menos de 100 milisegundos no marcan la diferencia. | número | Opcional |
| modificar texto de error | Una función personalizada para modificar el texto de advertencia original del componente. Esta función recibirá un único parámetro de tipo string y deberá igualmente devolver una string . | función | Opcional |
| error | Contiene las siguientes propiedades: | objeto | Opcional |
| error.motivo | Una cadena que contiene un mensaje de error personalizado | cadena | Opcional |
| línea.error | Un número que indica el número de línea relacionado con el mensaje de error personalizado | número | Opcional |
| tema | Especifique qué tema integrado utilizar. | cadena | Opcional |
| bandera | Contiene las siguientes propiedades: | objeto | Opcional |
| colores.predeterminado | Código de color hexadecimal para cualquier símbolo, como braces y comma . | cadena | Opcional |
| colores.cadena | Código de color hexadecimal para tokens identificados como valores string . | cadena | Opcional |
| colores.número | Código de color hexadecimal para tokens identificados como valores integeter , double o float . | cadena | Opcional |
| colores.colon | Código de color hexadecimal para tokens identificados como colon . | cadena | Opcional |
| colores.teclas | Código de color hexadecimal para tokens identificados como keys o nombres de propiedades. | cadena | Opcional |
| colores.keys_whiteSpace | Código de color hexadecimal para tokens identificados como keys entre comillas. | cadena | Opcional |
| colores.primitivo | Código de color hexadecimal para tokens identificados como valores boolean y nulos. | cadena | Opcional |
| colores.error | Código de color hexadecimal para tokens marcados con una etiqueta error . | cadena | Opcional |
| colores.fondo | Código de color hexadecimal para el fondo del componente. | cadena | Opcional |
| colores.fondo_advertencia | Código de color hexadecimal para el mensaje de advertencia que se muestra en la parte superior del componente. | cadena | Opcional |
| estilo | Contiene las siguientes propiedades: | objeto | Opcional |
| estilo.outerBox | Propiedad para modificar el estilo predeterminado del div contenedor externo del componente. | objeto | Opcional |
| estilo.contenedor | Propiedad para modificar el estilo predeterminado del container del componente. | objeto | Opcional |
| estilo.warningBox | Propiedad para modificar el estilo predeterminado del div contenedor del mensaje de advertencia. | objeto | Opcional |
| estilo.errorMensaje | Propiedad para modificar el estilo predeterminado del mensaje de advertencia. | objeto | Opcional |
| estilo.cuerpo | Propiedad para modificar el estilo predeterminado del div contenedor de etiquetas de fila y código. | objeto | Opcional |
| estilo.labelColumn | Propiedad para modificar el estilo predeterminado del div contenedor de etiquetas de fila. | objeto | Opcional |
| etiquetas.de.estilo | Propiedad para modificar el estilo predeterminado de cada etiqueta de fila. | objeto | Opcional |
| estilo.contentBox | Propiedad para modificar el estilo predeterminado del div contenedor del código. | objeto | Opcional |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Siempre que RJEA vuelva a representar su contenido, cualquier función pasada a la propiedad onChange recibirá un único parámetro de objeto con las siguientes claves y valores:
| Llave | Descripción |
|---|---|
| texto simple | Una representación de cadena del contenido que incluye saltos de línea y sangría. Genial para console.log() |
| marcadoTexto | Una representación de cadena del marcado generado automáticamente que se utiliza para representar el contenido. |
| json | Una versión JSON.stringify del contenido. |
| jsObjeto | Una versión javascript object del contenido. Devolverá undefined si la sintaxis del contenido es incorrecta. |
| pauta | Número de líneas representadas para que se muestre el contenido. |
| error | Devuelve false a menos que la sintaxis del contenido sea incorrecta, en cuyo caso devuelve un objeto con un token y un número line que corresponde a la ubicación en la que ocurrió el error y un reason |
RJEA admite temas integrados. Aquí está la lista.
Este proyecto tiene la licencia MIT; consulte el archivo LICENSE.md para obtener más detalles.
¿Gracias a estas maravillosas personas?:
andres redican ? ? | Patricio Sachs ? | Alan Kehl ? | esbenvb | Markus Petrykowski | Rick Brunstedt | ADirtyCat ? |
cedric ? | Radit ? | ascetas ? | CGVedante ? | Shehbaz Jafri ? | Vasantha Kumar RB ? | Aditya Periwal ? |
Alexéi Liájov | Teresa Huynh | Richard Hull | tonynguyenit18 |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Bienvenidos aportes de cualquier tipo!
