react json editor ajrm
Locale Support & Other
Avertissement:
Comme vous le savez peut-être déjà, le projet original de react-json-editor-ajrm n'est pas activement maintenu et il finira par être obsolète. J'ai donc décidé de fixer une date officielle de dépréciation. La date provisoire est le 15 juin 2023.
Je tiens à remercier ceux qui l'ont utilisé dans leurs projets et ceux qui ont contribué d'une manière ou d'une autre au projet. Je ne souhaite tout simplement plus maintenir ce projet. Il a été réalisé au début de ma carrière d'ingénieur logiciel et il n'est pas à la hauteur des normes actuelles ni des miennes.
Mais ne vous inquiétez pas. J'ai l'intention de donner une nouvelle vie à ce projet en le réécrivant de fond en comble.
J'aimerais tirer les leçons du passé et éviter certains des problèmes actuels de React-json-editor-ajrm. Je voudrais aussi souligner les choses bien faites, et je souhaite continuer.
J'ai installé ma maison pour ce nouveau projet ici enio. J'ai également organisé une discussion ici si vous avez des questions ou des commentaires.
Un composant de réaction élégant, semblable à un éditeur, modulaire pour visualiser, éditer et déboguer la syntaxe des objets 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'
/>
Astuce : Il existe deux chemins racine différents : react-json-editor-ajrm et react-json-editor-ajrm/es . Le premier contient du code ES5 polyrempli, le second ES6 non polyrempli. La version react-json-editor-ajrm/es n'est pas compatible avec create-react-app . Si vous ne savez pas lequel vous avez besoin/voulez, choisissez le premier : il offre la meilleure compatibilité avec les outils et les navigateurs.
Le dossier ./examples contient deux exemples :
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 dans le navigateur Web placeholder à afficher après le montage des composants.English , German , Spanish Chinese , du chinois, French , Indonesian , Russian , Hindi , du Japanese et Tamil . | Nom | Description | Taper | Requis |
|---|---|---|---|
| lieu | Les paramètres régionaux de votre éditeur. Importez des paramètres régionaux comme ceci : import locale from 'react-json-editor-ajrm/locale/en' . Apprendre encore plus | objet | Obligatoire |
| identifiant | Un id facultatif à attribuer au nœud DOM de saisie de texte réel. Outre la saisie de texte, les nœuds suivants recevront également un identifiant : {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | chaîne | Facultatif |
| espace réservé | Envoyez un objet javascript valide à afficher une fois le composant monté. Attribuez une valeur différente pour que le contenu initial du composant soit restitué. | objet | Facultatif |
| réinitialiser | Envoyez true pour que le composant soit toujours restitué ou « réinitialisé » à la valeur fournie dans la propriété placeholder . | booléen | Facultatif |
| afficher uniquement | Envoyez true si vous souhaitez que le contenu affiché ne soit pas modifiable. | booléen | Facultatif |
| surChange | Chaque fois que l'événement onKeyPress a lieu, il renvoie des valeurs de contenu. | objet | Facultatif |
| surFlou | Chaque fois que l'événement onBlur a lieu, il renvoie des valeurs de contenu. | objet | Facultatif |
| confirmerBien | Envoyez false si vous souhaitez que la coche confirmant la bonne syntaxe soit masquée. | booléen | Facultatif |
| hauteur | Une propriété raccourcie pour définir une hauteur spécifique pour l'ensemble du composant. | chaîne | Facultatif |
| largeur | Une propriété raccourcie pour définir une largeur spécifique pour l'ensemble du composant. | chaîne | Facultatif |
| onKeyPressUpdate | Envoyez false si vous souhaitez que le composant ne se mette pas automatiquement à jour lorsque vous appuyez sur une touche. | booléen | Facultatif |
| attendreAprèsKeyPress | Nombre de millisecondes à attendre avant de restituer le contenu après avoir appuyé sur une touche. La valeur par défaut est 1000 lorsqu'elle n'est pas spécifiée. En d’autres termes, le composant sera mis à jour s’il n’y a pas de frappe supplémentaire après la dernière dans un délai d’une seconde. Moins de 100 millisecondes ne fait aucune différence. | nombre | Facultatif |
| modifierErrorText | Une fonction personnalisée pour modifier le texte d'avertissement d'origine du composant. Cette fonction recevra un seul paramètre de type string et devra également renvoyer une string . | fonction | Facultatif |
| erreur | Contient les propriétés suivantes : | objet | Facultatif |
| erreur.raison | Une chaîne contenant un message d'erreur personnalisé | chaîne | Facultatif |
| erreur.line | Un numéro indiquant le numéro de ligne lié au message d'erreur personnalisé | nombre | Facultatif |
| thème | Spécifiez le thème intégré à utiliser. | chaîne | Facultatif |
| couleurs | Contient les propriétés suivantes : | objet | Facultatif |
| couleurs.par défaut | Code couleur hexadécimal pour tous les symboles, comme braces et comma . | chaîne | Facultatif |
| couleurs.string | Code couleur hexadécimal pour les jetons identifiés comme valeurs string . | chaîne | Facultatif |
| couleurs.numéro | Code couleur hexadécimal pour les jetons identifiés comme des valeurs integeter , double ou float . | chaîne | Facultatif |
| couleurs.colon | Code couleur hexadécimal pour les jetons identifiés par colon . | chaîne | Facultatif |
| couleurs.clés | Code couleur hexadécimal pour les jetons identifiés comme keys ou noms de propriété. | chaîne | Facultatif |
| couleurs.keys_whiteEspace | Code couleur hexadécimal pour les jetons identifiés comme keys entourées de guillemets. | chaîne | Facultatif |
| couleurs.primitive | Code couleur hexadécimal pour les jetons identifiés comme valeurs boolean et nulles. | chaîne | Facultatif |
| couleurs.erreur | Code couleur hexadécimal pour les jetons marqués d'une étiquette error . | chaîne | Facultatif |
| couleurs.fond | Code couleur hexadécimal pour l'arrière-plan du composant. | chaîne | Facultatif |
| couleurs.background_warning | Code couleur hexadécimal pour le message d'avertissement affiché en haut du composant. | chaîne | Facultatif |
| style | Contient les propriétés suivantes : | objet | Facultatif |
| style.outerBox | Propriété pour modifier le style par défaut du div du conteneur extérieur du composant. | objet | Facultatif |
| style.conteneur | Propriété pour modifier le style par défaut du container du composant. | objet | Facultatif |
| style.warningBox | Propriété pour modifier le style par défaut du conteneur div du message d'avertissement. | objet | Facultatif |
| style.errorMessage | Propriété pour modifier le style par défaut du message d'avertissement. | objet | Facultatif |
| style.corps | Propriété permettant de modifier le style par défaut du div conteneur des étiquettes de ligne et du code. | objet | Facultatif |
| style.labelColumn | Propriété pour modifier le style par défaut du div conteneur des étiquettes de ligne. | objet | Facultatif |
| style.étiquettes | Propriété permettant de modifier le style par défaut de chaque étiquette de ligne. | objet | Facultatif |
| style.contentBox | Propriété pour modifier le style par défaut du conteneur div du code. | objet | Facultatif |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Chaque fois que RJEA restitue son contenu, toute fonction transmise à la propriété onChange recevra un seul paramètre d'objet avec les clés et valeurs suivantes :
| Clé | Description |
|---|---|
| texte brut | Une représentation sous forme de chaîne du contenu qui inclut des sauts de ligne et une indentation. Idéal pour console.log() |
| texte de balisage | Représentation sous forme de chaîne du balisage généré automatiquement utilisé pour restituer le contenu. |
| json | Une version JSON.stringify du contenu. |
| jsObject | Une version javascript object du contenu. Renvoie undefined si la syntaxe du contenu est incorrecte. |
| lignes | Nombre de lignes rendues pour le contenu à afficher. |
| erreur | Renvoie false sauf si la syntaxe du contenu est incorrecte, auquel cas renvoie un objet avec un token et un numéro line qui correspond à l'emplacement où l'erreur s'est produite et une reason |
RJEA prend en charge le thème intégré. Voici la liste.
Ce projet est sous licence MIT - voir le fichier LICENSE.md pour plus de détails.
Merci à ces gens merveilleux ? :
Andrew Redican ? ? | Patrick Sachs ? | Allan Kehl ? | esbenvb | Markus Petrykowski | Rick Brunstedt | ADirtyCat ? |
Cédric ? | Radit ? | asketes ? | CGVedant ? | Shehbaz Jafri ? | Vasantha Kumar RB ? | Aditya Periwal ? |
Alexeï Liakhov | Terence Huynh | Richard Hull | tonynguyenit18 |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
