Monaco Editor开发SQL代码提示编辑器实例详解

Monaco Editor开发SQL编辑器 Monaco Editor代码提示 2022-11-13 14:11:25 545人浏览安东尼

摘要

目录安装简易 sql 编辑器相关功能获取选中代码替换选中代码处理光标位置自定义 SQL 库表提示，并保留原有 SQL 提示编辑器 resize编辑器设置主题SQL 代码格式化右键菜单

安装

安装依赖,这里请注意版本

yarn add monaco-editor@0.29.1
yarn add monaco-editor-webpack-plugin@5.0.0

配置 WEBpack 插件

// Vue.config.js
...
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.export = {
  ...
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    plugins: [new MonacoWebpackPlugin()],
  },
  ...
}

请注意 monaco-editor-webpack-plugin 和 monaco-editor 的对应关系,否则可能会出现无法运行的情况。

monaco-editor-webpack-plugin	monaco-editor
7..	>= 0.31.0
6..	0.30.*
5..	0.29.*
4..	0.25., 0.26., 0.27., 0.28.
3..	0.22., 0.23., 0.24.*
2..	0.21.*
1.9.*	0.20.*
1.8.*	0.19.*
1.7.*	0.18.*

简易 SQL 编辑器

先上干货！

<template>
  <div ref="codeContainer" class="editor-container" :style="{ height: height + 'px' }" />
</template>
<script>
import * as monaco from 'monaco-editor'

export default {
  name: 'MonacoEditor',
  props: {
    initValue: {
      type: String,
      default: '',
    },
    readOnly: Boolean,
    language: {
      type: String,
      default: 'sql',
    },
    height: {
      type: Number,
      default: 300,
    },
    theme: {
      type: String,
      default: 'vs',
    },
  },
  data() {
    return {
      monacoEditor: null, // 语言编辑器
    }
  },
  computed: {
    inputVal() {
      return this.monacoEditor?.getValue()
    },
  },
  watch: {
    inputVal() {
      if (this.monacoEditor) {
        this.$emit('change', this.monacoEditor.getValue())
      }
    },
    theme() {
      this.setTheme(this.theme)
    },
    height() {
      this.layout()
    },
  },
  mounted() {
    this.initEditor()
  },
  beforeDestroy() {
    if (this.monacoEditor) {
      this.monacoEditor.dispose()
    }
  },
  methods: {
    initEditor() {
      if (this.$refs.codeContainer) {
        this.reGISterCompletion()
        // 初始化编辑器，确保dom已经渲染
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
          value: '', // 编辑器初始显示文字
          language: 'sql', // 语言
          readOnly: this.readOnly, // 是否只读 Defaults to false | true
          automaticLayout: true, // 自动布局
          theme: this.theme, // 官方自带三种主题vs, hc-black, or vs-dark
          minimap: {
            // 关闭小地图
            enabled: false,
          },
          tabSize: 2, // tab缩进长度
        })
      }
      this.setInitValue()
    },
    focus() {
      this.monacoEditor.focus()
    },
    layout() {
      this.monacoEditor.layout()
    },
    getValue() {
      return this.monacoEditor.getValue()
    },
    // 将 initValue Property 同步到编辑器中
    setInitValue() {
      this.monacoEditor.setValue(this.initValue)
    },
    setTheme() {
      monaco.editor.setTheme(this.theme)
    },
    getSelectionVal() {
      const selection = this.monacoEditor.getSelection() // 获取光标选中的值
      const { startLineNumber, endLineNumber, startColumn, endColumn } = selection
      const model = this.monacoEditor.getModel()
      return model.getValueInRange({
        startLineNumber,
        startColumn,
        endLineNumber,
        endColumn,
      })
    },
    setPosition(column, lineNumber) {
      this.monacoEditor.setPosition({ column, lineNumber })
    },
    getPosition() {
      return this.monacoEditor.getPosition()
    },
  },
}
</script>
<style lang="sCSS" scoped></style>

相关功能

获取选中代码

    getSelectionVal() {
      const selection = this.monacoEditor.getSelection() // 获取光标选中的值
      const { startLineNumber, endLineNumber, startColumn, endColumn } = selection
      const model = this.monacoEditor.getModel()
      return model.getValueInRange({
        startLineNumber,
        startColumn,
        endLineNumber,
        endColumn,
      })
    },

替换选中代码

insertStringInTemplate(str) {
      const selection = this.monacoEditor.getSelection() // 获取光标选中的值
      const { startLineNumber, endLineNumber, startColumn, endColumn } = selection
      const model = this.monacoEditor.getModel()
      const textBeforeSelection = model.getValueInRange({
        startLineNumber: 1,
        startColumn: 0,
        endLineNumber: startLineNumber,
        endColumn: startColumn,
      })
      const textAfterSelection = model.getValueInRange({
        startLineNumber: endLineNumber,
        startColumn: endColumn,
        endLineNumber: model.getLineCount(),
        endColumn: model.getLineMaxColumn(model.getLineCount()),
      })
      this.monacoEditor.setValue(textBeforeSelection + str + textAfterSelection)
      this.monacoEditor.focus()
      this.monacoEditor.setPosition({
        lineNumber: startLineNumber,
        column: startColumn + str.length,
      })
    },

处理光标位置

  setPosition(column, lineNumber) {
      this.monacoEditor.setPosition({ column, lineNumber })
    },
    getPosition() {
      return this.monacoEditor.getPosition()
    },

自定义 SQL 库表提示，并保留原有 SQL 提示

首先由后端提供具体的库表信息：

export const hintData = {
  adbs: ['dim_realtime_recharge_paycfg_range', 'dim_realtime_recharge_range'],
  dimi: ['ads_adid', 'ads_spec_adid_cateGory'],
}

然后根据已有库表信息进行自定义 AutoComplete

import * as monaco from 'monaco-editor'
import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql'
const { keyWords } = language
export default {
  ...
  mounted() {
    this.initEditor()
  },
  methods: {
    ...
    registerCompletion() {
      const _that = this
      monaco.languages.registerCompletionItemProvider('sql', {
        triggerCharacters: ['.', ...keywords],
        provideCompletionItems: (model, position) => {
          let suggestions = []
          const { lineNumber, column } = position
          const textBeforePointer = model.getValueInRange({
            startLineNumber: lineNumber,
            startColumn: 0,
            endLineNumber: lineNumber,
            endColumn: column,
          })
          const tokens = textBeforePointer.trim().split(/\s+/)
          const lastToken = tokens[tokens.length - 1] // 获取最后一段非空字符串
          if (lastToken.endsWith('.')) {
            const tokenNoDot = lastToken.slice(0, lastToken.length - 1)
            if (Object.keys(_that.hintData).includes(tokenNoDot)) {
              suggestions = [..._that.getTableSuggest(tokenNoDot)]
            }
          } else if (lastToken === '.') {
            suggestions = []
          } else {
            suggestions = [..._that.getDBSuggest(), ..._that.getSQLSuggest()]
          }
          return {
            suggestions,
          }
        },
      })
    },
    // 获取 SQL 语法提示
    getSQLSuggest() {
      return keywords.map((key) => ({
        label: key,
        kind: monaco.languages.CompletionItemKind.Enum,
        insertText: key,
      }))
    },
    getDBSuggest() {
      return Object.keys(this.hintData).map((key) => ({
        label: key,
        kind: monaco.languages.CompletionItemKind.Constant,
        insertText: key,
      }))
    },
    getTableSuggest(dbName) {
      const tableNames = this.hintData[dbName]
      if (!tableNames) {
        return []
      }
      return tableNames.map((name) => ({
        label: name,
        kind: monaco.languages.CompletionItemKind.Constant,
        insertText: name,
      }))
    },
    initEditor() {
      if (this.$refs.codeContainer) {
        this.registerCompletion()
        // 初始化编辑器，确保dom已经渲染
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
          value: '', // 编辑器初始显示文字
          language: 'sql', // 语言
          readOnly: this.readOnly, // 是否只读 Defaults to false | true
          automaticLayout: true, // 自动布局
          theme: this.theme, // 官方自带三种主题vs, hc-black, or vs-dark
          minimap: {
            // 关闭小地图
            enabled: false,
          },
          tabSize: 2, // tab缩进长度
        })
      }
      this.setValue(this.value)
    },
  }
}

编辑器 resize

    resize() {
      this.monacoEditor.layout()
    },

编辑器设置主题

注意！设置主题并非在编辑器实例上修改的哦！

    setTheme() {
      monaco.editor.setTheme(this.theme)
    },

SQL 代码格式化

编辑器自身不支持 sql 格式化（试了下 javascript 是支持的），所以用到了 sql-fORMatter 这个库。

import { format } from 'sql-formatter'
...
    format() {
      this.monacoEditor.setValue(
        format(this.monacoEditor.getValue(), {
          indentStyle: 'tabularLeft',
        }),
      )
    },
...

右键菜单汉化

需要安装以下两个库

npm install monaco-editor-nls --save
npm install monaco-editor-esm-webpack-plugin --save-dev

具体用法可以直接去 www.npmjs.com/package/mon… 里面看，我就不搬运了~

记得销毁编辑器对象哦

  beforeDestroy() {
    if (this.monacoEditor) {
      this.monacoEditor.dispose()
    }
  },

踩坑

下面是我遇到的几个坑。

最新版本的 Monaco Editor 已经使用了 ES2022 的语法，所以老项目可能会出现编译不过的问题。所以我把版本调低了一些。
在最初调试编辑器的时候出现了无法编辑的情况，后来发现是同事用到了 default-passive-events 这个库来关闭 chrome 的 Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive 警告。结果拦截一些 event。

如何快速去看懂 Monaco Editor

一开始我看它的官方文档是非常懵的，各种接口、函数、对象的定义，完全不像是个前端库那么好理解。鼓捣了好久才慢慢找到门路。

先看示例
- 查看它的 playground，上面其实是有一些功能可以直接找到的。
- 查看它在 GitHub 上的 /samples 目录，里面也有不少示例。
- 去掘金这类网站上找别人写的示例，能有不少启发。
再看 api
- 了解了自己所需要的功能相关的代码，再去看它文档的 API 就会发现容易理解多了。逐步发散理解更多关联功能。

参考资料

官方文档

microsoft.github.io/monaco-edit…

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Monaco Editor开发SQL代码提示编辑器实例详解

目录安装简易 SQL 编辑器相关功能获取选中代码替换选中代码处理光标位置自定义 SQL 库表提示，并保留原有 SQL 提示编辑器 resize编辑器设置主题SQL 代码格式化右键菜单...

99+

2022-11-13

Monaco Editor开发SQL编辑器 Monaco Editor代码提示
Monaco Editor实现sql和java代码提示实现示例

目录monaco editor创建sql提示（库表字段关联）java自定义联想monaco editor创建 //创建和设置值 if (!this.monacoEditor) { ...

99+

2022-11-13

Monaco Editor代码提示 sql java代码提示
Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

什么是Monaco Editor？微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代...

99+

2023-09-01

编辑器 vue.js vscode monaco
Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

在项目中经常有代码在线编辑的需求，比如修改基于Xml的配置文件，编辑Json格式的测试数据等。我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能。Monaco...

99+

2024-04-02
PHP开发框架laravel代码提示示例解析

public function getTable() { return $this->table Str::snake(Str::pluralStudly(class_bas...

99+

2024-04-02
Go语言编程实例：Web开发中的代码示例

《Go语言编程实例：Web开发中的代码示例》随着互联网的快速发展，Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言，Go语言在Web开发中越来越受到开...

99+

2024-03-04

go语言 web开发代码示例标准库
codemirror6实现在线代码编辑器使用详解

目录背景介绍codemirror5、codemirror6对比codemirror6 核心包vue3+codemirror6实现简易在线代码编辑器安装依赖创建编辑器效果截图主题获取、...

99+

2023-01-08

codemirror 代码编辑器 codemirror 在线编辑器
Java中规模软件开发实训——简单的文本编辑器（代码注释详解）

✨博主：命运之光 🌸专栏：Python星辰秘典 🐳专栏：web开发（html css js） ❤️专栏：Java经典程序设计 ☀️博主的其他文章：点击进入博主的主页前言：在现代社会中，计算...

99+

2023-08-31

Java实训 Javaswing 项目开发算法 Java
JS图形编辑器实现标尺功能示例详解

目录正文实现思路步长选择计算范围绘制顺序正文项目地址： github.com/F-star/suik… 线上体验： blog.fstars.wang/app/sui...

99+

2023-01-16

JS图形编辑器实现标尺 JS图形编辑器
Android开发Kotlin实现圆弧计步器示例详解

目录效果图定义控件的样式自定义StepView绘制文本坐标Android获取中线到基线距离效果图定义控件的样式看完效果后，我们先定义控件的样式 <!-- 自定义View的...

99+

2024-04-02
php - 超详细 thinkphp + redis 实现商品秒杀抢购功能，提供完整流程详细讲解及企业级功能示例源代码，环境准备、数据库表设计、并发压力测试等（新手小白一看就懂！）

效果图很多文章都已经过时了，而且还不讲原理，本文一次性说清楚。很多电商系统几乎都有秒杀功能，那么用 tp+redis 怎么实现呢？本文详细讲解商品秒杀功能的实现，提供详细的代码及注释，包括...

99+

2023-09-03

php thinkphp redis 商品秒杀功能示例代码 tp+redis最好用秒杀功能