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

Question

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

KRNL
突触X

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

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

Answer 1

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

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

创建 Windows 窗体应用程序（.NET 或 .NET Framework）
安装
```
Microsoft.Web.WebView2
```
NuGet 包（Monaco 编辑器不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1）
在您的项目中创建一个名为
```
MonacoEditor
```
的文件夹。
从 Monaco Editor 网站下载 Monaco 编辑器。（我通过下载版本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>

编辑您的项目文件，找到以下部分：
```
<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"));
}

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

Answer 2

我正在使用 Visual Studio C#.net Windows 窗体应用程序，并且创建了一个继承自 webview2 的用户控件，该控件应该是显示 monaco (VS Code Studio) 编辑器。该用户控件具有 GetValue() 和 SetValue(string value) 方法。

现在我的问题是，我如何处理编辑器的更改值事件？

我的用户控件来源是：

using Microsoft.Web.WebView2.WinForms;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MainNameSpace
{
    public class ScriptEditor : WebView2
    {
        public event EventHandler Changed;
        public bool loaded = false;

        public ScriptEditor()
        {
            Init();
        }

        public async void Init()
        {
            await this.EnsureCoreWebView2Async();
            Uri uri = new Uri(System.IO.Path.Combine(Application.StartupPath, "Monaco\\index.html"));
            this.Source = uri;
            loaded = true;
        }
        public async Task<string> GetValue()
        {
            while(loaded == false)
            {
                Application.DoEvents();
            }
            var value = await this.ExecuteScriptAsync("editor.getValue()");
            return value;
        }
        public async void SetValue(string value)
        {
            while(loaded == false)
            {
                Application.DoEvents();
            }
            await this.ExecuteScriptAsync("editor.setValue('" + value + "')");
        }

    }
}

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2