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

Question

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

3

我有一个Windows表单应用程序(.net框架)，我想在其中使用Monaco编辑器。搜索互联网并没有提供太多帮助，stackoverflow上也没有相同的问题。我不知道有多少应用程序使用Monaco(不是由Microsoft制作的)，但我知道的是:

请注意，这些都是Roblox作弊软件，而且它们是我能找到的唯一使用Monaco编辑器并用C#编写的应用程序。

既然这些应用程序能够使用Monaco，那么一定有办法在C#中使用它，对吗？

- Satindar31

1

在 WebView2 中托管它。 - Jimi

1

https://github.com/syngp/SynapseX/blob/be2282aa65b818b45743688cd477c788c7fc819f/Synapse%20Open%20Source%20UI/src/Form1.Designer.cs#L39 - Hans Passant

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reza Aghaei · Accepted Answer

你可以使用 WebView2 控件在 Windows Forms 应用程序中显示 Monaco 编辑器，这样你就可以拥有一个支持语法高亮、智能感知等功能的代码编辑器。
请注意，Monaco 编辑器不再支持 IE 11。最后一个在 IE 11 上测试过的版本是 0.18.1。

要这样做，请按照以下步骤：

Create a Windows Forms Application (.NET, or .NET Framework)
Install Microsoft.Web.WebView2 NuGet package (The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is 0.18.1)
Create a folder named MonacoEditor in your project.
Download Monaco editor from Monaco Editor site. (I tested by downloading version 0.33.0)
In the file explorer, open the Mocano folder, then extract the downloaded file and copy the min subfolder of extracted files into your Monaco folder.

Add index.html file to the Monaco folder in filesystem, with the following content:

<!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>

Edit your project file, find the following section:
```
<ItemGroup>
  <Folder Include="Monaco\" />
</ItemGroup>
```
And replace it with the following:
```
<ItemGroup>
  <Content Include="Monaco\**">
     <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
</ItemGroup>
```
It basically includes all the files under the Monaco folder into the project and also copies them into the output directory.
Please note, for a .NET Framework project you need to first unload the project, and then after editing the project file, reload it.
Drop an instance of WebView2 on the form.

Handle the Load event of the form with the following code:

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

Run the application and see the result, the code editor with syntax-highlighted code which supports intellisense.