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