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

使用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.jscodemirror-5.47.0/mode/sql/sql.jscodemirror-5.47.0/mode/clike/clike.jscodemirror-5.47.0/addon/display/autorefresh.jscodemirror-5.47.0/addon/edit/matchbrackets.jscodemirror-5.47.0/addon/selection/active-line.jscodemirror-5.47.0/addon/display/fullscreen.jscodemirror-5.47.0/addon/hint/show-hint.jscodemirror-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说明。

codemirror实现SQL代码自动提示功能相关推荐

java培训教程分享：Java编写软件代码自动提示功能
本期的java培训教程分享主要是介绍的java编写软件代码的一个自动提示功能,很多零基础和初学java的同学们对这一块还不是很了解,Eclipse for android 实现代码自动提示智能提示功能 ...
[转]Android 代码自动提示功能
源地址http://blog.sina.com.cn/s/blog_7dbac12501019mbh.html 或者http://blog.csdn.net/longvslove/article/de ...
Eclipse输入Java和XML代码自动提示功能最简单的方法
Eclipse输入Java和XML代码自动提示功能 1.设置 java 文件的代码提示功能打开 Eclipse 依次选择 Window > Preferences > Java > ...
怎样增强MyEclipse的代码自动提示功能
转载自怎样增强MyEclipse的代码自动提示功能 MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大一般在Eclipse ,MyE ...
idea没有代码自动提示功能和包自动引入不了问题
idea没有代码自动提示功能和包自动引入不了问题原因:节电模式 File -> Power Save Mode (被勾选了) 处理方法: File -> Power Save Mode ...
eclipse代码自动提示设置、如何配置eclipse的代码自动提示功能（同时解决自动补全变量名的问题）?
eclipse代码自动提示设置.如何配置eclipse的代码自动提示功能(同时解决自动补全变量名的问题)? 参考文章: (1)eclipse代码自动提示设置.如何配置eclipse的代码自动提示功能( ...
解决 PhpStorm 对用单例模式实例化PHP类时，代码自动提示功能失效的问题
大部分PHP框架中,为了防止一个类被重复实例化,往往采用"单例模式"实例化类.我们的项目框架是这样做的: 先写好一个基类 /framework/Base.class.php,内容如 ...
eclipse中设置java、xml文件的字体大小以及代码自动提示功能
设置字体大小: 在菜单windows-->prefereces里面,找到General-->Appearance-->Colors and Fonts, 设置xml文件字体大小:找B ...
java设置代码自动提示_eclipse代码自动提示设置、如何配置eclipse的代码自动提示功能?...
对于编程人员来说,要记住大量的类名或类方法的名字,着实不是一件容易的事情.如果要IDE能够自动补全代码,那将为我们编程人员带来很大帮助. EcliPSe代码里面的代码提示功能默认是关闭的,只有输入&q ...
Eclips写Java代码和CSS、Javascript、Html代码设置代码自动提示功能
按照我的方法设置后用Eclipse编写Java代码和前端代码(Html.CSS.JS)都可以自动提示代码.赶紧去试试吧. 1.打开Eclipse软件,点击Windows→Preferences→Jav ...

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

codemirror实现SQL代码自动提示功能相关推荐

最新文章

热门文章