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

Question

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

Sat*_*r31 3 .net c# winforms monaco-editor

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

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

既然这些应用程序能够使用 Monaco，那么一定有一种方法可以将它与 C# 一起使用，对吗？

Answer 1

Rez*_*aei 9

您可以使用 WebView2 控件在 Windows 窗体应用程序中显示Monaco 编辑器，然后您可以拥有一个代码编辑器，该编辑器支持编辑语法突出显示的代码，支持智能感知等功能。
请注意，Monaco 编辑器不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1。

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

创建 Windows 窗体应用程序（.NET 或 .NET Framework）
安装Microsoft.Web.WebView2NuGet包（Monaco编辑器不再支持IE 11。在IE 11上测试的最后一个版本是0.18.1）
创建一个以MonacoEditor您的项目命名的文件夹。
从摩纳哥编辑器网站下载摩纳哥编辑器。（我通过下载0.33.0版本进行测试）
在文件资源管理器中，打开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>

Run Code Online (Sandbox Code Playgroud)

编辑您的项目文件，找到以下部分：
```
<ItemGroup>
  <Folder Include="Monaco\" />
</ItemGroup>
```
Run Code Online (Sandbox Code Playgroud)
并将其替换为以下内容：
```
<ItemGroup>
  <Content Include="Monaco\**">
     <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
</ItemGroup>
```
Run Code Online (Sandbox Code Playgroud)
它基本上将 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"));
}

Run Code Online (Sandbox Code Playgroud)

运行应用程序并查看结果，代码编辑器带有语法突出显示的代码，支持智能感知。

归档时间：	4 年前
查看次数：	3576 次
最近记录：	3 年，11 月前