monaco-editor use

Table of Contents

Practice code

1.Core code

2. Complete code

Summarize

---

Summary

An excerpt from an official sentence

The Monaco Editor is the fully featured code editor from VS Code. Check out the VS Code docs to see some of the supported features.

Practice Code

1.Core code

<template>
    <div ref="cusEditor" class="cusEditor"></div>
</template>
<script setup lang="ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import { OPTIONS_BASE } from './optionBase'
import { keyWords } from './keyword'
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> = {}
let cusEditorCompletion = ref<monaco.IDisposable | null>(null)
const emit = defineEmits(['update:modelValue'])

/**
 * @description: Initialize automatic completion
 */
function initAutoCompletion() {
    const languageKeyWords = keyWords[props.editorConfig.language]
    if (!languageKeyWords) return
    cusEditorCompletion.value = monaco.languages.registerCompletionItemProvider(props.editorConfig.language, {
        //Character that triggers prompt
        triggerCharacters: [".", " ", ...languageKeyWords],
        provideCompletionItems: (model, position) => {
            const word = model.getWordUntilPosition(position)
            const range = {
                startLineNumber: position.lineNumber,
                endLineNumber: position.lineNumber,
                startColumn: word.startColumn,
                endColumn: word.endColumn,
            }
            return {
                suggestions: getKeywordsSuggest(props.editorConfig.language, range),
            };
        },
    });
}

/**
 * @description: Get the completion list of keywords
 * @tips: All enumerations of CompletionItemKind can be found in the monaco.d.ts file. There are more than twenty, just take what you need.
 */
function getKeywordsSuggest(language: string, range: { startLineNumber: number; endLineNumber: number; startColumn: number; endColumn: number; }): monaco.languages.CompletionItem[] {
    const items: monaco.languages.CompletionItem[] = [];
    if (language in keyWords) {
        keyWords[language].forEach((key: string) => {
            const completionItem: monaco.languages.CompletionItem = {
                label: key, // displayed name
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: key, // The actual completion value
                range
            };
            items.push(completionItem);
        });
    }
    return items;
}

/**Initialize editor */
onMounted(() => {
    onDispose()
    initAutoCompletion()
    if (cusEditor.value) {
        editor = monaco.editor.create(cusEditor.value, { ...OPTIONS_BASE, ...props.editorConfig, readOnly: props.disabled })
        editor.onDidChangeModelContent & amp; & amp;
            editor.onDidChangeModelContent(() => {
                const value = editor.getValue & amp; & amp; editor.getValue() // Return the latest text to the parent component in real time
                emit('update:modelValue', value)
            })
    }
})
/**Destroy instance */
const onDispose = () => {
    editor & amp; & amp; editor.dispose & amp; & amp; editor.dispose();
    autoCompletionDispose()
}

function autoCompletionDispose() {
    cusEditorCompletion.value & amp; & amp; cusEditorCompletion.value.dispose & amp; & amp; cusEditorCompletion.value.dispose();
}

onUnmounted(() => {
    onDispose()
})
/**Modify read-only status */
watch(
    () => props.disabled,
    (val) => {
        editor.updateOptions & amp; & amp; editor.updateOptions({ readOnly: val })
    }
)
/**Change setting */
watch(
    () => props.editorConfig,
    (val) => {
        const model = editor.getModel & amp; & amp; editor.getModel()
        if (model) {
            autoCompletionDispose()
            initAutoCompletion()
            monaco.editor.setModelLanguage(model, val.language)
            monaco.editor.setTheme(val.theme)
        }
    },
    { deep: true }
)
/**Echo data */
watch(
    () => props.modelValue,
    (val) => {
        if (editor) {
            const value = editor.getValue & amp; & amp; editor.getValue()
            if (val !== value) {
                editor.setValue & amp; & amp; editor.setValue(val || '')
            }
        }
    }
)
</script>

<style scoped>
.cusEditor {
    width: 100%;
    height: 100%;
    min-height: 400px;
}
</style>

2. Complete code

github addresshttps://github.com/xu-yi-hang/vite4-vue3-ts-naive-ui/tree/master/src/components/ common/Editor

gitee addresshttps://gitee.com/xu-yi-hang/vite4-vue3-ts-naive-ui/tree/master/src/components/ common/Editor

Summary

A background framework built in my spare time, which currently implements basic keyword completion for the code editor. When I have time later, I may continue to study more functions of this package, including making some improvements to the framework. The project description document has not been written yet, and node v18.4.0 is used.

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepage Overview 39759 people are learning the system