react json editor ajrm
Locale Support & Other
Warnung:
Wie Sie vielleicht bereits wissen, wird das ursprüngliche Projekt von „react-json-editor-ajrm“ nicht aktiv gepflegt und wird irgendwann veraltet sein. Deshalb habe ich beschlossen, ein offizielles Datum für die Einstellung festzulegen. Der vorläufige Termin hierfür ist der 15. Juni 2023.
Ich möchte denjenigen danken, die es in ihren Projekten verwendet haben, und denen, die in irgendeiner Weise zum Projekt beigetragen haben. Ich möchte dieses Projekt einfach nicht länger aufrechterhalten. Es wurde in den frühen Tagen meiner Karriere als Software-Ingenieur erstellt und entspricht weder den heutigen noch meinen Standards.
Aber keine Sorge. Ich habe vor, diesem Projekt neues Leben einzuhauchen, indem ich es von Grund auf neu schreibe.
Ich möchte die Erkenntnisse der Vergangenheit nutzen und einige der Probleme vermeiden, die React-Json-Editor-Ajrm derzeit hat. Ich möchte auch die Dinge hervorheben, die gut gemacht wurden, und ich möchte weitermachen.
Ich habe die Startseite für dieses neue Projekt hier eingerichtet, Enio. Ich habe hier auch eine Diskussion eingerichtet, falls Sie Fragen oder Kommentare haben.
Eine stilvolle, editorähnliche, modulare Reaktionskomponente zum Anzeigen, Bearbeiten und Debuggen der Javascript-Objektsyntax!
$ 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'
/>
Hinweis : Es gibt zwei verschiedene Root-Pfade: react-json-editor-ajrm und react-json-editor-ajrm/es . Der erste enthält polygefüllten ES5-Code, der zweite nicht polygefüllten ES6-Code. Die Version react-json-editor-ajrm/es ist nicht mit create-react-app kompatibel . Wenn Sie sich nicht sicher sind, welches Sie benötigen/wollen, wählen Sie das erste aus – es bietet die beste Kompatibilität mit Tools und Browsern.
Der Ordner ./examples enthält zwei Beispiele:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 im Webbrowser placeholder , um es nach dem Mounten der Komponente anzuzeigen.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese und Tamil . | Name | Beschreibung | Typ | Erforderlich |
|---|---|---|---|
| Gebietsschema | Das Gebietsschema Ihres Editors. Importieren Sie Gebietsschemas wie folgt: import locale from 'react-json-editor-ajrm/locale/en' . Erfahren Sie mehr | Objekt | Obligatorisch |
| Ausweis | Eine optionale id , die dem tatsächlichen Texteingabe-DOM-Knoten zugewiesen wird. Neben der Texteingabe erhalten auch die folgenden Knoten eine ID: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | Zeichenfolge | Optional |
| Platzhalter | Senden Sie ein gültiges Javascript-Objekt, das angezeigt wird, sobald die Komponente gemountet ist. Weisen Sie einen anderen Wert zu, damit der ursprüngliche Inhalt der Komponente neu gerendert wird. | Objekt | Optional |
| zurücksetzen | Senden Sie true , damit die Komponente immer neu gerendert oder auf den in der placeholder angegebenen Wert zurückgesetzt wird. | Boolescher Wert | Optional |
| Nur ansehen | Senden Sie true wenn Sie möchten, dass der angezeigte Inhalt nicht bearbeitet werden kann. | Boolescher Wert | Optional |
| onChange | Immer wenn onKeyPress Ereignis stattfindet, werden Inhaltswerte zurückgegeben. | Objekt | Optional |
| onBlur | Immer wenn onBlur Ereignis stattfindet, werden Inhaltswerte zurückgegeben. | Objekt | Optional |
| bestätigenGut | Senden Sie false wenn Sie möchten, dass das Häkchen zur Bestätigung einer guten Syntax ausgeblendet wird. | Boolescher Wert | Optional |
| Höhe | Eine Abkürzungseigenschaft zum Festlegen einer bestimmten Höhe für die gesamte Komponente. | Zeichenfolge | Optional |
| Breite | Eine Abkürzungseigenschaft zum Festlegen einer bestimmten Breite für die gesamte Komponente. | Zeichenfolge | Optional |
| onKeyPressUpdate | Senden Sie false wenn Sie möchten, dass die Komponente bei Tastendruck nicht automatisch aktualisiert wird. | Boolescher Wert | Optional |
| waitAfterKeyPress | Wartezeit in Millisekunden, bevor der Inhalt nach einem Tastendruck erneut gerendert wird. Der Wert ist standardmäßig 1000 , wenn er nicht angegeben wird. Mit anderen Worten: Die Komponente wird aktualisiert, wenn nach dem letzten innerhalb einer Sekunde kein weiterer Tastendruck erfolgt. Weniger als 100 Millisekunden machen keinen Unterschied. | Nummer | Optional |
| changesErrorText | Eine benutzerdefinierte Funktion zum Ändern des ursprünglichen Warntexts der Komponente. Diese Funktion empfängt einen einzelnen Parameter vom Typ string und muss ebenfalls einen string zurückgeben. | Funktion | Optional |
| Fehler | Enthält die folgenden Eigenschaften: | Objekt | Optional |
| Fehlergrund | Eine Zeichenfolge, die eine benutzerdefinierte Fehlermeldung enthält | Zeichenfolge | Optional |
| error.line | Eine Zahl, die die Zeilennummer angibt, die sich auf die benutzerdefinierte Fehlermeldung bezieht | Nummer | Optional |
| Thema | Geben Sie an, welches integrierte Design verwendet werden soll. | Zeichenfolge | Optional |
| Farben | Enthält die folgenden Eigenschaften: | Objekt | Optional |
| farben.default | Hex-Farbcode für alle Symbole, wie geschweifte braces und comma . | Zeichenfolge | Optional |
| farben.string | Hex-Farbcode für Token, die als string identifiziert werden. | Zeichenfolge | Optional |
| Farben.Nummer | Hex-Farbcode für Token, die als integeter , double oder float Werte identifiziert werden. | Zeichenfolge | Optional |
| farben.colon | Hex-Farbcode für Token, die als colon identifiziert werden. | Zeichenfolge | Optional |
| Farben.Tasten | Hex-Farbcode für Token, die als keys oder Eigenschaftsnamen identifiziert werden. | Zeichenfolge | Optional |
| farben.keys_whiteSpace | Hex-Farbcode für Token, die als in Anführungszeichen gesetzte keys identifiziert werden. | Zeichenfolge | Optional |
| Farben.primitiv | Hex-Farbcode für Token, die als boolean Werte und Null identifiziert werden. | Zeichenfolge | Optional |
| farben.fehler | Hex-Farbcode für Token, die mit einem error gekennzeichnet sind. | Zeichenfolge | Optional |
| Farben.Hintergrund | Hex-Farbcode für den Hintergrund der Komponente. | Zeichenfolge | Optional |
| farben.background_warning | Hex-Farbcode für die Warnmeldung, die oben in der Komponente angezeigt wird. | Zeichenfolge | Optional |
| Stil | Enthält die folgenden Eigenschaften: | Objekt | Optional |
| style.outerBox | Eigenschaft zum Ändern des Standardstils des äußeren Container-Div der Komponente. | Objekt | Optional |
| style.container | Eigenschaft zum Ändern des Standardstils des container . | Objekt | Optional |
| style.warningBox | Eigenschaft zum Ändern des Standardstils des Container-Div der Warnmeldung. | Objekt | Optional |
| style.errorMessage | Eigenschaft zum Ändern des Standardstils der Warnmeldung. | Objekt | Optional |
| Stil.Körper | Eigenschaft zum Ändern des Standardstils des Container-Div von Zeilenbeschriftungen und Code. | Objekt | Optional |
| style.labelColumn | Eigenschaft zum Ändern des Standardstils des Container-Divs der Zeilenbeschriftungen. | Objekt | Optional |
| style.labels | Eigenschaft zum Ändern des Standardstils jeder Zeilenbeschriftung. | Objekt | Optional |
| style.contentBox | Eigenschaft zum Ändern des Standardstils des Container-Div des Codes. | Objekt | Optional |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Immer wenn RJEA seinen Inhalt neu rendert, erhält jede an die Eigenschaft onChange übergebene Funktion einen einzelnen Objektparameter mit den folgenden Schlüsseln und Werten:
| Schlüssel | Beschreibung |
|---|---|
| Klartext | Eine Zeichenfolgendarstellung des Inhalts, einschließlich Zeilenumbrüchen und Einrückungen. Großartig für console.log() |
| markupText | Eine Zeichenfolgendarstellung des automatisch generierten Markups, das zum Rendern von Inhalten verwendet wird. |
| json | Eine JSON.stringify-Version des Inhalts. |
| jsObject | Eine javascript object des Inhalts. Gibt undefined zurück, wenn die Syntax des Inhalts falsch ist. |
| Linien | Anzahl der gerenderten Zeilen für anzuzeigenden Inhalt. |
| Fehler | Gibt false zurück, es sei denn, die Syntax des Inhalts ist falsch. In diesem Fall wird ein Objekt mit einem token und einer line zurückgegeben, die der Position entspricht, an der der Fehler aufgetreten ist, sowie einer reason |
RJEA unterstützt integrierte Themes. Hier ist die Liste.
Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der Datei LICENSE.md.
Danke geht an diese wunderbaren Menschen?:
Andrew Redican ? ? | Patrick Sachs ? | Allan Kehl ? | esbenvb | Markus Petrykowski | Rick Brunstedt | ADirtyCat ? |
Cédric ? | Radit ? | asketes ? | CGVedant ? | Shehbaz Jafri ? | Vasantha Kumar RB ? | Aditya Periwal ? |
Alexey Lyakhov | Terence Huynh | Richard Hull | tonynguyenit18 |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
