如何在WebView2 WPF中初始化Monaco编辑器？

Question

如何在WebView2 WPF中初始化Monaco编辑器？

3

<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上加载Monaco，但是什么都没有起作用。我以各种方式进行了初始化并尝试运行它，但都无济于事。

请大家帮帮我，我已经努力解决这个问题几天了...

- user19586191

2个回答

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

- user19586191

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

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

- Reza Aghaei · Accepted Answer

Monaco Editor是驱动VS Code的代码编辑器。

我已经在StackOverflow上发布了一个WinForms答案：如何在Windows Forms应用程序中使用Monaco编辑器？，这里我将发布一个非常相似的WPF版本的回答。

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

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

要使用Monaco编辑器，请按照以下步骤操作：

Create a WPF 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 Monaco 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>

Right click on the project file and choose edit. Then find the following piece of code(if exists):
```
<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 main window, like this:

<Grid> 
     <Wpf:WebView2 x:Name="webView21"/> 
</Grid>

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

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

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