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

一、使用步骤

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-editor
    ref="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>

二、遇到报错

2.1 TypeError: Cannot read properties of undefined (reading 'toUrl')

出现上面的报错的原因是只安装了 monaco-editor 插件，未对模块加载配置，需安装对应的解析器 monaco-editor-webpack-plugin 和 vite-plugin-monaco-editor。

2.2 Cannot read properties of undefined (reading 'languageWorkers')

出现上面的报错的原因是 在 vite.config.js 配置 monacoEditorPlugin() 时，需要传默认值，monacoEditorPlugin({})。

参考地址

https://blog.csdn.net/qq_37772059/article/details/125404159