如何在 WebView2 WPF 中初始化摩纳哥编辑器？答案

【问题标题】：How to initialize Monaco Editor in WebView2 WPF?如何在 WebView2 WPF 中初始化摩纳哥编辑器？
【发布时间】：2023-01-12 07:09:39
【问题描述】：

我有这个代码：https://controlc.com/42eca8b5

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MonacoBrowser"
        xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="MonacoBrowser.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Wpf:WebView2 x:Name="MonacoBr"/>

    </Grid>
</Window>

Initialize Code in MainWindow.xaml.cs

All Files

我也尝试在 cefsharp 上加载摩纳哥，但也没有任何效果，我尝试以各种方式初始化它并尝试运行它，但无济于事

请帮助任何人，我已经尝试解决这个问题几天了......

【问题讨论】：

标签： c# wpf monaco-editor webview2

【解决方案1】：

Monaco Editor 是为 VS Code 提供支持的代码编辑器。

我已经在 stackoverflow 中为 WinForms 发布了一个答案：How to use the Monaco editor inside a Windows Forms application?，在这里我将发布我的答案的 WPF 版本，它非常相似。

如何在 WPF 应用程序中使用 Monaco 编辑器

您可以使用 WebView2 控件在 WPF 中显示 Monaco editor，然后您可以拥有一个代码编辑器，它支持编辑支持智能感知等的语法高亮代码。
请注意，Monaco Editor 不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1。

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

创建 WPF 应用程序（.NET 或 .NET Framework）
安装 Microsoft.Web.WebView2 NuGet 包 (Monaco Editor 不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1)
在您的项目中创建一个名为Monaco 的文件夹。
从Monaco Editor 站点下载摩纳哥编辑器。（我通过下载测试version 0.33.0）
在文件资源管理器中，打开Mocano 文件夹，然后解压下载的文件并将解压文件的min 子文件夹复制到您的Monaco 文件夹中。

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

<!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() {
	console.log("Hello world!");
}', 
            language: 'javascript' 
        }); 
    </script> 
</body> 
</html>

右键单击项目文件并选择编辑。然后找到下面的一段代码（如果存在的话）：
```
<ItemGroup> 
  <Folder Include="Monaco" /> 
</ItemGroup> 
```
并将其替换为以下内容：
```
<ItemGroup> 
  <Content Include="Monaco**"> 
    <CopyToOutputDirectory>Always</CopyToOutputDirectory> 
  </Content> 
</ItemGroup> 
```
它基本上将 Monaco 文件夹下的所有文件都包含到项目中，并将它们复制到输出目录中。
请注意，对于 .NET Framework 项目，您需要先卸载项目，然后在编辑项目文件后重新加载它。
在主窗口上放置一个 WebView2 实例，如下所示：
```
<Grid> 
     <Wpf:WebView2 x:Name="webView21"/> 
</Grid> 
```

使用以下代码处理窗口的Load事件：

private void Window_Loaded(object sender, RoutedEventArgs e) 
{ 
     this.webView21.Source = 
        new Uri(System.IO.Path.Combine( 
            System.AppDomain.CurrentDomain.BaseDirectory,  
            @"Monacoindex.html")); 
}

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

【讨论】：

【解决方案2】：

对于 WebView2：

public MainWindow()
    {
        InitializeComponent();
        MonacoInitiliaze();
        
    }

    async void MonacoInitiliaze()
    {
        await MonacoBr.EnsureCoreWebView2Async(null);
        MonacoBr.CoreWebView2.Navigate(Path.Combine("file:", Directory.GetCurrentDirectory(), "bin", "monaco", "index.html"));
    }

对于 CefSharp：

    public MainWindow()
    {
        InitializeComponent();
        InitializeChromium();
    }


    public void InitializeChromium()
    {
        testbr.Address = Directory.GetCurrentDirectory()  + "/bin/Monaco/index.html";
    }

【讨论】：