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

Question

我有这个代码： 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>

在 MainWindow.xaml.cs 中初始化代码

所有文件

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

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

Answer 1

对于 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";
    }

Answer 2

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

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

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

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

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

创建 WPF 应用程序（.NET 或 .NET 框架）
安装Microsoft.Web.WebView2 NuGet package（摩纳哥编辑器不再支持 IE 11。最后一个在 IE 上测试的版本是 IE 11.1 ）
在您的项目中创建一个名为Monaco的文件夹。
从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文件夹下的所有文件包含到项目中，并将它们复制到output目录中。
请注意，对于 .NET 框架项目，您需要先卸载项目，然后在编辑项目文件后重新加载。
将 WebView2 的实例拖放到主 window 上，如下所示：
```
 <Grid> <Wpf:WebView2 x:Name="webView21"/> </Grid>
```

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

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

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

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

问题描述

2 个解决方案

解决方案1
1 2022-07-27 14:01:33

解决方案2
0 2022-07-29 16:16:01

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

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

问题描述

2 个解决方案

解决方案1 1 2022-07-27 14:01:33

解决方案2 0 2022-07-29 16:16:01

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

解决方案1
1 2022-07-27 14:01:33

解决方案2
0 2022-07-29 16:16:01