# vue-monaco-editor

**Repository Path**: dongzhongzhidong/vue-monaco-editor

## Basic Information

- **Project Name**: vue-monaco-editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2022-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MonacoEditor in Vue3

## 双向绑定的 Monaco

```vue
<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 进行布局，这样不会导致组件进行无限重绘。**