vmo-monaco-editor

vmo-monaco-editor

vmo-monaco-editor is a re-encapsulation of monaco-editor based on vue3. It allows you to easily introduce monaco-editor into a vue3 project as a component.

Installation

npm i monaco-editor // current:0.33.0
npm i vmo-monaco-editor --save // install vmo-monaco-editor

Plugin Environment Configuration

Vite configuration

npm i vite-plugin-monaco-editor  -D // install vite-plugin-monaco-editor

vite.config

import { defineConfig } from 'vite' // 5.0
import vue from '@vitejs/plugin-vue' // 3.3.4
import monacoEditorPlugin from 'vite-plugin-monaco-editor' // 1.1.0

export default defineConfig({
  ...
  plugins: [
    vue(),
    // If vite.config is a TypeScript file, you may need to use a comment to fix the module entry and type declaration inconsistency issue
    //@ts-ignore
    monacoEditorPlugin.default({
      languageWorkers: ['editorWorkerService', 'css', 'html', 'json', 'typescript'],
      ....
    })
    ...
  ],
})

Usage

Create a component.vue single file component. This example uses tailwind.css.

<script setup lang='ts'>
  import { ref } from 'vue';
  import { vmoMonacoEditor } from 'vmo-monaco-editor'; // import the component
  import 'vmo-monaco-editor/dist/style.css'; // import the component's styles
  import 'vmo-monaco-editor/dist/assets/iconfont/iconfont.css' // import the component's icon styles
  const codeContent = ref('SELECT * FROM table_name');
</script>

<template>
  <div class="flex flex-row grow-1 h-full">
    <div class="flex-col flex flex-grow w-0 bg-white border p-[10px]">
      <textarea v-model="codeContent" class="border h-[200px]" :rows="4" />
    </div>
    <vmo-monaco-editor
      :model-value="codeContent"
      prefix="function(name){"
      :option-config="{
        theme: 'vs-dark',
        language: 'sql'
      }"
      class="w-[800px]"
      @update:model-value="codeContent = $event"
      @change="codeContent = $event">
    </vmo-monaco-editor>
  </div>
</template>

Component Props and Events

Props

props: {
  prefix: {
    // Prefix content
    type: String as PropType<string>,
    default: '(()=>{})'
  },
  modelValue: {
    // Code content
    type: String as PropType<string>,
    default: 'const aa:number = 12;'
  },
  suffix: {
    // Suffix content
    type: String as PropType<string>,
    default: '};'
  },
  needConfirm: {
    // Whether to trigger a confirmation before submitting the code
    type: Boolean as PropType<boolean>,
    default: false
  },
  bidibind: {
    // Whether to use two-way binding, so that changes to props.modelValue will also trigger changes in the code editor content
    type: Boolean as PropType<boolean>,
    default: true
  },
  zIndex: {
    // The z-index value when in fullscreen mode
    type: Number as PropType<number>,
    default: 99
  },
  providers: {
    // Code suggestion providers
    type: Array as PropType<{ language: string; config: Monaco.languages.CompletionItemProvider }[]>,
    default: () => []
  },
  formatCodeProviders: {
    // Code formatters, can register multiple formatters for different languages
    type: Object as PropType<Record<string, (code: string) => string | Promise<string>>>,
    default: () => ({})
  },
  disabled: {
    // Whether the editor is disabled
    type: Boolean as PropType<boolean>,
    default: false
  },
  monacoOptions: {
    // monaco-editor configuration
    type: Object as PropType<
      Partial<Monaco.editor.IStandaloneEditorConstructionOptions & { theme: 'vs-dark' | 'vs-light' }>
    >,
    default: () => ({})
  }
},

Events

emits: ['update:modelValue', 'change', 'focuse', 'blur'],

// Prerequisite: props.needConfirm: false
update:modelValue: ($event: string) => any // Implementation of v-model, returns the currently written code
// Prerequisite: props.needConfirm: false
change: ($event: string) => any // Triggered when the code content is submitted upon losing focus, returns the currently written code

focuse // Focus event
blur // Blur event

Slots

<template #default></template>
<template #prefix></template>
<template #suffix></template>

Methods

instance.insertCodeString(code: string) // Inserts code at the current cursor position
instance.fullscreenSwitch() // Toggles fullscreen mode
instance.resetMonacoEditorOptions(options: Partial<Monaco.editor.IStandaloneEditorConstructionOptions>) // Resets the MonacoEditor configuration at runtime
instance.refreshMonacoEditor() // Refreshes the editor
instance.changeLanguage(language: string) // Switches the language
instance.formatCodeString() // Attempts to format the code based on the current language ID; this method will throw an error if it fails
instance.commit() // Triggers the submission of the code written inside the editor from the outside

Summary

vmo-monaco-editor is a Vue 3 component that wraps monaco-editor to provide a more convenient way to use it in Vue 3 projects. You can easily configure and use it to create a powerful code editor with support for various languages and features like code suggestions and formatting.