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

Question

有没有办法让摩纳哥使用系统菜单作为上下文菜单？

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

我怎样才能做到这一点？

---

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

但我明白了：（我在嵌入式 WKWebView 中得到了什么）

---

编辑 2：

通过它在包含窗口之外的呈现方式，您可以看到它实际上是一个系统菜单。截图：

Answer 1

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

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

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

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

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

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

How can the context menu in WKWebView on the Mac be modified or overridden?

Catch Javascript Event in iOS WKWebview with Swift

我使用以下代码创建了一个 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}) 禁用摩纳哥默认上下文菜单，之后编辑器上显示的上下文菜单是本机的。现在这就是您现在需要从本机代码自定义的内容