MonacoEditor in Vue3

双向绑定的 Monaco

<template>
    <monaco-editor
        v-model="code"
        style="flex:1"
        :language="selectedLanguage"
        :theme="selectedTheme"
        @ready="editorReady"
    >
    </monaco-editor>
</template>

<script lang="ts" setup>
import monacoEditor, { LanguageList, ThemeName, ThemeStore } from "../";
import { ref, reactive, onMounted } from "vue";
const code = ref("");
const ThemeNames = ref([]);
const selectedTheme = ref<ThemeName>("github-gist");
const selectedLanguage = ref<LanguageList>("javascript");
const Languages = ref([]);

onMounted(() => {
    fetch(
        "https://cdn.jsdelivr.net/npm/@konghayao/promise-transaction/src/index.js"
    )
        .then((res) => res.text())
        .then((Code) => (code.value = Code));
    console.log("代码载入");
});

const editorReady = () => {
    console.log("编辑器准备完成");
    // 只有当编辑器完成之后才会自动加载这些数据
    ThemeNames.value = Object.keys(ThemeStore);
    Languages.value = window.monaco.languages.getLanguages().map((i) => i.id);

    selectedLanguage.value = "typescript";
    selectedTheme.value = "github-gist";
};
</script>

使用注意

CDN 加载

我们使用了 jsDelivr CDN 对 MonacoEditor 加速，所以我们的包自身非常小。

所有都是响应式的

1. 使用 v-model 响应式绑定内置代码。
2. 改变 language,theme,options 会自动更新，无需操作。

重大的一些使用错误

1. 不要使用一些可以无限延展的布局，这个会导致组件无限延伸 导致 CPU 过载。可以使用固定的宽高，或者是约束型的 flex-grow flex-shrink 进行布局，这样不会导致组件进行无限重绘。