请教一下如何与 monaco-plantuml 一起使用呢？

[Wadehl]

https://github.com/pansinm/monaco-plantuml 期望与这个库搭配使用以添加plantuml的语法支持，感谢！

[imguolao]

import * as monaco from "monaco-editor";

monaco-plantuml 默认从项目的 node_modules 导入 monaco-editor (view here) 来注册自定义语法高亮提示，跟从 CDN 加载的 monaco-editor 无法一起使用。

你可以按照文档 (view here) 改成从本地 node_modules 加载，这样就可以直接用这个库了。

或者你参照 monaco-plantuml 这里的代码 (view here) ，在你的项目里重写。亦或 pr monaco-plantuml 改成可以传入 monaco 来注册。

[Wadehl]

我尝试以以下方式来使用monaco-plantuml和monaco-vue:

1. main.ts

   
   // main.ts

import { loader, install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor';

import * as monaco from 'monaco-editor'; import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'; import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'; import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'; import { PUmlExtension } from '@sinm/monaco-plantuml'; import PUmlWorker from '@sinm/monaco-plantuml/lib/puml.worker?worker';

const worker = new PUmlWorker();

self.MonacoEnvironment = { getWorker(_, label) { if (label === 'json') { return new jsonWorker(); } if (label === 'css' || label === 'scss' || label === 'less') { return new cssWorker(); } if (label === 'html' || label === 'handlebars' || label === 'razor') { return new htmlWorker(); } if (label === 'typescript' || label === 'javascript') { return new tsWorker(); } if (label === 'plantuml' || label === 'puml') { return worker; } return new editorWorker(); } };

const extension = new PUmlExtension(worker);

loader.config({ monaco });

extension.active(monaco);

createApp(app).use(VueMonacoEditorPlugin, {}).mount('#app')

2.  vue组件的@beforeMount事件
```vue
<script lang="ts" setup>
import { PUmlExtension } from '@sinm/monaco-plantuml';
import PUmlWorker from '@sinm/monaco-plantuml/lib/puml.worker?worker';

// ...

const onBeforeEditorMount = (monaco): void => {
  // 防止重复注册
  if (
    !monaco.languages
      .getLanguages()
      .map((lang: { id: string }) => lang.id)
      .includes('plantuml')
  ) {
    const worker = new PUmlWorker();
    const extension = new PUmlExtension(worker);
    const disposer = extension.active(monaco);  
  }
};

</script>

<template>
<vue-monaco-editor
      ref="editorRef"
      v-model:value="xxx"
      :options="options"
      height="100%"
      width="100%"
      @beforeMount="onBeforeEditorMount"
      language="plantuml"
    >
      <template #default>
        <span></span>
      </template>
    </vue-monaco-editor>
</template>

似乎仍然没有生效，请问我应该如何进行修改呢？

[imguolao]

https://github.com/pansinm/monaco-plantuml/blob/d9e29d6687160c34a94ea7f9b6116455a6a1f660/src/monaco/PUmlExtension.ts#L23

看这个 active 的接口，要传编辑器实例 editor，editor 可以在 onMount 里拿:

// onMount: (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void
const extension = new PUmlExtension();
extension.active(editor);