Monaco-editor: Use monaco in a desktop application without electron

Created on 18 Aug 2016  路  7Comments  路  Source: microsoft/monaco-editor

Would it be possible to use monaco as a component in a win32/winforms/wpf application (or other gui toolkit on linux etc.)? If so, is there any existing examples?

feature-request integration

Most helpful comment

Hi,
FYI, we are also using the Monaco editor in a .NET Application (WPF) in an embedded WebBrowser control. After we added code to disable Compatibility View (IE7 Mode) on startup (before the Webbrowser control is created), by opening the Registry Key HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION and creating a DWORD value with the name of the EXE file and value 11001, we didn't experience any problems with the Monaco Editor and focus handling.
Documentation of the registry setting: https://msdn.microsoft.com/en-us/library/ee330730(v=vs.85).aspx#browser_emulation

Before setting this registry key, we had some problems (like the text cursor continued to blink although the webbrowser control lost focus, and sometimes the editor didn't accept new text although it had focus) even though we set the document mode using the X-UA-Compatible: IE=Edge header.

Edit: Make sure to set this registry key before calling any GUI code, e.g. Appliation.Run() (WinForms) or App.Main() (WPF). Otherwise, some GUI code may try to access the FeatureControl key in HKCU, and if it doesn't exist at that time, the WebBrowser control won't look for it even when setting the key before creating the WebBrowser control.

All 7 comments

Monaco is an html/javascript construct, so you would need to make a basic web page to host it, and use an embedded browser to host it. Even doing so, you might run into trouble passing data between the main application and the browser window.

In winforms, you could try including a minimal web page hosting monaco into the WebBrowser control. We currently do this in one application, but it is has proven to be very finicky.

I would recommend looking into CefGlue as a way of embedding your own browser in a way that will be consistent across platforms and versions of windows. You will have to pay specific attention to how the IPC mechanism of cef works, and how to inject your own javascript objects to control monaco from your application.

We currently do this in one application, but it is has proven to be very finicky.

Can you elaborate? Do you have any feeling for which piece is the source of the issue?

Keyboard focus give us the biggest issue right now, the editor will often get into a state where it accepts some hotkeys but not others. Usually this results in it accepting text deletion, but not any new text. This could be a problem with the embedded web browser's focus handling, or it may be an issue with the third party winforms container eating keypress messages for its own hotkey framework.

Hi,
FYI, we are also using the Monaco editor in a .NET Application (WPF) in an embedded WebBrowser control. After we added code to disable Compatibility View (IE7 Mode) on startup (before the Webbrowser control is created), by opening the Registry Key HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION and creating a DWORD value with the name of the EXE file and value 11001, we didn't experience any problems with the Monaco Editor and focus handling.
Documentation of the registry setting: https://msdn.microsoft.com/en-us/library/ee330730(v=vs.85).aspx#browser_emulation

Before setting this registry key, we had some problems (like the text cursor continued to blink although the webbrowser control lost focus, and sometimes the editor didn't accept new text although it had focus) even though we set the document mode using the X-UA-Compatible: IE=Edge header.

Edit: Make sure to set this registry key before calling any GUI code, e.g. Appliation.Run() (WinForms) or App.Main() (WPF). Otherwise, some GUI code may try to access the FeatureControl key in HKCU, and if it doesn't exist at that time, the WebBrowser control won't look for it even when setting the key before creating the WebBrowser control.

alexandru, do you have the basic list of pieces we need from Monaco to host it in the WebBrowser. For instance, we need the HTML which I assume has a bunch of references to javascript which would be found in /distributed as part of my my application directories?

Thanks for some of the pointers. It would be interesting to see a practical example of it.

For UWP apps there's this project: https://github.com/hawkerm/monaco-editor-uwp

Was this page helpful?
0 / 5 - 0 ratings

Related issues

andreymarchenko picture andreymarchenko  路  3Comments

SoftTimur picture SoftTimur  路  3Comments

PinkyJie picture PinkyJie  路  3Comments

galyech picture galyech  路  3Comments

Panhaiwei picture Panhaiwei  路  3Comments