hc-code-mirror

代码编辑器

技术栈为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，无需额外引入