codeMirror支持sql输入提示

妖狐艹你老母 2022-06-10 08:58 545阅读 0赞

### codeMirror 是一款非常不错的在线代码编辑插件。现在简单介绍对sql编辑的支持。 ###

1.  初始化

(function (){ 
                window.top._editor = CodeMirror.fromTextArea($("#codeTypeArea")[0], {
                    mode: 'text/x-sql',
                    indentWithTabs: true,
                    smartIndent: true,
                    lineNumbers: true,
                    matchBrackets: true,
                    autofocus: false,
                    styleSelectedText: true,
                    extraKeys: {
                        "'a'": completeAfter,
                         "'b'": completeAfter,
                         "'c'": completeAfter,
                         "'d'": completeAfter,
                         "'e'": completeAfter,
                         "'f'": completeAfter,
                         "'g'": completeAfter,
                         "'h'": completeAfter,
                         "'i'": completeAfter,
                         "'j'": completeAfter,
                         "'k'": completeAfter,
                         "'l'": completeAfter,
                         "'m'": completeAfter,
                         "'n'": completeAfter,
                         "'o'": completeAfter,
                         "'p'": completeAfter,
                         "'q'": completeAfter,
                         "'r'": completeAfter,
                         "'s'": completeAfter,
                         "'t'": completeAfter,
                         "'u'": completeAfter,
                         "'v'": completeAfter,
                         "'w'": completeAfter,
                         "'x'": completeAfter,
                         "'y'": completeAfter,
                         "'z'": completeAfter,
                         "'.'": completeAfter,
                        "'='": completeIfInTag,
                        // ,
                        // "Ctrl-Space": "autocomplete",
                        "Ctrl-Enter": "autocomplete",
    
                        Tab: function(cm) { 
                            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
                            cm.replaceSelection(spaces);
                        }
                    }
                });
                function completeIfInTag(cm) { 
                    return completeAfter(cm, function() { 
                        var tok = cm.getTokenAt(cm.getCursor());
                        if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
                        var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
                        return inner.tagName;
                    });
                }
                function completeAfter(cm, pred) { 
                    var cur = cm.getCursor();
                    if (!pred || pred()) setTimeout(function() { 
                        if (!cm.state.completionActive)
                            cm.showHint({
                                completeSingle: false
                            });
                    }, 100);
                    return CodeMirror.Pass;
                }
                window.top._editor.on('change', function() { 
    
                });
                window.top._editor.setSize("100%",110);
                window.top._editor.refresh();//动态设置或浏览器变动后保证editor的正确显示
    
            })()

*  mode：对某种语言的支持，我们这里选择SQL。更多语言支持参考[官网][Link 1]
 *  文件引入：codemirror.js、placeholder.js、sql.js、show-hint.js、sql-hint.js、show-hint.css、codemirror.css。主框架（codemirror.js）需最先引入。
 *  试试吧！
 *  配置信息[官网][Link 2]很全。

[Link 1]: http://codemirror.net/mode/index.html
[Link 2]: http://codemirror.net/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，545人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+el-dialog中使用codemirror遇到的问题，没有代码提示了

![be81802493d1468397aeb187ae0b2fd6.png][] 问题一：在el-dialog弹框中使用codemirror,代码提示框不出现解决方

﹏ヽ暗。殇╰゛Y/ 2023年10月09日 23:38/ 0 赞/ 16 阅读

相关 vue-codemirror 基于 Codemirror，适用于 Vue 的 Web 代码编辑器。

Codemirror官网：[https://codemirror.net/][https_codemirror.net] vue-codemirror官网：[https://

小咪咪/ 2023年06月16日 15:52/ 0 赞/ 25 阅读

相关 codemirror焦点_CodeMirror：将焦点设置在行尾

codemirror焦点 CodeMirror is a WYSIWYG-like editor that allows for rich text editing on a

古城微笑少年丶/ 2023年02月22日 03:34/ 0 赞/ 9 阅读

相关 php ajax输入提示,ajax怎么实现提示输入信息的功能

这次给大家带来ajax怎么实现提示输入信息的功能，ajax实现提示输入信息功能的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家分享了ajax实现输入提示效果

布满荆棘的人生/ 2023年01月17日 15:49/ 0 赞/ 166 阅读

相关 codemirror 光标定位_在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）...

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1、使用npm安装依赖 npm install --save codemirror;

清疚/ 2023年01月10日 03:49/ 0 赞/ 255 阅读

相关 vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句

需求：实现一个SQL编辑区，通过左侧选择自动生成SQL语句。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

拼搏现实的明天。/ 2022年10月07日 10:52/ 0 赞/ 923 阅读

相关 codeMirror支持sql输入提示

codeMirror 是一款非常不错的在线代码编辑插件。现在简单介绍对sql编辑的支持。 1. 初始化 (function (){

妖狐艹你老母/ 2022年06月10日 08:58/ 0 赞/ 546 阅读

相关 CodeMirror使用小结

CodeMirror可以在线编辑代码，风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全，代码折叠，可配置键盘事件，

拼搏现实的明天。/ 2022年05月14日 01:35/ 0 赞/ 526 阅读

相关 jQuery 邮箱提示输入

1。jQuery代码 / Created by qqg on 2017/12/5. / (function($){ $.fn.exte

傷城~/ 2021年09月26日 09:12/ 0 赞/ 499 阅读

相关 codeMirror配置

介绍 `CodeMirror`是一款在线的支持语法高亮的代码编辑器。官网：http://codemirror.net/ 下载后，解压开到的文件夹中，`lib`下是放的是

今天药忘吃喽~/ 2021年07月04日 17:44/ 0 赞/ 550 阅读