react 中使用 codemirror2（在线代码编辑器）读取 yaml 文件

import React from ‘react‘;
import { message } from ‘antd‘;
import { UnControlled as CodeMirror } from ‘react-codemirror2‘;
import { connect } from ‘dva‘;
// import styles from ‘./index.less‘;

// 引入codemirror核心css,js文件（经试验css必须有，js文件还没发现它的用处）
import ‘codemirror/lib/codemirror.css‘;
import ‘codemirror/lib/codemirror.js‘

// 引入 yaml 依赖（因为我需要yaml语言 大家可以自行引入javascript java c++等 参考官网）
import ‘codemirror/mode/yaml/yaml‘;
// import "codemirror/mode/javascript/javascript";

// 引入 ambiance 主题
import ‘codemirror/theme/ambiance.css‘;

// 引入 yamljs
const getYAMLJS = require(‘yamljs‘);

@connect()
class CodeMirrorBox extends React.Component {

  changeCode = (editor, data, value) => {
    if (!value) return;
    // 获取 editor.doc.getValue()
    // 赋值 editor.doc.setValue(dataVal) // 会触发 onChange 事件，小心进入无线递归。
    const { onChange } = this.props;
    if (onChange) {
      let obj = {}
      try { // 校验文件是否为 yaml
        obj = getYAMLJS.parse(value);
        onChange(obj, true);
      } catch {
        onChange(obj, false);
        message.error("文件格式有误")
        editor.doc.setValue("")
      }
    }
  };

  render() {
    return (
      <CodeMirror
        // value={val}
        options={{
          lineNumbers: true, // 显示行号
          theme: ‘ambiance‘, // 设置主题
          // readOnly: true, // 只读(有用)
          mode: { // 实现代码高亮
            name: ‘text/x-yaml‘,
            // name: "javascript", // 没错，需要先引入 javascript
            // json: true
          },
        }}
        onChange={this.changeCode}
      />
    );
  }
}

export default CodeMirrorBox;