Vue3下Codemirror使用

codemirror的使用基于vue-codemirror，随着新版本的发布，底层基于的codemirror版本也更新为CodeMirror@6，用法也发生了相应变化

安装依赖

yarn add codemirror vue-codemirror

页面引入

<template>
	<div class="layout">
		<el-card style="width: 50%;">
			<codemirror v-model="SQLCommand" :extensions="extensions" :autofocus="true" placeholder="请输入SQL" />
		</el-card>
	</div>
</template>
<script>
import { SQL } from '@/constants/sql.js'
import { sql } from '@codemirror/lang-sql'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
export default {
	name: 'SQLEditor',
	components: {
		Codemirror
	},
	data() {
		return {
			SQLCommand: SQL,
			extensions: [sql(), oneDark]
		};
	},
	methods: {
	}
};
</script>
<style lang="scss">
.cm-editor {
	width: 100%;
	height: 460px;
}

.cm-focused {
	outline: none !important;
}
</style>

主题

目前官方除了默认主题外，仅提供了theme-one-dark这一个主题。这是额外拆分的包，需要单独安装

npm i @codemirror/theme-one-dark

宽高设置

目前已经去除了原有的setSize API，转而使用class来定义样式

No. You’ll have to use CSS to size the editor (and may need to call requestMeasure after to make sure the editor notices its layout changed).

可设置样式的内容，官网也给出了示例

<div class="cm-editor [cm-focused] [generated classes]">
  <div class="cm-scroller">
    <div class="cm-gutters">
      <div class="cm-gutter [...]">
        <!-- One gutter element for each line -->
        <div class="cm-gutterElement">...</div>
      </div>
    </div>
    <div class="cm-content" contenteditable="true">
      <!-- The actual document content -->
      <div class="cm-line">Content goes here</div>
      <div class="cm-line">...</div>
    </div>
    <div class="cm-selectionLayer">
      <!-- Positioned rectangles to draw the selection -->
      <div class="cm-selectionBackground"></div>
    </div>
    <div class="cm-cursorLayer">
      <!-- Positioned elements to draw cursors -->
      <div class="cm-cursor"></div>
    </div>
  </div>
</div>

语言支持

额外安装支持SQL的插件，基本使用方式参考页面引入，更多使用方式参考官网文档

npm i @codemirror/lang-sql

输入提示

基础的类似select、from等的提示插件已经给出，但是要结合当前库元数据进行输入提示，需要自己额外自定义SQL parser以识别当前输入的上下文

示例代码

一个可当做demo的示例代码：sqleditor_vue3