React使用CodeMirror实现SQL输入提示编辑器

今天老大让我把原来的SQL编辑器放到新的平台上,然后我对照原来的编辑器,然后再修改了一下,形成了一个全新的SQL输入提示编辑器,先上图看看效果,然后再详细讲解怎么实现

一、编辑器效果

1.1 关键词提示效果图

1.2 数据库和表格选择提示效果

二、具体实现

我们的项目主要用到了React+CodeMirror组件,在实例化的的editor对象中,每输入一个词,再弹出相对应的自动选择提示框,有两种方式,第一种方式用到了CodeMirror2插件,第二种方式,直接用原生的CodeMirror编辑器,然后再修改一下,我们这里用到的第二种方式多了一个功能,就是在编辑器中输入分号( ; )时,不要提示,但是第一种方法没办法配置,如果各位大佬实现了的,可以给我留言,告诉我怎么解决,接下来解析一下两种方案的实现

2.1 依赖下载

yarn add codemirror
yarn add react-codemirror2	//第二种方案没有用到这个依赖

2.2 方案一

import React from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/shell/shell';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/hint/show-hint.css'; // 用来做代码提示
import 'codemirror/addon/hint/show-hint.js'; // 用来做代码提示
import 'codemirror/addon/hint/sql-hint.js'; // 用来做代码提示

export default class SqlConsole extends React.Component {

    state = {};
    static defaultProps = {
        options: {
            mode: 'text/x-mysql',
            lineNumbers: true,
            styleActiveLine: true,
            cursorHeight: 1,
            autofocus: true,
            extraKeys: {
            }
        }
    }

    render() {
        const { options } = this.props;
        return (<div style={{ width: '100%', height: '100%', fontSize: '16px' }}>
            <CodeMirror
                value="select * from word"
                options={options}
                onInputRead={(editor, change) => {
//库和表名显示,一般是库名中包含一个表名数组,但是要在第一级显示,也需要把表名加进去
                 var data = { test: ['t_user', 'menu', 'auth_info'], t_user: [], menu: [''], default: ['tableinfo'] };
                    editor.setOption('hintOptions', {
                        tables: data,
                        completeSingle: false
                    });
                    editor.execCommand('autocomplete');
                }}
            />
        </div>
        );
    }
}

2.3 方案二

import React from 'react';
import codemirror from 'codemirror';
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/shell/shell';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/hint/show-hint.css'; // 用来做代码提示
import 'codemirror/addon/hint/show-hint.js'; // 用来做代码提示
import 'codemirror/addon/hint/sql-hint.js'; // 用来做代码提示
import 'codemirror/theme/3024-day.css'

export default class SqlConsole1 extends React.Component {

    editor = null;
    componentDidMount() {
        this.editor = codemirror(this.ref, {
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            autofocus: true,
            extraKeys: {
                "';'": this.completeAfter   //添加;号监听
            },
            hintOptions: { completeSingle: false },
            lineWrapping: true,//在长行时文字是换行(wrap)还是滚动(scroll),默认为滚动(scroll)。
            mode: 'text/x-mysql',
            value: 'select * from word'
        });

        this.editor.on('inputRead', (editor, change) => {
           var data = { test: ['t_user', 'menu', 'auth_info'], t_user: [], menu: [''], default: ['tableinfo'] };
            editor.setOption('hintOptions', {
                tables: data,
                completeSingle: false
            });
            editor.execCommand('autocomplete');
        });
    }

    completeAfter = (editor) => {
        var spaces = Array(editor.getOption("indentUnit")).join(";");//分号;监听执行完后,就不会再执行inputRead输入监听了
        editor.replaceSelection(spaces);
    }

    render() {
        return (<div ref={(self) => { this.ref = self; }} style={{ width: '100%', height: '100%', fontSize: '16px' }}></div>);
    }
}

以上就是两种方案的实现效果,方案二比方案一多了一个功能,就是用户在一行后面输入份好,不需要提示的时候,可以灵活控制取消功能

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值