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

前言：这是第一次尝试，官网不容易看懂，网上对应的文章不多。

　　需要学习更多的，请再找找其他文章，大神请移步官网。

一. 先安装依赖：

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 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');

class CodeMirrorBox extends React.Component {

  changeCode = (CodeMirror, changeObj, value) => {if (!value) return;
    // 获取 CodeMirror.doc.getValue()
    // 赋值 CodeMirror.doc.setValue(value) // 会触发 onChange 事件，小心进入无线递归。
    const { onChange } = this.props;
    let obj = null;
    try { // 校验文件是否为 yaml
      obj = getYAMLJS.parse(value);
      onChange && onChange(obj, true); // 引用父级通过自定义的onChange()函数接收需要的数据
    } catch {
      message.error("请拖入 yaml 文件")
      CodeMirror.doc.setValue("")
    }
  };

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

export default CodeMirrorBox;

CodeMirror 事件

1.onChange(instance,changeObj)：codeMirror文本被修改后触发。instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是一个字符串数组表示被修改的文本内容，即你输入的内容。

2.onBeforeChange(instance,changObj):内容改变前被调用

3.onCursorActivity(instance)：当鼠标点击内容区、选中内容、修改内容时被触发

4.onKeyHandled:(instance,name,event):当一个都dom元素的事件触发时调用，name为操作名称。

5.onInputRead(insatance,changeObj):当一个新的input从隐藏的textara读取出时调用

6.onBeforeSelectionChange(instance,obj):当选中的区域被改变时调用，obj对象是选择的范围和改变的内容（本人未测试成功）

7.onUpdate(instance):编辑器内容被改变时触发

8.onFocus(instance):编辑器获得焦点式触发

9.onBlur(instance):编辑器失去焦点时触发

CodeMirror 常用方法

getValue():获取编辑器文本内容

setValue(text):设置编辑器文本内容

getRange({line,ch},{line,ch}):获取指定范围内的文本内容第一个对象是起始坐标，第二个是结束坐标

replaceRange(replaceStr,{line,ch},{line,ch}):替换指定区域的内容

getLine(line)：获取指定行的文本内容

lineCount():统计编辑器内容行数

firstLine():获取第一行行数，默认为0，从开始计数

lastLine():获取最后一行行数

getLineHandle(line):根据行号获取行句柄

getSelection():获取鼠标选中区域的代码

replaceSelection(str):替换选中区域的代码

setSelection({line:num,ch:num1},{line:num2,ch:num3}):设置一个区域被选中

somethingSelected()：判断是否被选择

getEditor()：获取CodeMirror对像

undo()：撤销

redo():回退