如果我在同一页面中有多个摩纳哥差异编辑器，差异将仅在第一个实例中可见

Question

我有一个 Vue 组件，可以渲染摩纳哥的 diff 编辑器。 一旦我在同一页面上有多个实例，差异只会显示在第一个实例中。

模板：

<template>
    <div>
      <div ref="diffEditor" class="vue--monaco-diff-editor"></div>
    </div>
</template>

脚本：

  async mounted(): Promise<void> {
    await this.importMonacoPackage();
    this.$nextTick(() => {
      if (!monaco) {
        throw new Error('monaco is not initialized');
      }

      const originalModel = monaco.editor.createModel(
        this.versions[0].code,
        MonacoHelper.markdownLangToMonacoLang(this.versions[0].lang),
      );
      const modifiedModel = monaco.editor.createModel(
        this.versions[1].code,
        MonacoHelper.markdownLangToMonacoLang(this.versions[1].lang),
      );

      let diffEditorElement = this.$refs.diffEditor;
      this.diffEditor = monaco.editor.createDiffEditor(
        diffEditorElement as HTMLElement,
        {
          scrollbar: {
            vertical: 'hidden',
            horizontal: 'hidden',
            handleMouseWheel: true,
          },
          wordWrap: 'on',
          readOnly: true,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          },
          automaticLayout: true,
        },
      );

      if (!this.diffEditor) {
        return;
      }

      this.diffEditor.setModel({
        original: originalModel,
        modified: modifiedModel,
      });

      // set the editor height to scale with the content height automatically
      // see https://github.com/microsoft/monaco-editor/issues/794
      const originalContentHeight = this.diffEditor
        .getOriginalEditor()
        .getContentHeight();

      const modifiedContentHeight = this.diffEditor
        .getModifiedEditor()
        .getContentHeight();

      let contentHeight = Math.max(
        originalContentHeight,
        modifiedContentHeight,
      );

      // allow for a single empty line at the bottom, default line height is 18px
      contentHeight = contentHeight + 18;

      const domNode = this.diffEditor.getDomNode();
      domNode.style.height = `${contentHeight}px`;
      this.diffEditor.layout();
    });
  },
  methods: {
    async importMonacoPackage() {
      // eslint-disable-next-line import/no-unresolved
      monaco = await import('../../../lib/monaco-editor');
    },
  },

我正在使用
“摩纳哥编辑器”：“^0.24.0”，“vue”：“^2.6.13”。 有什么想法我做错了吗？为什么只是第一个实例显示差异突出显示？

Answer 1

使用动态id，例如 monaco-editor+new Date().getTime() 或 +random()