鸭梨公共文档

主题

Copilot 代码编辑器 ​

HTML 代码 ​

html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Monaco Editor Copilot Demo</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
      }
    </style>
    <!-- 引入 Monaco Editor Loader -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.53.0/min/vs/loader.min.js"></script>
  </head>

  <body>
    <div id="container"></div>

    <script>
      require.config({
        paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs" },
      });

      require(["vs/editor/editor.main"], function () {
        // 1. 注册 Inline Completions Provider (必须在创建编辑器实例之前或之后注册均可)
        monaco.languages.registerInlineCompletionsProvider("javascript", {
          provideInlineCompletions: async function (model, position, context, token) {
            // 获取当前光标前的文本作为 Prompt
            const textUntilPosition = model.getValueInRange({
              startLineNumber: 1,
              startColumn: 1,
              endLineNumber: position.lineNumber,
              endColumn: position.column,
            });

            // === 模拟调用 AI API (这里是你要替换成真实后端请求的地方) ===
            // 实际项目中，这里应使用 fetch 调用 OpenAI/自定义 LLM 接口
            // 注意：为了性能，建议加上防抖 (Debounce) 逻辑

            console.log("触发补全，上下文:", textUntilPosition);

            // 模拟网络延迟
            await new Promise((r) => setTimeout(r, 300));

            // 检查是否被取消（用户继续输入了）
            if (token.isCancellationRequested) {
              return { items: [] };
            }

            // 简单的模拟逻辑：如果输入 "func"，建议一个函数
            let suggestion = "";
            if (textUntilPosition.trim().endsWith("func")) {
              suggestion = "tion add(a, b) {\n    return a + b;\n}";
            } else if (textUntilPosition.trim().endsWith("console.")) {
              suggestion = "log('Hello Copilot');";
            } else {
              // 默认不显示
              return { items: [] };
            }
            // =======================================================

            return {
              items: [
                {
                  insertText: suggestion,
                  // 建议显示的范围通常是光标位置
                  range: {
                    startLineNumber: position.lineNumber,
                    startColumn: position.column,
                    endLineNumber: position.lineNumber,
                    endColumn: position.column,
                  },
                },
              ],
            };
          },

          freeInlineCompletions(completions) {
            // 释放资源（如果需要）
          },
        });

        // 2. 创建编辑器实例
        const editor = monaco.editor.create(document.getElementById("container"), {
          value: '// 试着输入 "func" 或 "console." 等待一下...\n',
          language: "javascript",
          theme: "vs-dark",
          fontSize: 14,
          // 开启 inlineSuggest 功能
          inlineSuggest: {
            enabled: true,
            showToolbar: "always", // 鼠标悬停时显示操作栏
          },
        });
      });
    </script>
  </body>
</html>