代码编辑器

技术栈为react，主要封装了codeMirror。

API

| 成员 | 说明 | 类型 | 默认值 | ---- | ---- |---- |---- | | style | 注入的样式 | object | {} | className | 传入的class名称 | string | '' | value | 默认值 | string | '' | options | 配置项，参考codeMirror| object | {} | | onChange | 输入数据时变化触发 | Function(value) |

格式化指导

使用 js-beautify 进行格式化处理，

// 引入js-beautify
const Beautify = require('js-beautify').js;

// 进行美化处理
const value = Beautify(this.state.value, { indent_size: 2, space_in_empty_paren: true });

// 使用
<CodeMirror
  style={{ height: 700 }}
  value={value}
  options={{ mode: 'application/json' }}
  onChange={e => this.setState({ value: e })}
/>

样式问题

采用内嵌css，无需额外引入