# CodeMirror 代码编辑

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/code-mirror/freepass)
- 平台：PC
- 维护者：王斌
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[CodeMirror]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { CodeMirror, Select } from '@weapp/ui';
import { ScrollInfo } from 'codemirror';

type theme = 'eclipse' | 'elegant' | 'monokai' | 'material' | 'night';
type mode = 'javascript' | 'python' | 'markdown' | 'sql';

interface StateType {
  theme: theme;
  mode: mode;
}

// mock数据
const themeOptions = [
  {
    id: "eclipse",
    content: "eclipse",
  },
  {
    id: "monokai",
    content: "monokai"
  },
  {
    id: "elegant",
    content: "elegant"
  },
  {
    id: "material",
    content: "material"
  },
  {
    id: "night",
    content: "night"
  }
];

const codeOptions = [
  {
    id: "javascript",
    content: "javascript",
  },
  {
    id: "python",
    content: "python"
  },
  {
    id: "markdown",
    content: "markdown"
  },
  {
    id: "sql",
    content: "sql"
  }
];

export default class CodeMirrorDemo extends React.Component<any, StateType> {

  constructor(props: any) {
    super(props);
    this.state = {
      theme: "eclipse",
      mode: "javascript",
    }
  }

  onThemeChange = (value: any) => {
    this.setState({ theme: value as theme });
  }

  onModeChange = (value: any) => {
    this.setState({ mode: value as mode });
  }

  onScroll = (value?: ScrollInfo) => {
    console.log(value)
  }

  onFocusChange = (focused: boolean, value: string) => {
    console.log(focused, value);
  }

  render() {
    const { theme, mode } = this.state;
    
    return (
      <div>
        主题：
        <Select
         
          style={{ marginRight: 20 }}
          value={[theme]}
          data={themeOptions}
          onChange={this.onThemeChange}
        />
        代码形式：
        <Select
         
          value={[mode]}
          data={codeOptions}
          onChange={this.onModeChange}
        />
        <br />
        <br />
        <CodeMirror
         
          theme={theme}
          mode={mode}
          onScroll={this.onScroll}
          onFocusChange={this.onFocusChange}
        />
      </div>
    );
  }
}
```

## Tips

##### 代码编辑器的配置如想要了解更多扩展选项可查阅https://codemirror.net/

##### 涉及主题以及代码形式更多扩展联系组件维护人

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认 |
| --- | --- | --- | --- | --- |
| value | 编辑框的内容 | string |  |  |
| readOnly | 编辑的权限 | boolean |  | false |
| options | 代码编辑器的配置 | array |  | 默认组件内配置,用户可以自定义覆盖 |
| width | 编辑框的宽度 | number |  | 100% |
| height | 编辑框的高度 | number |  | 100% |
| onChange | 编辑框中内容改变的回调 | (value?: string) => void |  |  |
| onFocusChange | 焦点改变回调 | (focused: boolean, value: string) => void |  |  |
| onScroll | 滚动事件 | (value?: ScrollInfo) => void; |  |  |
| theme | 主题 | string | 'eclipse' \| 'elegant' \| 'monokai' \| 'material' \| 'night' | 'eclipse' |
| mode | 代码形式 | string | 'javascript' \| 'python' \| 'markdown' | 'javascript' |
### options 配置：

可查阅[https://codemirror.net/5/doc/manual.html#usage](https://codemirror.net/5/doc/manual.html#usage)
如option api需要导入额外的文件请联系组件维护人
