codemirror实现SQL代码自动提示功能

最新推荐文章于 2025-06-01 09:04:05 发布

原创最新推荐文章于 2025-06-01 09:04:05 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#codemirror

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

codemirror

1 篇文章

订阅专栏

本文介绍如何利用Codemirror实现SQL代码的自动提示功能，包括引入必要的CSS和JS文件，以及配置初始化 Codemirror 和设置数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用codemirror使用SQL代码能够自动提示如 PLSQL等工具一般智能提示功能，

1、引入show-hint.css，codemirror.css和主题样式如：

        <link href="codemirror-5.47.0/lib/codemirror.css"/>
	<link href="codemirror-5.47.0/theme/monokai.css"/>
	<link href="codemirror-5.47.0/theme/eclipse.css"/>
	<link href="codemirror-5.47.0/theme/idea.css"/>
	<link href="codemirror-5.47.0/addon/hint/show-hint.css"/>
	<link href="codemirror-5.47.0/addon/display/fullscreen.css"/>

2、引入codemirror.js、sql.js、show-hint.js、sql-hint.js

如：

	codemirror-5.47.0/lib/codemirror.js
	codemirror-5.47.0/mode/sql/sql.js
	codemirror-5.47.0/mode/clike/clike.js
	codemirror-5.47.0/addon/display/autorefresh.js
	codemirror-5.47.0/addon/edit/matchbrackets.js
	codemirror-5.47.0/addon/selection/active-line.js
	codemirror-5.47.0/addon/display/fullscreen.js
	codemirror-5.47.0/addon/hint/show-hint.js
	codemirror-5.47.0/addon/hint/sql-hint.js

3、设置初始化codemirror，并设置table和列数据源

/**
 * codemirror集成配置工具类 Created by 许畅 on 2019-05-27.
 *
 * codemirror代码配置：
 * <pre>
 * 	CodeMirror.resolveMode("text/x-sql").keywords["left join"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["left"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["right join"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["right"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["inner join"]=true
 *  CodeMirror.resolveMode("text/x-sql").keywords["inner"]=true
 *  CodeMirror.resolveMode("text/x-sql").keywords["when"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["FROM_DAYS(N)"]=true
 *	CodeMirror.resolveMode("text/x-sql").keywords["UPGRADE"]=true
 *	
 *	sqlCodeMirror = CodeMirror.fromTextArea(document.getElementById("sqlTest"),{
 *		  mode:  "text/x-sql",
 *		  theme :	"idea",
 *		  lineNumbers : true,
 *		  lineWrapping: true,
 *		  styleActiveLine: true,
 *		  matchBrackets: true,
 *		  autoRefresh : true,
 *	      extraKeys: {
 *	    	   "Alt-/": "autocomplete",
 *	    	   "F11": function(cm) {
 *	  	          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
 *	  	       },
 *	  	       "Esc": function(cm) {
 *	  	          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
 *	  	       }  
 *	      }, // To invoke the auto complete
 *		  hint: CodeMirror.hint.sql,
 *		  hintOptions: {
 *            tables: {
 *                "t_test_login": [ "col_a", "col_B", "col_C" ],
 *               "t_test_employee": [ "other_columns1", "other_columns2" ]
 *            }
 *         }
 *	 });
 *	sqlCodeMirror.setValue("select * from t_test_login where 1=1");
 *	
 *	sqlCodeMirror.on("change", function(editor, change) {
 *        if (change.origin == "+input"){
 *            var textArray = change.text;
 *            //不提示
 *            if(!ignoreInputCode(textArray)){
 *            	setTimeout(function() { editor.execCommand("autocomplete"); }, 100);
 *            }
 *        }
 *    });
 *  </pre>
 */

更新详细配置可参考其官方说明，可参照其demo说明。