cnd-components-mcp/componentData/components/mirror编辑器/jsonEditor.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
---
# JSON 编辑器

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cn-material-codemirror

## 基础演示

```jsx preview
import React, {useState} from 'react';
import { JsonEditor } from '@ali/cnd';

export default function App () {
  const [value, setValue] = useState();

  return (<JsonEditor value={value} onChange={(val => setValue(val))} />)
}
```

## 使用field 接管

```jsx preview
import React, {useState} from 'react';
import { Field } from '@alicloud/console-components';
import { JsonEditor } from '@ali/cnd';

export default function App () {
  const [value, setValue] = useState();
  const { init } = Field.useField();

  return (<JsonEditor {...init('data', {
          initValue: '',
          props: {
            onChange: console.log,
          },
        })} />)
}
```

## API

| 属性     | 说明                 | 类型            | 默认值 |
| -------- | -------------------- | --------------- | ------ |
| value | 编辑器内容              | string | -      |
| onChange | 内容变化时，会触发当前函数           | function | -      |