vue实现sql高亮,格式化,自动匹配大小写功能_vue sqlformatter

1.安装

sql-formatter选择低版本,高版本会出错

sql-formatter格式化  vue-codemirror文本框  vue-highlightjs高亮

npm install --save sql-formatter@2.3.3
npm install --save vue-codemirror 
npm install --save vue-highlightjs  

2.使用方式

封装的子组件SqlEditor

<template>
    <div>
        <textarea 
        	ref="mycode" 
        	class="codesql" 
        	v-model="value" 
        >
        </textarea>
    </div>
</template>
<script>
    import "codemirror/theme/ambiance.css";
    import "codemirror/lib/codemirror.css";
    import "codemirror/addon/hint/show-hint.css";
    let CodeMirror = require("codemirror/lib/codemirror");
    require("codemirror/addon/edit/matchbrackets");
    require("codemirror/addon/selection/active-line");
    require("codemirror/mode/sql/sql");
    require("codemirror/addon/hint/show-hint");
    require("codemirror/addon/hint/sql-hint");
    export default {
        data() {
            return {
                editor: null
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            sqlStyle: {
                type: String,
                default: 'default'
            },
            readOnly: {
                type: [Boolean, String]
            }
        },
        watch: {
            newVal (newV, oldV) {
                if (this.editor) {
                    this.$emit('changeTextarea', this.editor.getValue())
                }
            }
        },
        computed: {
            newVal () {
                if (this.editor) {
                    return this.editor.getValue()
                } else {
                    return ''
                }
            }
        },
        
        mounted(){
            let mime = 'text/x-mariadb'
            //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
                value: this.value,
                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets: true,
                cursorHeight: 1,
                lineWrapping: true,
                readOnly: this.readOnly,
                //theme: theme,
                // autofocus: true,
                extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
                hintOptions: {//自定义提示选项
                // 当匹配只有一项的时候是否自动补全
                    completeSingle: false,
                    // tables: {
                    //     users: ['name', 'score', 'birthDate'],
                    //     countries: ['name', 'population', 'size']
                    // }
                }
            })
            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
            this.editor.on('inputRead', () => {
                this.editor.showHint()
            })
        },
        methods: {
            setVal () {
                if (this.editor) {
                    if (this.value === '') {
                        this.editor.setValue('')
                    } else {
                        this.editor.setValue(this.value)
                    }
                    
                }
            }
        }
    }
</script>
<style>
.CodeMirror {
  color: black;
  direction: ltr;
  line-height: 22px;
}
// 这句为了解决匹配框显示有问题而加
.CodeMirror-hints{
  z-index: 9999 !important;
}
</style>

父组件调用

<template>
	<div>
		<SqlEditor ref="sqleditor"
		   :value="basicInfoForm.sqlMain"
		   @changeTextarea="changeTextarea($event)"
		/>
		<el-button type="primary" size="small" class="sql-btn" @click="formaterSql (basicInfoForm.sqlMain)">格式化sql</el-button>
	</div>
</template>
<script>
    import sqlFormatter from 'sql-formatter'
    import SqlEditor from '@/components/SqlEditor'
	export default {
        components: {
            SqlEditor
        },
        data() {
	        return{
	        	basicInfoForm:{
	        		sqlMain: ''
				}
			}
		},
        methods:{
        	changeTextarea (val){
        	   this.$set(this.basicInfoForm, 'sqlMain', val)
        	},
        	formaterSql (val) {
                let dom = this.$refs.sqleditor
                dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
           },
        },
     }
</script>

支持格式：sql、pl/sql、n1ql、db2、

功能是完成了 ，但是sql-formatter插件格式化出来的效果和我们想要的格式还是有差距，一些复杂的sql校验和HUE并不能完全匹配，甚至后台校验大部分都不能通过。想想也只能改源码了，找到sql-formatter的源码，进行了一些源码修改，最终搞定。

网上看到过很多只实现了格式化功能或者只实现了高亮、大小写匹配功能，没有三者同时实现的，代码和思路不太符合我的需要，并且几乎每个人的版本都是复制粘贴的一模一样的内容，今天我附上自己纯手敲齐全代码，欢迎参考点赞~

GitHub地址：https://github.com/mijing-web/sql-editor

转载自:

前端vue项目中使用sql-formatter结合codemirror实现sql编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能_Mini_小仙女的博客-CSDN博客https://blog.csdn.net/weixin_45851208/article/details/105118847如果你觉得本文对你有帮助，欢迎转载和点赞，转载麻烦请注明出处，谢谢~~~~ ^ _ ^ ~~~