import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql'; 
...
// 引入自動(dòng)刷新
import 'codemirror/addon/display/autorefresh'
<CodeMirror 
    value={format(code,{lanuage:'plsql'})} 
    options={
        autoRefresh: true, // 重點(diǎn)是這句，為true
        scrollbarStyle: null,
        mode: 'text/x-pgsql',
        theme: 'material',
        autofocus: false,
        readOnly: false,
        lineNumbers: true, 
        smartIndent: true,
        lint: true,
        lintWrapping: true
   } 
    onChange={(editor,data,value)=>{...}}
>
</CodeMirror>

npm install react-codemirror2 codemirror --save

import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// 主題風(fēng)格
import 'codemirror/theme/solarized.css';
// 設(shè)置代碼語(yǔ)言模式（比如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+空格代碼提示補(bǔ)全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代碼提示補(bǔ)全
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, //自動(dòng)獲取焦點(diǎn)
              styleActiveLine: true, //光標(biāo)代碼高亮
              lineNumbers: true, //顯示行號(hào)
              smartIndent: true, //自動(dòng)縮進(jìn)
              //start-設(shè)置支持代碼折疊
              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, //括號(hào)匹配，光標(biāo)旁邊的括號(hào)都高亮顯示
              autoCloseBrackets: true //鍵入時(shí)將自動(dòng)關(guān)閉()[]{}''""
          }}
          // onChange={changeCode}
          // 在失去焦點(diǎn)的時(shí)候觸發(fā)，這個(gè)時(shí)候放數(shù)據(jù)最好
          // onBlur={this.codeOnBlur}
          // 這個(gè)必須加上，否則在一些情況下，第二次打開就會(huì)有問(wèn)題
          //     onBeforeChange={(editor, data, value) => {
          //       console.log("onBeforeChange fresh")
          //       console.log(JSON.stringify(data));
          //     }}
      />
    )
}