3

我正在尝试使用所有 monaco-eeditor 功能，因此我将 monaco-diff 编辑器与 monaco-yaml 插件结合使用。

我能够按照此 https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world构建 monaco-diff 编辑器。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>

<script>
  require.config({ paths: {'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'}});

  window.MonacoEnvironment = { getWorkerUrl: () => proxy }
    let proxy = URL.createObjectURL(new Blob([`
      self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.20.0/min/'
      };
      importScripts('https://unpkg.com/monaco-editor@0.20.0/min/vs/base/worker/workerMain.js');
    `], { type: 'yaml' }));

    require([
      'vs/editor/editor.main'
    ], function () {
    var lhsModel = monaco.editor.createModel(value, 'yaml');
    var rhsModel = monaco.editor.createModel(value, 'yaml');

    diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
      enableSplitViewResizing: false,
    });

    diffEditor.setModel({
      original: lhsModel,
      modified: rhsModel
    });
 </script>

但是我找不到添加 monaco-yaml 的教程，有人可以为我提供链接、教程或任何有用的步骤吗？

4

0 回答 0