jsoneditor-react-component

Installation

npm i jsoneditor-react-component

Usage

1import JSONEditor from "jsoneditor-react-component";

然后在jsx中使用:

1 const onChangeText = (value) => {
2    console.log("onChangeText", value);
3  };
4  //options默认配置：mode: 'code', modes: ['code', 'tree', 'form', 'view', 'text'], indentation: 4
5 <JSONEditor options={} value={{"a": "c"}} onChange={onChangeText} />

If you want use with Ajv

1import Ajv from 'ajv';
2const ajv = new Ajv({ allErrors: true, verbose: true });
3
4 const onChangeText = (value) => {
5    console.log("onChangeText", value);
6  };
7 <JSONEditor options={ ajv } value={{"a": "c"}} onChange={onChangeText} />

If you want use with Ace Editor:

1import ace from 'brace';
2import 'brace/mode/json';
3import 'brace/theme/github';
4
5 const onChangeText = (value) => {
6    console.log("onChangeText", value);
7  };
8 <JSONEditor options={{ ace, theme="ace/theme/github" }} value={{"a": "c"}} onChange={onChangeText} />

Options

1/**
2 * Provide a custom version of the Ace editor and use this instead of the version that comes embedded with JSONEditor. Only applicable when mode is `code`.
3 *
4 * Note that when using the minimalist version of JSONEditor (which has Ace excluded), JSONEditor will try to load the Ace plugins `ace/mode/json` and `ace/ext/searchbox`.
5 * These plugins must be loaded beforehand or be available in the folder of the Ace editor.
6 */
7  ace?: AceAjax.Ace | undefined;
8/**
9 * Provide a custom instance of [ajv](https://github.com/epoberezkin/ajv), the library used for JSON schema validation.
10 * @example { ajv: Ajv({ allErrors: true, verbose: true }) }
11 */
12  ajv?: Ajv | undefined;
13/**
14 * Set a callback function triggered when the contents of the JSONEditor change.
15 * This callback does not pass the changed contents, use `get()` or `getText()` for that.
16 * Note that `get()` can throw an exception in mode `text`, `code`, or `preview`, when the editor contains invalid JSON.
17 * Will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
18 * See also callback functions `onChangeJSON(json)` and `onChangeText(jsonString)`.
19 */
20  onChange?: (() => void) | undefined;
21/**
22 * Set a callback function triggered when the contents of the JSONEditor change.
23 * Passes the changed JSON document. Only applicable when option mode is `tree`, `form`, or `view`.
24 * The callback will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
25 * @see onChangeText for more details
26 */
27  onChangeJSON?: ((json: any) => void) | undefined;
28/**
29 * Set a callback function triggered when the contents of the JSONEditor change.
30 * Passes the changed JSON document as a string.
31 * The callback will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
32 * @see onChangeJSON for more details
33 */
34  onChangeText?: ((jsonString: string) => void) | undefined;
35/**
36 * Set a callback function to add custom CSS classes to the rendered nodes.
37 * Only applicable when option mode is `tree`, `form`, or `view`.
38 * The function must either return a string containing CSS class names, or return undefined in order to do nothing for a specific node.
39 * In order to update css classes when they depend on external state, you can call `editor.refresh()`.
40 */
41  onClassName?: ((classNameParams: OnClassNameParams) => string | undefined) | undefined;
42/**
43 * Set a callback function to be invoked when a node is expanded/collapsed (not programtically via APIs).
44 * Only applicable when option mode is `tree`, `form`, or `view`.
45 */
46  onExpand?: (expandParams: ExpandOptions) => void | undefined;
47/**
48 * Set a callback function to determine whether individual nodes are editable or readonly.
49 * Only applicable when option mode is `tree`, `text`, or `code`.
50 * In case of mode `tree`, the callback is invoked as `editable(node)`, where the first parameter is a `Node`.
51 * The function must either return a boolean value to set both the nodes field and value editable or readonly,
52 * or return `{ field: boolean; value: boolean }` to set the readonly attribute for field and value individually.
53 * In modes `text` and `code`, the callback is invoked as `editable(node)` where node is an empty object (no field, value, or path).
54 * In that case the function can return false to make the text or code editor completely readonly.
55 */
56  onEditable?: ((node: EditableNode | object) => boolean | FieldEditable) | undefined;
57/**
58 * Set a callback function triggered when an error occurs.
59 * Invoked with the error as first argument. The callback is only invoked
60 * for errors triggered by a users action, like switching from `code` mode to `tree` mode
61 * or clicking the Format button whilst the editor doesn't contain valid JSON.
62 */
63  onError?: ((error: Error) => void) | undefined;
64/**
65 * Set a callback function triggered right after the mode is changed by the user.
66 * Only applicable when the mode can be changed by the user (i.e. when option modes is set).
67 */
68  onModeChange?: ((newMode: JSONEditorMode, oldMode: JSONEditorMode) => void) | undefined;
69/**
70 * Customize the name of object and array nodes. By default the names are brackets with the number of children inside, like {5} and [32].
71 * The number inside can be customized. using onNodeName. The onNodeName function should return a string containing the name for the node.
72 * If nothing is returned, the size (number of children) will be displayed.
73 */
74  onNodeName?: ((nodeName: OnNodeNameParams) => string | undefined) | undefined;
75/**
76 * Set a callback function for custom validation. Available in all modes.
77 * On a change of the JSON, the callback function is invoked with the changed data.
78 * The function should return an array with errors or null if there are no errors.
79 * The function can also return a Promise resolving with the errors retrieved via an asynchronous validation (like sending a request to a server for validation).
80 * @see schema for JSON schema validation.
81 */
82  onValidate?: ((json: any) => ValidationError[] | Promise<ValidationError[]>) | undefined;
83/**
84 * Set a callback function for validation and parse errors. Available in all modes.
85 * On validation of the json, if errors of any kind were found this callback is invoked with the errors data.
86 * On change, the callback will be invoked only if errors were changed.
87 * @param errors validation errors
88 */
89  onValidationError?: ((errors: ReadonlyArray<SchemaValidationError | ParseError>) => void) | undefined;
90/**
91 * Set a callback function to customize the context menu in tree mode. Each time the user clicks on the context menu button, an array of menu items is created.
92 * If this callback is configured, the array with menu items is passed to this function. The menu items can be customized in this function in any aspect of these menu items,
93 * including deleting them and/or adding new items. The function should return the final array of menu items to be displayed to the user.
94 * Each menu item is represented by an object, which may also contain a submenu array of items.
95 */
96  onCreateMenu?: ((menuItems: MenuItem[], node: MenuItemNode) => MenuItem[]) | undefined;
97/**
98 * If true, unicode characters are escaped and displayed as their hexadecimal code (like \u260E) instead of of the character itself (like ☎).
99 * @default false
100 */
101  escapeUnicode?: boolean | undefined;
102/**
103 * If true, object keys in `tree`, `view` or `form` mode will be listed alphabetically instead by their insertion order.
104 * Sorting is performed using a natural sort algorithm, which makes it easier to see objects that have string numbers as keys.
105 * @default false
106 */
107  sortObjectKeys?: boolean | undefined;
108/**
109 * If false, nodes can be dragged from any parent node to any other parent node. If true, nodes can only be dragged inside the same parent node, which effectively only allows reordering of nodes.
110 * By default, limitDragging is true when no JSON schema is defined, and false otherwise.
111 */
112  limitDragging?: boolean;
113/**
114 * Enables history, adds a button Undo and Redo to the menu of the JSONEditor. Only applicable when mode is `tree`, `form`, or `preview`.
115 * @default true
116 */
117  history?: boolean | undefined;
118/**
119 * Set the editor mode. Available values: `tree`, `view`, `form`, `code`, `text`, `preview`.
120 * In `view` mode, the data and datastructure is readonly. In `form` mode, only the value can be changed, the data structure is readonly.
121 * Mode `code` requires the Ace editor to be loaded on the page. Mode `text` shows the data as plain text.
122 * The `preview` mode can handle large JSON documents up to 500 MiB. It shows a preview of the data, and allows to transform, sort, filter, format, or compact the data.
123 * @default 'tree'
124 */
125  mode?: JSONEditorMode | undefined;
126/**
127 * Create a box in the editor menu where the user can switch between the specified modes.
128 * @see mode for configuration
129 */
130  modes?: JSONEditorMode[] | undefined;
131/**
132 * Initial field name for the root node. Can also be set using `setName(name)`. Only applicable when mode is `tree`, `view`, or `form`.
133 * @default undefined
134 */
135  name?: string | undefined;
136/**
137 * Validate the JSON object against a JSON schema. A JSON schema describes the structure that a JSON object must have, like required properties or the type that a value must have.
138 * @see onValidate for custom validation.
139 * @see http://json-schema.org/
140 */
141  schema?: object | undefined;
142/**
143 * Schemas that are referenced using the `$ref` property from the JSON schema that are set in the schema option, the object structure in the form of `{ reference_key: schemaObject }`.
144 */
145  schemaRefs?: object | undefined;
146/**
147 * When enabled and schema is configured, the editor will suggest text completions based on the schema properties, examples and enums.
148 * - Limitation: the completions will be presented only for a valid json.
149 * - Only applicable when mode is `code`.
150 * @default false
151 */
152  allowSchemaSuggestions?: boolean | undefined;
153/**
154 * Enables a search box in the upper right corner of the JSONEditor. Only applicable when mode is `tree`, `view`, or `form`.
155 * @default true
156 */
157  search?: boolean | undefined;
158/**
159 * Number of indentation spaces. Only applicable when mode is `code`, `text`, or `preview`.
160 * @default 2
161 */
162  indentation?: number | undefined;
163/**
164 * Set the Ace editor theme. Please note that only the default theme is included with JSONEditor, so if you specify another one you need to make sure it is loaded.
165 * @default 'ace/theme/jsoneditor'
166 */
167  theme?: string | undefined;
168/**
169 * Array of templates that will appear in the context menu, Each template is a json object precreated that can be added as a object value to any node in your document.
170 */
171  templates?: Template[] | undefined;
172/**
173 * Providing this will enable this feature in your editor in `tree` mode.
174 */
175  autocomplete?: AutoCompleteOptions | undefined;
176/**
177 * Adds main menu bar. Contains format, sort, transform, search etc. functionality. Applicable in all modes.
178 * @default true
179 */
180  mainMenuBar?: boolean | undefined;
181/**
182 * Adds navigation bar to the menu. The navigation bar visualizes the current position on the tree structure as well as allows breadcrumbs navigation.
183 * Only applicable when mode is `tree`, `form` or `view`.
184 * @default true
185 */
186  navigationBar?: boolean | undefined;
187/**
188 * Adds status bar to the bottom of the editor. The status bar shows the cursor position and a count of the selected characters.
189 * Only applicable when mode is `code`, `text`, or `preview`.
190 * @default true
191 */
192  statusBar?: boolean | undefined;
193/**
194 * Set a callback function triggered when a text is selected in the JSONEditor.
195 * Only applicable when mode is `code` or `text`.
196 * @param start Selection start position
197 * @param end Selected end position
198 * @param text selected text
199 */
200  onTextSelectionChange?: ((start: SelectionPosition, end: SelectionPosition, text: string) => void) | undefined;
201/**
202 * Set a callback function triggered when Nodes are selected in the JSONEditor.
203 * Only applicable when mode is `tree`.
204 * @param start
205 * @param end
206 */
207  onSelectionChange?: ((start: SerializableNode, end: SerializableNode) => void) | undefined;
208/**
209 * Set a callback function that will be triggered when an event will occur in a JSON field or value.
210 * Only applicable when mode is `form`, `tree` or `view`.
211 * @param node the Node where event has been triggered
212 * @param event the event fired
213 */
214  onEvent?: ((node: EditableNode, event: Event) => void) | undefined;
215/**
216 * Callback method, triggered when the editor comes into focus
217 */
218  onFocus?: (event: Event) => void | undefined;
219/**
220 * Callback method, triggered when the editor goes out of focus
221 */
222  onBlur?: (event: Event) => void | undefined;
223/**
224 * When true, values containing a color name or color code will have a color picker rendered on their left side.
225 * @default true
226 */
227  colorPicker?: boolean | undefined;
228/**
229 * Callback function triggered when the user clicks a color. Can be used to implement a custom color picker.
230 * @param parent An HTML element where the color picker can be attached. JSONEditor comes with a built-in color picker,
231 * powered by {@link https://github.com/Sphinxxxx/vanilla-picker|vanilla-picker}.
232 * @param color The current color.
233 * @param onChange A callback which has to be invoked with the new color selected in the color picker.
234 */
235  onColorPicker?: ((parent: HTMLElement, color: string, onChange: (color: Color) => void) => void) | undefined;
236/**
237 * By default (true), a tag with the date/time of a timestamp is displayed right from values containing a timestamp.
238 * By default, a value is considered a timestamp when it is an integer number with a value larger than Jan 1th 2000, 946684800000.
239 * When timestampTag a is a function, a timestamp tag will be displayed when this function returns true, and no timestamp is displayed when the function returns false.
240 * When the function returns a non-boolean value like null or undefined, JSONEditor will fallback on the built-in rules to determine whether or not to show a timestamp.
241 * Whether a value is a timestamp can be determined implicitly based on the value, or explicitly based on field or path.
242 * You can for example test whether a field name contains a string like: 'date' or 'time'.
243 * Only applicable for modes `tree`, `form`, and `view`.
244 * @default true
245 * @example ({ field, value, path }) => field === 'dateCreated'
246 */
247  timestampTag?: boolean | ((node: TimestampNode) => boolean) | undefined;
248/**
249 * Customizing the way formating the timestamp. Called when a value is timestamp after timestampTag. If it returns null, the timestamp would be formatted with default setting.
250 * Only applicable for modes `tree`, `form`, and `view`.
251 * @default value => new Date(value).toISOString()
252 */
253timestampFormat?: ((node: TimestampNode) => string | null) | undefined;
254/**
255 * The default language comes from the browser navigator, but you can force a specific language. So use here string as 'en' or 'pt-BR'.
256 * Built-in languages: 'en', 'pt-BR', 'zh-CN', 'tr', 'ja', 'fr-FR'. Other translations can be specified via the option `languages`.
257 */
258  language?: string | undefined;
259/**
260 * You can override existing translations or provide a new translation for a specific language. To do it provide an object at languages with language and the keys/values to be inserted.
261 * All available fields for translation can be found in the source file `src/js/i18n.js`.
262 * @example { 'pt-BR': { 'auto': 'Automático testing' }, 'en': { 'auto': 'Auto testing' } }
263 */
264  languages?: Record<string, Partial<Record<TranslationKey, string>>> | undefined;
265/**
266 * The container element where modals (like for sorting and filtering) are attached:
267 * an overlay will be created on top of this container, and the modal will be created in the center of this container.
268 */
269  modalAnchor?: HTMLElement | undefined;
270/**
271 * The container element where popups (for example drop down menus, for JSON Schema error tooltips, and color pickers) will be absolutely positioned.
272 * By default, this is the root `div` element of the editor itself. When the JSONEditor is inside a `div` element which hides overflowing contents (CSS overflow: auto or overflow: hidden),
273 * tooltips will be visible only partly.
274 * In this case, a popupAnchor outside of the element without hidden overflow will allow the tooltips to be visible when overflowing the `div` element of the JSONEditor.
275 */
276  popupAnchor?: HTMLElement | undefined;
277/**
278 * Enable sorting of arrays and object properties. Only applicable for mode `tree`.
279 * @default true
280 */
281  enableSort?: boolean | undefined;
282/**
283 * Enable filtering, sorting, and transforming JSON using a {@link https://jmespath.org/|JMESPath} query. Only applicable for mode `tree`.
284 * @default true
285 */
286  enableTransform?: boolean | undefined;
287/**
288 * Number of children allowed for a given node before the 'show more/show all' message appears (in `tree`, `view`, or `form` modes).
289 * @default 100
290 */
291  maxVisibleChilds?: number | undefined;
292/**
293 * Create a query string based on query options filled in the Transform Wizard in the Transform modal. Normally used in combination with `executeQuery`.
294 * The input for the function are the entered query options and the current JSON, and the output must be a string containing the query.
295 * This query will be executed using `executeQuery`. Note that there is a special case '@' for filter.field and sort.field.
296 * It means that the field itself is selected, for example when having an array containing numbers.
297 */
298  createQuery?: ((json: any, queryOptions: QueryOptions) => string) | undefined;
299/**
300 * Replace the build-in query language used in the Transform modal with a custom language. Normally used in combination with `createQuery`.
301 * The input for the function is the current JSON and a query string, and output must be the transformed JSON.
302 */
303  executeQuery?: ((json: any, query: string) => any) | undefined;
304/**
305 * A text description displayed on top of the Transform modal. Can be used to explain a custom query language implemented via `createQuery` and `executeQuery`.
306 * The text can contain HTML code like a link to a web page.
307 */
308queryDescription?: string | undefined;

更多配置请参考https://github.com/josdejong/jsoneditor/blob/master/docs/api.md

thanks for your use 🥹!