react-codemirror2 代码编辑器

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/

安装：

npm install react-codemirror2 codemirror --save

使用：

import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// 主题风格
import 'codemirror/theme/solarized.css';
// 设置代码语言模式（比如JS，SQL，python，java等）
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/shell/shell.js';
import 'codemirror/mode/clike/clike.js';
// 代码模式，clike是包含java,c++等模式的
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/css/css';
//ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/anyword-hint.js'; // end
//代码高亮
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';

function ScriptTask() {
    const [instance, setInstance] = useState(null);
    const [codeData, setCodeData] = useState('');
    
    return (
        <CodeMirror
          editorDidMount={(editor) => {
              setInstance(editor);
          }}
          value={codeData}
          options={{
              // mode: { name: 'text/sql' }, //定义mode
              mode: 'sql', //定义mode
              theme: 'solarized', //选中的theme
              autofocus: true, //自动获取焦点
              styleActiveLine: true, //光标代码高亮
              lineNumbers: true, //显示行号
              smartIndent: true, //自动缩进
              //start-设置支持代码折叠
              lineWrapping: true,
              foldGutter: true,
              gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], //end
              extraKeys: {
                  Ctrl: 'autocomplete',
                  'Ctrl-S': function(editor) {
                      this.codeSave(editor);
                  },
                  'Ctrl-Z': function(editor) {
                      editor.undo();
                  }, //undo
                  F8: function(editor) {
                      editor.redo();
                  } //Redo
              },
              matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
              autoCloseBrackets: true //键入时将自动关闭()[]{}''""
          }}
          // onChange={changeCode}

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

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

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