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

Question

I have this code: https://controlc.com/42eca8b5我有这个代码： 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在 MainWindow.xaml.cs 中初始化代码

All Files所有文件

i also try load monaco on cefsharp, but nothing worked there either, i try in various ways to initialize it and try to run it, but to no avail我也尝试在cefsharp上加载摩纳哥，但那里也没有任何效果，我尝试以各种方式初始化它并尝试运行它，但无济于事

please help anyone, ive been trying to solve this problem for a few days now...请帮助任何人，我已经尝试解决这个问题几天了......

Answer 1

for WebView2:对于 WebView2：

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

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

for CefSharp:对于 CefSharp：

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


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

Answer 2

The Monaco Editor is the code editor that powers VS Code. Monaco Editor是支持 VS Code 的代码编辑器。

I've already posted an answer in stackoverflow for WinForms: How to use the Monaco editor inside a Windows Forms application?我已经在 WinForms 的 stackoverflow 中发布了一个答案： How to use the Monaco editor inside a Windows Forms application? , here I'll post a WPF version of my answer which is pretty similar. ，在这里我将发布我的答案的 WPF 版本，它非常相似。

How to use the Monaco editor inside a WPF application如何在 WPF 应用程序中使用 Monaco 编辑器

You can use a WebView2 control to show the Monaco editor in a WPF, then you can have a code editor which supports editing the syntax-highlighted code which supports intellisense and much more.您可以使用 WebView2 控件在 WPF 中显示Monaco 编辑器，然后您可以拥有一个支持编辑语法高亮代码的代码编辑器，该代码支持智能感知等等。
Please note that the Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is 0.18.1.请注意，摩纳哥编辑器不再支持 IE 11。在 IE 11 上测试的最后一个版本是 0.18.1。

To do so, follow these steps:为此，请按照下列步骤操作：

Create a WPF Application (.NET, or .NET Framework)创建 WPF 应用程序（.NET 或 .NET 框架）
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 )安装Microsoft.Web.WebView2 NuGet package（摩纳哥编辑器不再支持 IE 11。最后一个在 IE 上测试的版本是 IE 11.1 ）
Create a folder named Monaco in your project.在您的项目中创建一个名为Monaco的文件夹。
Download Monaco editor from Monaco Editor site.从Monaco Editor网站下载 Monaco 编辑器。 (I tested by downloading version 0.33.0 ) （我通过下载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.在文件资源管理器中，打开Mocano文件夹，然后提取下载的文件并将提取文件的min子文件夹复制到您的Monaco文件夹中。

Add index.html file to the Monaco folder in filesystem, with the following content:将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>

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.它基本上将Monaco文件夹下的所有文件包含到项目中，并将它们复制到output目录中。
Please note, for a .NET Framework project you need to first unload the project, and then after editing the project file, reload it.请注意，对于 .NET 框架项目，您需要先卸载项目，然后在编辑项目文件后重新加载。
Drop an instance of WebView2 on the main window, like this:将 WebView2 的实例拖放到主 window 上，如下所示：
```
 <Grid> <Wpf:WebView2 x:Name="webView21"/> </Grid>
```

Handle the Load event of the window with the following code:使用以下代码处理 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")); }

Run the application and see the result, the code editor with syntax-highlighted code which supports intellisense.运行应用程序并查看结果，代码编辑器带有语法高亮代码，支持智能感知。

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

问题描述

2 个解决方案

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

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

How to use the Monaco editor inside a WPF application如何在 WPF 应用程序中使用 Monaco 编辑器

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

问题描述

2 个解决方案

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

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

How to use the Monaco editor inside a WPF application如何在 WPF 应用程序中使用 Monaco 编辑器

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

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