---
---
# Shell 编辑器

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

## 基础演示

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

export default function App () {
  const onChange = (value) => {
    console.log(value, '获取值')
  }

  const defaultValues = {
    Command: '/bin/bash',
    CommandArgs: ['-c', 'npm run start']
  }

  return (<DockerCommandEditor value={defaultValues} onChange={onChange} />)
}
```

## 校验

```jsx preview
import React, { useState, useRef } from 'react';
import { DockerCommandEditor, Button } from '@ali/cnd';
import { split } from 'lodash';

export default function App () {
  const onChange = (value) => {
    console.log(value, '获取值')
  }

  const DockerCommandEditorRef = useRef();

  const onSubmit = async () => {
    const res = await DockerCommandEditorRef.current.validate();
    console.log(res ? '校验成功' : '校验失败');
  }

  return (
    <>
      <Button type="primary" onClick={() => onSubmit()} style={{ marginBottom: 20 }}>
        校验
      </Button>
      <DockerCommandEditor onChange={onChange} ref={DockerCommandEditorRef} />
    </>
)
}
```

## API

| 属性     | 说明                 | 类型            | 默认值 |
| -------- | -------------------- | --------------- | ------ |
| value | 组件所需要的值             | object | -      |
| onChange | 组件值变化时，触发的函数              | function | -      |
| ref |    DockerCommandEditor组件实例，可获取检验结果          | object | -      |
| defaultArgs |  默认命令行内容         | array | ['-c']    |