摩纳哥编辑器：使用本机（系统）上下文菜单

Question

有没有办法让 Monaco 为上下文菜单使用系统菜单？

我在 macOS 上的 WKWebView 中嵌入了 Monaco。上下文（右键单击）菜单呈现在 Web 视图中，而不是作为本机系统菜单。（但是 VSCode 显示本机上下文菜单。）

我怎样才能使这个工作？

这就是我想要的：（我在 VS Code 中看到的）

但我得到了这个：（我在嵌入式 WKWebView 中得到的）

编辑 2：

你可以看到这实际上是一个系统菜单，它呈现在包含 window 之外的方式。截图：

Answer 1

所以在深入研究了所有这些之后。这个答案将指导您如何实现这一目标。如果您在任何浏览器中查看 MonaEditor 渲染的 ContextMenu，它总是被视口裁剪。

这是因为上下文菜单是基于HTML的，受视口限制。

那么为什么 VSCode 能够在 ViewPort 之外显示菜单？

这是因为 electron 具有显示本机菜单的功能。 VSCode 禁用 Monaco 自己的菜单并在右键单击时创建本机菜单。你可以在下面看到 npm 模块，它显示了如何

https://github.com/mixmaxhq/electron-editor-context-menu

现在，当您使用 WKWebView 时，您不能使用电子功能，因此这意味着您需要在 Swift 代码中本地实现上下文处理程序。以下是一些 SO 线程，它们将为您指明正确的方向

我使用以下代码创建了一个 Cocoa 应用程序，以确保该方法有效

//
//  ViewController.swift
//  WebViewTEst
//
//  Created by Tarun Lalwani on 4/8/18.
//  Copyright © 2018 Tarun Lalwani. All rights reserved.
//

import Cocoa
import WebKit

class ViewController: NSViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()


        let url = "https://microsoft.github.io/monaco-editor/"

        let prefs = self.webView.configuration.preferences
        prefs.javaScriptEnabled = true
        prefs.plugInsEnabled = true
        self.webView.customUserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5"
        self.webView.configuration.preferences.setValue(true, forKey: "developerExtrasEnabled")
        self.webView.load(URLRequest(url: URL(string: url)!))


        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }


}

然后通过运行 editor.updateOptions({contextmenu: false}) 禁用了摩纳哥的默认上下文菜单，之后编辑器上显示的上下文菜单是原生的。现在这就是您现在需要从本机代码自定义的内容

摩纳哥编辑器：使用本机（系统）上下文菜单

Monaco editor: Use native (system) context menu

visual-studio-monaco

visual-studio-code

vscode-extensions

monaco-editor

编辑 2：