SQL编辑器

import React, { useState } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.js";
import "codemirror/lib/codemirror.css";
// 主题风格 // 与下面的option 要对应
import "codemirror/theme/mdn-like.css";
// 设置代码语言模式
import "codemirror/mode/sql/sql.js";
// 代码模式
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/sql-hint";
// 滚动条样式
import "codemirror/addon/scroll/simplescrollbars";
import "codemirror/addon/scroll/simplescrollbars.css";
// 自动光标旁边的括号都高亮显示
import "codemirror/addon/edit/matchbrackets";
// 自动补全括号
import "codemirror/addon/edit/closebrackets";

// 代码高亮
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 { sql } from "./const";

function CodeEditer() {
  const [codeData, setCodeData] = useState(sql);

  return (
    <div>
      <CodeMirror
        value={codeData}
        options={{
          mode: "sql", //定义mode
          theme: "mdn-like", //选中的theme
          autofocus: true, //自动获取焦点
          styleActiveLine: true, //光标代码高亮
          lineNumbers: true, //显示行号
          smartIndent: true, //自动缩进
          //start-设置支持代码折叠
          lineWrapping: true,
          foldGutter: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //end
          extraKeys: {
            Tab: "autocomplete",
            "Ctrl-Z": function (editor) {
              editor.undo();
            }, //undo
          },

          matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
          autoCloseBrackets: true, //键入时将自动关闭()[]{}''""
          scrollbarStyle: "overlay",
          // readOnly: true,
        }}
        onChange={(edit: any, data: any, value) => {
          console.log(edit, data, value);
        }}
        onBeforeChange={(e, a, d) => {
          setCodeData(d);
        }}
        //在失去焦点的时候触发，这个时候放数据最好
        onBlur={() => {}}
      />
    </div>
  );
}

export default CodeEditer;