vue3 使用 monaco-editor 自定义代码补全。

本是古典何须时尚 2023-09-26 20:45 188阅读 0赞

#### 使用场景： ####

数据编辑时需要支持sql语法高亮， 并且支持自定义代码提示补全。

monaco详细说明和使用可参考另一篇发文[Monaco Editor (vite/webpack + ts + vue项目使用)][Monaco Editor _vite_webpack _ ts _ vue]

#### 步骤一：安装依赖 ####

npm i monaco-editor

#### 步骤二：组件功能封装 ####

<template>
      <div ref="cusEditor"></div>
    </template>
    <script setup lang="ts">
    import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
    import { withDefaults, defineProps, ref, defineEmits, onMounted, onUnmounted, watch } from 'vue'
    import { OPTIONS_BASE } from './registerCompletion'
    import './worker'
    interface IProps {
      modelValue: string
      disabled?: boolean
      editorConfig?: { language: string; theme: 'vs' | 'vs-dark' | 'hc-black' }
    }
    const props = withDefaults(defineProps<IProps>(), {
      modelValue: '',
      disabled: false,
      editorConfig: () => ({ language: 'sql', theme: 'vs-dark' }),
    })
    
    const cusEditor = ref<HTMLElement | null>(null)
    let editor: Partial<monaco.editor.IStandaloneCodeEditor> = {}
    const emit = defineEmits(['update:modelValue'])
    /**初始化编辑器 */
    onMounted(() => {
      onDispose()
      if (cusEditor.value) {
        editor = monaco.editor.create(cusEditor.value, { ...OPTIONS_BASE, ...props.editorConfig, readOnly: props.disabled })
        editor.onDidChangeModelContent &&
          editor.onDidChangeModelContent(() => {
            const value = editor.getValue && editor.getValue() // 给父组件实时返回最新文本
            emit('update:modelValue', value)
          })
      }
    })
    /**销毁实例 */
    const onDispose = () => {
      editor && editor.dispose && editor.dispose()
    }
    onUnmounted(() => {
      onDispose()
    })
    /**修改只读状态 */
    watch(
      () => props.disabled,
      (val) => {
        editor.updateOptions && editor.updateOptions({ readOnly: val })
      }
    )
    /**修改配置 */
    watch(
      () => props.editorConfig,
      (val) => {
        const model = editor.getModel && editor.getModel()
        if (model) {
          monaco.editor.setModelLanguage(model, val.language)
          monaco.editor.setTheme(val.theme)
        }
      },
      { deep: true }
    )
    /**回显数据 */
    watch(
      () => props.modelValue,
      (val) => {
        if (editor) {
          const value = editor.getValue && editor.getValue()
          if (val !== value) {
            editor.setValue && editor.setValue(val || '')
          }
        }
      }
    )
    </script>

*  OPTIONS\_BASE : 为基础配置，具体参数可参考官网
 *  worker: 解决vite引入代码高亮和错误提示

[参考git, discussions][git_ discussions]

**OPTIONS\_BASE:**

export const OPTIONS_BASE: monaco.editor.IStandaloneEditorConstructionOptions = {
      value: '', // 初始显示文字
      lineNumbers: 'on', // 是否展示行号 'off' | 'on
      automaticLayout: false, // 自适应布局 默认true
      minimap: {
        enabled: false,
      },
      tabSize: 2,
      fontSize: 16
    }

**worker.ts**

import * as monaco from 'monaco-editor';
    import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
    import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
    import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
    import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
    import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
    
    self.MonacoEnvironment = {
      getWorker(_, label) {
        if (label === 'json') {
          return new jsonWorker()
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
          return new cssWorker()
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
          return new htmlWorker()
        }
        if (label === 'typescript' || label === 'javascript') {
          return new tsWorker()
        }
        return new editorWorker()
      }
    }
    monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

#### **步骤三：组件的使用** ####

<template>
        <el-form-item label="表名：" prop="table">
          <MonacoEditor class="w-full h-40" v-model="formData.table" :disabled="disabled" :constModelData="constModelData"></MonacoEditor>
        </el-form-item>
    </template>
    <script lang="ts" setup>
        import MonacoEditor from '@/components/monaco/index.vue'
    </script>

到此，就可以实现基础的编辑功能

## \*扩展 ##

由于我项目中使用的时sql语法，并且还需要支持自定义代码补全， 接下来就以sql语言为例：

#### 步骤一：自定义补全语法方法封装 ####

import * as monaco from 'monaco-editor';
    /**
     * 注册：自定义语法补全
     * @param language 语言类型
     * @param constValues 常量提示
     */
    export const registerProvider = (language: string, constValues: string[]) => {
      const monacoProvider = monaco.languages.registerCompletionItemProvider(language, {
        provideCompletionItems: function (model, position) {
          // 获取当前行数
          const line = position.lineNumber
          // 获取当前列数
          const column = position.column
          // 获取当前输入行的所有内容
          const content = model.getLineContent(line)
          // 通过下标来获取当前光标后一个内容，即为刚输入的内容
          const sym = content[column - 2]
          const word = model.getWordUntilPosition(position)
          const range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn,
          }
          let suggestions: any[] = []
          if (sym === '$') {
            suggestions = constValues.map((e) => ({
              label: e,
              kind: monaco.languages.CompletionItemKind.Keyword,
              insertText: '{' + e + '}',
              detail: '常量配置',
            }))
            //拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展
          } else if(language === 'sql'){
            // 直接提示，以下为sql语句关键词提示
            var sqlStr = ['SELECT', 'FROM', 'WHERE', 'AND', 'OR', 'LIMIT', 'ORDER BY', 'GROUP BY', 'LEFT', 'ON', 'if(){}', 'for(){}', 'size', 'get()', 'substring', 'return']
            suggestions = sqlStr.map((e) => ({
              label: e, // 显示的提示内容
              kind: monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标
              insertText: e, // 选择后粘贴到编辑器中的文字
              detail: '', // 提示内容后的说明
              range: range,
            }))
          }
          return {
            suggestions: suggestions,
          }
        },
        triggerCharacters: ['$', ''],
      })
      return monacoProvider
    }

#### 步骤二： 组件中使用 ####

import { registerProvider } from '@/components/monaco/registerCompletion'
    const registerPro = registerProvider('sql', props.constModelData)

效果展示：

1.sql关键字提示

![52cfda99bdc1484bb333bacd262c4d0f.png][]

2.常量提示：

![b7a917f66265402bb531db89db501c3e.png][]

**问题：每打开一次编辑弹框， 常量的提示就多一条重复数据。如图：**

![af0af8bb5fd442f7b6a9a3a7b432537d.png][]

**原因：** registerCompletionItemProvider多次注册。由于自定义补全注册的代码写在了编辑弹框中，所以每打开一次弹框就执行一次注册自定义补全的方法，。

#### 解决方案一：将注册方法移动到最外层组件中可解决 ####

**但是** 由于功能需求，常量的提示内容要根据每次打开的弹框数据改变， 所以注册方法必须写在内部，（编辑弹框打开后，需根据弹框绑定数据的id去请求常量接口， 然后注册）

解决方案：[参考官方：https://github.com/microsoft/monaco-editor/issues/2084][https_github.com_microsoft_monaco-editor_issues_2084]

**解决方案二：dispose（），** 页面卸载时，销毁之前注册的实例

const registerPro = registerProvider('sql', props.constModelData)
    onUnmounted(() => {
      registerPro && registerPro.dispose()
    })

[Monaco Editor _vite_webpack _ ts _ vue]: https://mp.csdn.net/mp_blog/creation/editor/125371318
[git_ discussions]: https://github.com/vitejs/vite/discussions/1791
[52cfda99bdc1484bb333bacd262c4d0f.png]: https://img-blog.csdnimg.cn/52cfda99bdc1484bb333bacd262c4d0f.png
[b7a917f66265402bb531db89db501c3e.png]: https://img-blog.csdnimg.cn/b7a917f66265402bb531db89db501c3e.png
[af0af8bb5fd442f7b6a9a3a7b432537d.png]: https://img-blog.csdnimg.cn/af0af8bb5fd442f7b6a9a3a7b432537d.png
[https_github.com_microsoft_monaco-editor_issues_2084]: https://link.segmentfault.com/?enc=oOFK8pNWXobjQMGteGp7mg%3D%3D.V%2FL%2FJlDqcoibzCnOdmpBC6beNtNkLXKSBZSMyc%2FN6KHg0i5EPoaibN2TiDnww9ERWTdxx6wJnGCh1L08hfKZ0A%3D%3D