Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DiscoverForever/monaco-sqlpad
基于monaco-editor的sql编辑器，支持sql语法联想、高亮。
https://github.com/DiscoverForever/monaco-sqlpad
Last synced: 3 months ago
JSON representation
基于monaco-editor的sql编辑器，支持sql语法联想、高亮。
- Host: GitHub
- URL: https://github.com/DiscoverForever/monaco-sqlpad
- Owner: DiscoverForever
- Created: 2019-06-06T08:00:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T18:57:57.000Z (8 months ago)
- Last Synced: 2024-06-20T09:30:59.201Z (5 months ago)
- Language: JavaScript
- Size: 10.4 MB
- Stars: 95
- Watchers: 2
- Forks: 37
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - monaco-sqlpad - editor的sql编辑器，支持sql语法联想、高亮。 | DiscoverForever | 87 | (JavaScript)
README
### monaco-sqlpad
#### 基于微软vscode开源的monaco-editor的sql编辑器，支持SQL语法高亮、提示，支持表名、字段提示
### 示例
### 安装
```bash
npm i monaco-sqlpad --save
```
### webpack配置
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [new CopyWebpackPlugin(
{
patterns: [
{
context: 'node_modules/monaco-sqlpad/dist/',
from: '*.umd.min.*.js',
to: 'js/',
toType: 'dir'
},
{
from: 'node_modules/monaco-sqlpad/dist/editor.worker.js',
to: 'editor.worker.js',
toType: 'file'
},
{
context: 'node_modules/monaco-sqlpad/dist/',
from: 'fonts',
to: 'js/fonts',
toType: 'dir'
}
]
}
)]
}
}
```
[为何需要配置webpack?](https://www.jianshu.com/p/033713c39ef9)
### 使用
```javascript
import MonacoSqlpad from 'monaco-sqlpad'
export default {
data() {
return {
content: null,
dbs: []
}
},
components: {
MonacoSqlpad
},
async mounted() {
// 初始化数据库及表信息用于编辑器提示数据库和表
this.dbs = await this.getDbList()
},
methods: {
/
* 当用户需要输入表字段时回调方法
* @return { Array } 表格字段数组
*/
async onInputField() {
const fields = await this.getTableCloumn()
return fields
},
/**
* 模拟异步获取数据库名&&表名
*/
getDbList() {
return new Promise((resolve, reject) => {
resolve([
{
dbName: 'db_bar',
tables: [
{
tblName: 'user',
tableColumns: [
{
fieldName: 'username'
}
]
},
{
tblName: 'log',
tableColumns: []
},
{
tblName: 'goods',
tableColumns: []
}
]
},
{
dbName: 'db_foo',
tables: [
{
tblName: 'price',
tableColumns: []
},
{
tblName: 'time',
tableColumns: []
},
{
tblName: 'updata_user',
tableColumns: []
}
]
}
])
})
},
/**
* 模拟异步获取表字段
*/
getTableCloumn() {
return new Promise((resolve, reject) => {
resolve(['username', 'password'])
})
}
}
}
```
## future
future |
---------|
单元测试 |
Event配置 |
Option配置 |
SQL解析优化 目前使用正则匹配表名和字段|