IkMonacoEditor

TIP

平台内置 可以直接使用

IkMonacoEditor基于Monaco Editor封装，点此访问Monaco Editor文档

props

defineProps({
  // 语言
    language: {
      type: String as PropType<languageType>,
      default: 'plaintext'
    },
    // 代码
    code: {
      type: [String, Array, Object],
      default: ''
    },
    // 只读
    readOnly: Boolean,
    // 小地图
    useMinimap: Boolean,
    // 行号
    lineNumbers: {
      type: String,
      default: 'on'
    },
    // 换行
    wordWrap: {
      type: String,
      default: 'on'
    },
    // 自动格式化
    autoFormat: Boolean,
    // 配置
    options: {
      type: Object,
      default: () => {}
    },
    completions: Array as PropType<Array<string>>,
    extra: Object,
    height: {
      type: Number,
      default: 240
    },
    // 自定义class类名
    editorClass: String,
    // 全屏标题
    fullScreenTitle: {
      type: String,
      default: '全屏模式'
    }
  });

示例

<script lang="ts" setup>
const previewTree = {
  type: "javascript",
  content: "return",
};
</script>

<template>
  <IkMonacoEditor
    class="w-full"
    :language="previewTree?.type || 'java'"
    :height="600"
    :code="previewTree?.content || ''"
  />
</template>