当前位置：首页 > VUE

vue实现codemirror sql

2026-03-29 22:52:34VUE

安装依赖

在 Vue 项目中安装 codemirror 和相关插件：

npm install codemirror @codemirror/lang-sql

创建组件

新建一个 Vue 组件文件（如 SqlEditor.vue），引入必要的模块：

<template>
  <div ref="editor"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { sql } from '@codemirror/lang-sql'

export default {
  setup() {
    const editor = ref(null)

    onMounted(() => {
      new EditorView({
        doc: 'SELECT * FROM table',
        extensions: [basicSetup, sql()],
        parent: editor.value
      })
    })

    return { editor }
  }
}
</script>

配置 SQL 语言支持

通过 @codemirror/lang-sql 提供的 sql() 扩展启用 SQL 语法高亮和自动补全：

vue实现codemirror sql

import { sql } from '@codemirror/lang-sql'

// 可配置方言（如 MySQL、PostgreSQL）
const sqlDialect = sql({ dialect: 'standard' })

添加主题样式

引入 CodeMirror 的基础样式文件：

import 'codemirror/lib/codemirror.css'

自定义编辑器配置

扩展编辑器功能，例如设置行号、主题等：

vue实现codemirror sql

extensions: [
  basicSetup,
  sqlDialect,
  EditorView.lineWrapping,
  EditorView.theme({
    '&': { height: '300px' },
    '.cm-scroller': { overflow: 'auto' }
  })
]

处理编辑器内容

获取和设置编辑器内容的方法：

// 获取内容
const content = editor.state.doc.toString()

// 设置内容
editor.dispatch({
  changes: { from: 0, to: editor.state.doc.length, insert: 'NEW SQL QUERY' }
})

完整组件示例

整合所有功能的完整组件代码：

<template>
  <div ref="editor"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { sql } from '@codemirror/lang-sql'

export default {
  setup() {
    const editor = ref(null)

    onMounted(() => {
      new EditorView({
        doc: 'SELECT * FROM table',
        extensions: [
          basicSetup,
          sql({ dialect: 'standard' }),
          EditorView.lineWrapping,
          EditorView.theme({
            '&': { height: '300px', border: '1px solid #ddd' },
            '.cm-scroller': { overflow: 'auto' }
          })
        ],
        parent: editor.value
      })
    })

    return { editor }
  }
}
</script>

<style>
@import 'codemirror/lib/codemirror.css';
</style>