如何为Monaco Editor脚本字段动态添加对象实现自动补全？

完全可以给Monaco Editor的脚本字段添加运行时可访问的全局对象，同时配置编辑器提供对应的自动补全提示。针对你需要添加{"current": {"name": "juan"}}、输入curr时触发current补全的需求，以下是调整后的完整实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.min.js"
    integrity="sha512-ZG31AN9z/CQD1YDDAK4RUAvogwbJHv6bHrumrnMLzdCrVu4HeAqrUX7Jsal/cbUwXGfaMUNmQU04tQ8XXl5Znw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <title>Monaco Editor</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
    }
    #editorArea, #output {
      flex: 1;
      min-width: 0;
    }
    #editorArea {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #toolbar {
      padding: 10px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }
    #editorContainer {
      flex-grow: 1;
      overflow: auto;
    }
    #container {
      width: 100%;
      height: 100%;
    }
    #outputArea {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
    #outputToolbar {
      padding: 10px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }
    #output {
      flex-grow: 1;
      padding: 10px;
      overflow: auto;
      border-left: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div id="editorArea">
    <div id="toolbar">
      <select id="languageSelector">
        <option value="javascript">JavaScript</option>
      </select>
    </div>
    <div id="editorContainer">
      <div id="container"></div>
    </div>
  </div>
  <div id="outputArea">
    <div id="outputToolbar">
      <button id="runCodeButton">Run</button>
      <button id="exitEditorButton">Exit Editor</button>
    </div>
    <div id="output">Output will appear here...</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      require.config({
        paths: {
          'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs'
        }
      });
      require(['vs/editor/editor.main'], function () {
        const editor = monaco.editor.create(document.getElementById('container'), {
          value: "// Your code here\n",
          language: 'javascript',
          theme: 'vs-dark',
          automaticLayout: true
        });

        document.getElementById('languageSelector').addEventListener('change', function () {
          const newLanguage = this.value;
          monaco.editor.setModelLanguage(editor.getModel(), newLanguage);
        });

        // 定义要添加的全局对象
        const currentObject = { "name": "juan" };

        // 为全局对象添加智能提示支持
        monaco.languages.typescript.javascriptDefaults.addExtraLib(`
          declare var current: { name: string };
        `);

        document.getElementById('runCodeButton').addEventListener('click', function () {
          const originalConsoleLog = console.log;
          document.getElementById('output').textContent = '';

          console.log = function (...args) {
            document.getElementById('output').textContent += args.join(' ') + '\n';
          };

          try {
            const userCode = editor.getModel().getValue();
            // 将全局对象注入到代码执行上下文
            eval(`
              var current = ${JSON.stringify(currentObject)};
              ${userCode}
            `);
          } catch (e) {
            document.getElementById('output').textContent = 'Error: ' + e.message;
          } finally {
            console.log = originalConsoleLog;
          }
        });
      });

      // 监听来自Flutter的消息
      window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'initMonaco') {
          console.log('从Flutter接收的数据:', event.data.objects);
          // 根据需要处理接收到的数据
        }
      });
    });
  </script>
</body>
</html>

关键实现说明 #

• 智能提示配置：通过monaco.languages.typescript.javascriptDefaults.addExtraLib添加TypeScript声明，告诉Monaco编辑器全局存在current对象，且它包含name字符串属性，编辑器会据此生成自动补全提示。
• 运行时注入：在执行用户代码时，通过eval将current对象注入到执行环境，确保用户编写的代码能直接访问该对象。
• 补全触发：当用户输入curr时，编辑器会自动识别并提示current，选中后可直接使用current.name获取对应值。

同类问题参考 #

如何在JavaScript/TypeScript的Monaco Editor中为智能提示和代码检查添加全局定义的对象？

内容的提问来源于stack exchange，提问作者user17281101