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

目录
  • 安装
  • 简易 SQL 编辑器
  • 相关功能
    • 获取选中代码
    • 替换选中代码
    • 处理光标位置
    • 自定义 SQL 库表提示,并保留原有 SQL 提示
    • 编辑器 resize
    • 编辑器设置主题
    • SQL 代码格式化
    • 右键菜单汉化
    • 记得销毁编辑器对象哦
  • 踩坑
  • 如何快速去看懂 Monaco Editor

安装

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

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'
/**
 * VS Code 编辑器
 *
 * 通过 getEditorVal 函数向外传递编辑器即时内容
 * 通过 initValue 用于初始化编辑器内容。
 * 编辑器默认 sql 语言,支持的语言请参考 node_modules\monaco-editor\esm\vs\basic-languages 目录下~
 * 编辑器样式仅有   'vs', 'vs-dark', 'hc-black' 三种
 */
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…

相关库

Monaco Editor www.npmjs.com/package/mon…

右键菜单汉化 www.npmjs.com/package/mon…

webpack 插件 www.npmjs.com/package/mon…

汉化 webpack 插件 www.npmjs.com/package/mon…

SQL 代码格式化 www.npmjs.com/package/sql…

博客

https://www.jb51.net/article/258307.htm

https://www.jb51.net/article/258269.htm

以上就是Monaco Editor开发SQL编辑器实例详解的详细内容,更多关于Monaco Editor开发SQL编辑器的资料请关注我们其它相关文章!

(0)

相关推荐

  • Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著名的VSCode的前身,项目地址:https://microsoft.github.io/monaco-editor/.本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能. 安装 可以使用npm下载moaco-editor: npm install monaco

  • vue2.x中monaco-editor的使用说明

    目录 vue2中使用monaco-editor 安装 配置 创建MonacoEditor公共组件 使用vue-monaco-editor遇到的坑 编辑器重复加载上次编辑器中的内容,不会被新的内容替代 编辑器editorOptions上的配置无法生效 vue2中使用monaco-editor 安装 注意两个库的版本指定 npm install monaco-editor@0.30.1 --save-dev npm install monaco-editor-webpack-plugin@6.0.0

  • vue使用monaco editor汉化右键菜单示例

    安装依赖插件 首先使用npm或者其他包管理工具安装依赖插件: npm install monaco-editor --save npm install monaco-editor-nls --save npm install monaco-editor-webpack-plugin --save npm install monaco-editor-esm-webpack-plugin --save-dev 推荐安装的依赖版本对应:package.json { "dependencies"

  • vue中实现Monaco Editor自定义提示功能

    这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项. 项目的框架是 Vue ,编辑器用的是 Monaco Editor . 什么是 Monaco Editor vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Edit

  • Monaco Editor实现sql和java代码提示实现示例

    目录 monaco editor创建 sql提示(库表字段关联) java自定义联想 monaco editor创建 //创建和设置值 if (!this.monacoEditor) { this.monacoEditor = monaco.editor.create(this._node, { value: value || code, language: language, ...options }); this.monacoEditor.onDidChangeModelContent(e

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

    目录 安装 简易 SQL 编辑器 相关功能 获取选中代码 替换选中代码 处理光标位置 自定义 SQL 库表提示,并保留原有 SQL 提示 编辑器 resize 编辑器设置主题 SQL 代码格式化 右键菜单汉化 记得销毁编辑器对象哦 踩坑 如何快速去看懂 Monaco Editor 安装 安装依赖,这里请注意版本 yarn add monaco-editor@0.29.1 yarn add monaco-editor-webpack-plugin@5.0.0 配置 webpack 插件 // vu

  • mybatis防止SQL注入的方法实例详解

    SQL注入是一种很简单的攻击手段,但直到今天仍然十分常见.究其原因不外乎:No patch for stupid.为什么这么说,下面就以JAVA为例进行说明: 假设数据库中存在这样的表: table user( id varchar(20) PRIMARY KEY , name varchar(20) , age varchar(20) ); 然后使用JDBC操作表: private String getNameByUserId(String userId) { Connection conn

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • MyBatis 动态SQL和缓存机制实例详解

    有的时候需要根据要查询的参数动态的拼接SQL语句 常用标签: - if:字符判断 - choose[when...otherwise]:分支选择 - trim[where,set]:字符串截取,其中where标签封装查询条件,set标签封装修改条件 - foreach: if案例 1)在EmployeeMapper接口文件添加一个方法 public Student getStudent(Student student); 2)如果要写下列的SQL语句,只要是不为空,就作为查询条件,如下所示,这样

  • Android 开发中使用Linux Shell实例详解

    Android 开发中使用Linux Shell实例详解 引言 Android系统是基于Linux内核运行的,而做为一名Linux粉,不在Android上面运行一下Linux Shell怎么行呢? 最近发现了一个很好的Android Shell工具代码,在这里分享一下. Shell核心代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.

  • 微信小程序 开发MAP(地图)实例详解

    微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

  • iOS新功能引导提示界面实例详解

    在开发中,现在很多app更新了新功能时都会给出用户一个提示,以方便用户更好的体验,那么这个功能如何实现的呢? 首先看下效果图: 1.首先创建第一个viewcontroller 在上面放上一个imageview和一个按钮 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIImageView *imageview=[[UIImageView alloc]ini

  • IOS代码修改音量实例详解

    IOS代码修改音量实例详解 最近在做一个项目,需要用户在打开APP后,自动将音量调节到某个值,于是研究了一下. 之前做过iOS上声音的研究,苹果对iPhone设备的输入/输出的控制很严格,因为苹果要控制用户体验的一致性.比如:用户将耳机拔下来的时候,苹果认为,用户这时候不希望其他人知道自己在听什么,于是这时候声音会被自动暂停.在音量调整上,苹果也采取了类似的策略.苹果认为,用户不需要APP来为他指定音量,因为这样有时候用户会感到不舒服.苹果的开发文档是这么说的: You cannot chang

  • java开发Activiti进阶篇流程实例详解

    目录 1.流程实例 1.1 什么是流程实例 1.2 业务管理 1.3 流程实例的挂起和激活 1.3.1 全部流程挂起 1.3.2 单个实例挂起 1.流程实例 1.1 什么是流程实例 流程实例(ProcessInstance)代表流程定义的执行实例 一个流程实例包括了所有的运行节点,我们可以利用这个对象来了解当前流程实例的进度等信息 例如:用户或者程序安装流程定义的内容发起了一个流程,这个就是一个流程实例 1.2 业务管理 ​流程定义部署在Activiti后,我们就可以在系统中通过Activiti

  • vue-quill-editor+plupload富文本编辑器实例详解

    1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/h

随机推荐