How to use the Monaco editor inside a Windows Forms application?

user_17408627 0
Viewed 679

I have a windows form app (.net framework) and I want to use Monaco editor inside it. Scouring the internet does the provide much help and stackoverflow does not have the same questions either. I don't know many apps that use Monaco (which are not made by Microsoft) but the ones I know are:

Please know that these are roblox cheats and were the only apps I could find which use the Monaco editor and are written in C#.

Since these apps are able to use Monaco there must be a way to use it with c#, right?

monaco-editor winforms .net c#
1 Answers

You can use a WebView2 control to show the Monaco editor in a Windows Forms Application, 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.

enter image description here

To do so, follow these steps:

  1. Create a Windows Forms Application (.NET, or .NET Framework)

  2. 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)

  3. Create a folder named MonacoEditor in your project.

  4. Download Monaco editor from Monaco Editor site. (I tested by downloading version 0.33.0)

  5. 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.

  6. 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>

  7. Edit your project file, find the following section:

    <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.

  8. Drop an instance of WebView2 on the form.

  9. Handle the Load event of the form with the following code:

    private void Form1_Load(object sender, EventArgs e)
{
   this.webView21.Source = 
      new Uri(Path.Combine(Application.StartupPath, @"Monaco\index.html"));
}

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

user_31108340
Related