当前位置：首页 > news >正文

vue3+vite+pnpm项目使用monaco-editor常见问题

news 2025/6/10 5:15:21

文章目录

- 一、使用步骤
- - 1.1 安装插件
  - 1.2 配置 vite.config.js
  - 1.3 封装 json-editor 组件
  - 1.4 使用 json-editor 组件
- 二、遇到报错
- - 2.1 `TypeError: Cannot read properties of undefined (reading 'toUrl')`
  - 2.2 `Cannot read properties of undefined (reading 'languageWorkers')`
- 参考地址

一、使用步骤

Monaco Editor API

1.1 安装插件

pnpm install monaco-editor --save
pnpm install monaco-editor-webpack-plugin --save 
pnpm install --save-dev vite-plugin-monaco-editor

1.2 配置 vite.config.js

import monacoEditorPlugin from 'vite-plugin-monaco-editor';export default defineConfig({...plugins: [monacoEditorPlugin({}),],...
})

1.3 封装 json-editor 组件

/* 模块名称：json-editor */
<template><div ref="monacoDom" class="json-editor"></div>
</template>
<script lang="ts" setup>
import beautify from 'js-beautify'
import * as monaco from 'monaco-editor';const props = defineProps({modelValue: {type: String,default: ''},readOnly: {type: Boolean,default: false,},config: {type: Object,default() {return {};}}
});
const emits = defineEmits(['update:modelValue', 'change', 'ready'])
const monacoDom: Ref<HTMLElement | null> = ref(null);
let monacoInstance: monaco.editor.IStandaloneCodeEditor | null = null;watch(() => props.modelValue, (newValue) => {const value = monacoInstance?.getValue();if (newValue !== value) {monacoInstance?.setValue(props.modelValue)}
})
watch(() => props.readOnly, (readOnly) => {monacoInstance?.updateOptions({readOnly,});
})
onMounted(() => {monaco.languages.json.jsonDefaults.setDiagnosticsOptions({allowComments: true,validate: true,trailingCommas: 'ignore',schemaValidation: 'warning'})monaco.languages.json.jsonDefaults.setModeConfiguration({completionItems: false,tokens: true,colors: true,foldingRanges: true,diagnostics: true,})monacoInstance = monaco.editor.create(monacoDom.value as HTMLElement, {value: props.modelValue,language: 'json',automaticLayout: true,parameterHints: {enabled: true},minimap: {enabled: false,},wrappingStrategy: 'advanced',scrollBeyondLastLine: false,overviewRulerLanes: 0,scrollbar: {alwaysConsumeMouseWheel: false},hover: {enabled: true,above: false,},renderLineHighlight: 'none',fontSize: 14,readOnly: props.readOnly,...props.config})monacoInstance.onDidChangeModelContent(() => {emits('update:modelValue', monacoInstance?.getValue())emits('change', monacoInstance?.getValue())})emits('ready')
})
onActivated(() => {monacoInstance?.focus()
})
onBeforeUnmount(() => {monacoInstance?.dispose();
})
const format = () => {const formatStr = beautify(props.modelValue, { indent_size: 4 });monacoInstance?.setValue(formatStr)
}
const focus = () => {monacoInstance?.focus()
}
defineExpose({format,focus
});
</script>
<style lang="scss">
.json-editor {width: 100%;height: 100%;
}
</style>

1.4 使用 json-editor 组件

<template><json-editorref="jsonComponents":model-value="strJson"@update:model-value="handleChangeResponseJson"/>
</template>
<script lang="ts" setup>
import JsonEditor from '../common/json-editor.vue'const jsonComponents: Ref<null | { format: () => void }[]> = ref(null)
const strJson = ref('')//更改返回json数据
const handleChangeResponseJson = (value: string) => {// 返回内容值，根据业务增加后面的逻辑
}
</script>