如何在 Windows Forms 应用程序中使用 Monaco 编辑器？

Question

我有一个 windows 表单应用程序（.net 框架），我想在其中使用 Monaco 编辑器。搜索互联网确实提供了很多帮助，而 Whosebug 也没有相同的问题。我不知道有多少应用程序使用 Monaco（不是由 Microsoft 制作），但我知道的是：

请注意，这些是 roblox 作弊，是我能找到的唯一使用 Monaco 编辑器并用 C# 编写的应用程序。

既然这些应用程序能够使用 Monaco，那么一定有办法将其与 C# 一起使用，对吗？

Answer 1

您可以使用 WebView2 控件在 Windows 表单应用程序中显示 Monaco editor，然后您可以拥有一个支持编辑 syntax-highlighted 代码的代码编辑器，该代码支持智能感知和更多。
请注意，Monaco Editor 不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1。

为此，请按照下列步骤操作：

创建 Windows 表单应用程序（.NET 或 .NET Framework）
安装Microsoft.Web.WebView2 NuGet包（Monaco Editor不再支持IE 11，在IE 11上测试的最新版本是0.18.1)
在您的项目中创建一个名为 MonacoEditor 的文件夹。
从 Monaco Editor site. (I tested by downloading version 0.33.0)
下载 Monaco 编辑器
在文件资源管理器中，打开 Mocano 文件夹，然后解压缩下载的文件并将解压缩文件的 min 子文件夹复制到您的 Monaco 文件夹中。

将index.html文件添加到文件系统的Monaco文件夹中，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="./min/vs/editor/editor.main.css" />
    <style>
        html, body { height: 100%; margin: 0; }
        #container { height: 100%; }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="./min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': './min/vs' } });
    </script>
    <script src="./min/vs/editor/editor.main.nls.js"></script>
    <script src="./min/vs/editor/editor.main.js"></script>
    <script>
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function helloWorld() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript'
        });
    </script>
</body>
</html>

编辑您的项目文件，找到以下部分：
```
<ItemGroup>
  <Folder Include="Monaco\" />
</ItemGroup>
```
并将其替换为以下内容：
```
<ItemGroup>
  <Content Include="Monaco\**">
     <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
</ItemGroup>
```
基本上把Monaco文件夹下的所有文件都包含到工程中，也复制到输出目录下
请注意，对于 .NET Framework 项目，您需要先卸载项目，然后在编辑项目文件后重新加载它。
在窗体上拖放一个 WebView2 实例。

处理表单的Load事件，代码如下：

private void Form1_Load(object sender, EventArgs e)
{
   this.webView21.Source = 
      new Uri(Path.Combine(Application.StartupPath, @"Monaco\index.html"));
}

运行应用并查看结果，代码编辑器带有 syntax-highlighted 支持智能感知的代码。

如何在 Windows Forms 应用程序中使用 Monaco 编辑器？

How to use the Monaco editor inside a Windows Forms application?

.net

c#

winforms

monaco-editor