前言：這是第一次嘗試，官網不容易看懂，網上對應的文章不多。

一. 先安裝依賴：

1.安裝 react-codemirror2（程式碼編輯器）： npm install react-codemirror2 codemirror --save

2.將 yaml 檔案字串形式轉為物件形式：npm install --save yamljs

二. 上程式碼

這段程式碼已經將其封裝成元件了，直接引入就可以使用，引用的時候可以設定其寬度。

如何使用：將檔案直接拖入視窗就行了。

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;

校驗yaml檔案格式