Skip to main content
Glama
MonacoEditor.vue1.46 kB
<template> <div class="monaco-editor-wrapper"> <textarea ref="textareaRef" :value="modelValue" @input="handleInput" :placeholder="placeholder" :style="{ height: height + 'px' }" class="monaco-textarea" /> </div> </template> <script setup lang="ts"> import { ref } from "vue"; interface Props { modelValue: string; language?: string; height?: number; options?: any; placeholder?: string; } interface Emits { (e: "update:modelValue", value: string): void; (e: "change", value: string): void; } const props = withDefaults(defineProps<Props>(), { language: "json", height: 200, placeholder: "请输入内容...", }); const emit = defineEmits<Emits>(); const textareaRef = ref<HTMLTextAreaElement>(); const handleInput = (event: Event) => { const target = event.target as HTMLTextAreaElement; const value = target.value; emit("update:modelValue", value); emit("change", value); }; </script> <style scoped> .monaco-editor-wrapper { border: 1px solid var(--el-border-color); border-radius: 4px; overflow: hidden; } .monaco-textarea { width: 100%; border: none; outline: none; resize: none; padding: 12px; font-family: "Courier New", Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--el-text-color-primary); background: var(--el-bg-color); } .monaco-textarea:focus { box-shadow: 0 0 0 2px var(--el-color-primary-light-8); } </style>

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/zaizaizhao/mcp-swagger-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server