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 语言 大家可以自行引入 javascript java c++ sql 等 参考官网）
import 'codemirror/mode/yaml/yaml';
// import "codemirror/mode/clike/clike"; // clike 是包含 java c++ 等模式的
// import "codemirror/mode/css/css
// ...

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

//ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/anyword-hint.js';
//代码高亮
import 'codemirror/addon/selection/active-line';
//折叠代码
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/edit/closebrackets';


// 引入 yamljs 先安装 npm i 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={{
          // smartIndent:true,  //自动缩进
          // styleActiveLine:true,//光标代码高亮
          // autofocus:true,//自动获取焦点
          // readOnly: true, // 只读
          // matchBrackets: true,  //括号匹配，光标旁边的括号都高亮显示
          // autoCloseBrackets: true, //键入时将自动关闭()[]{}''""
          lineNumbers: true, // 显示行号
          theme: 'ambiance', // 设置主题
          mode: {
            name: 'text/x-yaml', // "text/css" ...
            // name: "javascript", // 没错，需要先引入 javascript
            // json: true
          },

          // (以下三行)设置支持代码折叠
          // lineWrapping:true,
          // foldGutter:true,
          // gutters:['CodeMirror-linenumbers','CodeMirror-foldgutter'],

          // 还不清楚是什么
          // extraKeys: {
          //   "Ctrl": "autocomplete",
          //   "Ctrl-S": function (editor) {
          //     that.codeSave(editor)
          //   },
          //   "Ctrl-Z": function (editor) {
          //     editor.undo();
          //   },//undo
          //   "F8": function (editor) {
          //     editor.redo();
          //   },//Redo
          // }
        }}
        onChange={this.changeCode}

      // 在失去焦点的时候触发，这个时候放数据最好
      // onBlur={this.codeOnBlur}

      // 这个有必要加上，否则在一些情况下，第二次打开就会有问题
      // onBeforeChange={(editor, data, value) => {
      //   console.log("onBeforeChange fresh")
      //   console.log(JSON.stringify(data));
      // }}
      />
    );
  }
}

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():回退