如何在 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