How to initialize Monaco Editor in WebView2 WPF?

Question

I have this code: 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

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

please help anyone, ive been trying to solve this problem for a few days now...

score 5 · Answer 1 · answered Jul 29 '22 at 16:16

The Monaco Editor is the code editor that powers VS Code.

I've already posted an answer in stackoverflow for WinForms: 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.

How to use the Monaco editor inside a WPF application

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.
Please note that the Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is 0.18.1.

To do so, follow these steps:

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.

score 1 · Answer 2 · 2022-07-27T19:38:52.377

for 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:

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


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

How to initialize Monaco Editor in WebView2 WPF?

2 Answers2

How to use the Monaco editor inside a WPF application