react-codemirror-sql格式化高亮关键字教程

荔枝味大鹅

已于 2024-09-10 16:59:42 修改

阅读量999

点赞数 25

文章标签： react.js 前端 vue.js

于 2024-09-04 10:10:52 首次发布

本文链接：https://blog.csdn.net/weixin_47424249/article/details/141884561

版权

格式化sql，高亮显示关键字

// 在线代码编辑器

pnpm install codemirror@5.62.3

pnpm install react-codemirror@1.0.0
pnpm install @types/react-codemirror@1.0.8

// sql格式化

pnpm install sql-formatter

引入

//格式化sql
import * as sqlFormatter from 'sql-formatter';

import 'codemirror/lib/codemirror.css';
import CodeMirror from 'react-codemirror';

// import {UnControlled as CodeMirror} from 'react-codemirror2';
//主题
import 'codemirror/theme/solarized.css';
import 'codemirror/theme/ttcn.css'; // material
// 折叠代码
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/indent-fold.js';

// 代码提示
import 'codemirror/addon/hint/anyword-hint.js'; // 简单提示，按需引入，spl可引入sql-hint.js
import 'codemirror/addon/hint/show-hint.css'; //
import 'codemirror/addon/hint/show-hint.js';

import 'codemirror/addon/comment/comment.js';
// 高亮
import 'codemirror/addon/selection/active-line.js';

// python语言
import 'codemirror/mode/python/python.js';
// sql语言
import 'codemirror/mode/sql/sql.js';

// 括号匹配
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/hint/show-hint.css'; // 用来做代码提示
import 'codemirror/addon/hint/show-hint.js'; // 用来做代码提示
import 'codemirror/addon/hint/sql-hint.js'; // 用来做代码提示

import 'codemirror/addon/lint/lint.js';

import 'codemirror/addon/lint/javascript-lint.js';

// 解决编辑器需点击一下或者延时才显示数据的问题（和autoRefresh: true组合使用）
import 'codeMirror/addon/display/autorefresh';

dom

const options = {
  theme: 'ttcn', //主题
  lineNumbers: true, //显示行号
  firstLineNumber: 1, //行号从几开始，默认1
  lineWrapping: true, //滚动或换行
  tabSize: 4, //tab键缩进,默认4
  smartIndent: true, // 智能缩进
  indentUnit: 2, // 智能缩进单位为2个空格长度
  indentWithTabs: true, // 使用制表符进行智能缩进
  autofocus: true, //自动获取焦点
  autoRefresh: true,
  // 在行槽中添加行号显示器、折叠器、语法检测器
  gutters: [
    'CodeMirror-linenumbers',
    'CodeMirror-foldgutter',
    'CodeMirror-lint-markers',
  ],
  foldGutter: false, // 启用行槽中的代码折叠
  mode: 'text/x-sql', // 要使用的模式//https://codemirror.net/mode/
  styleActiveLine: true, // 显示选中行的样式
  matchBrackets: true, //括号匹配
  autoCloseBrackets: true, //括号自动补全，()[]{}''""
  hintOptions: {
    completeSingle: false, //代码自动补全功能不默认补充
  },
}

<CodeMirror
  ref={this.editorRef1}
  value={busiSql}
  // 设置CodeMirror标签的相关参数
  options={options}
  // 编译器内容变化后，输出变化后的内容
  onChange={(code) => {
    this.codeChange?.(code);
  }}
/>

实现点击格式化按钮，在codemirror中将复制进来的sql格式化

使用setValue()赋值，直接改变value值是不生效的，value是文本框打开的默认值，双向绑定是不行的
handleFormatSql(){
  this.setState({busiSql:sqlFormatter.format(this.state.sqlValue)});
  const editor =this.editorRef1.current.getCodeMirror();
  editor.setValue(sqlFormatter.format(this.state.sqlValue))
}

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

截图

关于sql-formatter：

占位符是无法解析的，会报错哦

后端使用的$占位符会被解析为关键字从而无法实现格式化功能

可以try-catch进行错误信息提示
try {
  const formattedSQL = sqlFormatter.format(formInfo.details_sql);
  // 正常处理formattedSQL
  _this.setState({showGlbSqlEdit:true});
  let sql = sqlFormatter.format(formInfo.details_sql);
  _this.setState({glbSql:sql});
  _this.setState({sqlValue:sql});
} catch (error) {
  message.error(`SQL格式化错误${error}`);
}