create-base-teek-theme/dist/template/docs/articles/使用指南/02.基础组件/05.monacoEditor.md

``` npm create base-teek-theme@latest my-first-blog ```

---

date: 2025-03-27 00:30:07
title: monacoEditor
permalink: /pages/ad2a8f
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南
  - 基础组件

---






## 说明

在线代码编辑器

##  使用

```vue
 <script setup lang="ts">
   import { MonacoEditor } from "liyao-vue-common"
 </script>
 
 <template>
  <MonacoEditor />
 </template>
```



## 可选参数

```typescript
export const editorProps = {
    width: {
        type: [String, Number] as PropType<string | number>,
        default: '100%'
    },
    height: {
        type: [String, Number] as PropType<string | number>,
        default: '500px'
    },
    theme: {
        type: String as PropType<Theme>,
        validator(value: string): boolean {
            return ['vs', 'hc-black', 'vs-dark'].includes(value)
        },
        default: 'vs-dark'
    },
    options: {
        type: Object as PropType<Partial<Options>>,
        default() {
            return {
                automaticLayout: true,
                foldingStrategy: 'indentation',
                renderLineHighlight: 'all',
                selectOnLineNumbers: true,
                minimap: {
                    enabled: false
                },
                readOnly: false,
                contextmenu: true,
                fontSize: 16,
                scrollBeyondLastLine: false,
                overviewRulerBorder: false
            }
        }
    }
}
```

更多配置请查看[MonacoEditor官方文档](https://microsoft.github.io/monaco-editor/docs.html)