求助：基于Monaco API实现C#、Lua脚本本地保存与打开（无需刷新）

1. 实现C#脚本的保存与打开（基于Monaco + 浏览器File API） #

Monaco仅负责编辑逻辑，本地文件读写需结合浏览器File API实现，步骤如下：

• 初始化C#语法编辑器
  先创建支持C#语法的编辑器实例：

  // 页面需提前准备id为editor-container的容器元素
  const editor = monaco.editor.create(document.getElementById('editor-container'), {
    value: '',
    language: 'csharp', // 指定C#语法，自动启用高亮
    theme: 'vs-dark'
  });
  

• 保存脚本到本地
  编写保存函数，将编辑器内容转为可下载的文件：

  function saveCSharpScript() {
    const content = editor.getValue();
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'script.cs'; // 指定保存的文件名
    downloadLink.click();
    URL.revokeObjectURL(url); // 释放浏览器资源
  }
  

  给页面的「保存」按钮绑定此函数即可，点击直接触发下载，无需刷新。

• 打开本地C#脚本
  用隐藏的文件选择器实现，读取选中文件内容并填充到编辑器：

  <!-- 页面添加隐藏的文件输入控件 -->
  <input type="file" id="csharp-file-picker" accept=".cs" style="display:none">
  

  const filePicker = document.getElementById('csharp-file-picker');
  
  // 绑定「打开」按钮点击事件
  document.getElementById('open-csharp-btn').addEventListener('click', () => {
    filePicker.click();
  });
  
  // 监听文件选择事件，读取内容到编辑器
  filePicker.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      editor.setValue(event.target.result);
    };
    reader.readAsText(selectedFile);
  });
  

2. Lua语法高亮的本地保存与打开（无刷新） #

逻辑与C#场景一致，仅需修改编辑器语法类型和文件后缀，全程异步处理无需刷新：

• 初始化Lua语法编辑器

  const luaEditor = monaco.editor.create(document.getElementById('lua-editor-container'), {
    value: '',
    language: 'lua', // 指定Lua语法，自动启用高亮
    theme: 'vs-dark'
  });
  

• 保存Lua脚本
  调整文件名后缀即可：

  function saveLuaScript() {
    const content = luaEditor.getValue();
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'script.lua';
    downloadLink.click();
    URL.revokeObjectURL(url);
  }
  

• 打开本地Lua脚本
  修改文件选择器的接受类型：

  <input type="file" id="lua-file-picker" accept=".lua" style="display:none">
  

  const luaFilePicker = document.getElementById('lua-file-picker');
  
  document.getElementById('open-lua-btn').addEventListener('click', () => {
    luaFilePicker.click();
  });
  
  luaFilePicker.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      luaEditor.setValue(event.target.result);
    };
    reader.readAsText(selectedFile);
  });
  

补充说明 #

• 所有操作均为前端异步完成，无需页面刷新或后端服务；
• 若你是用C#桌面端（如WPF/WinForms）集成Monaco，需使用对应.NET封装库（如MonacoEditor.Wpf），文件读写改用C#的File类实现，核心逻辑一致：读取文件内容赋值给编辑器，获取编辑器内容写入本地文件。

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