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

Question

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

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

我该如何做到这一点？

这就是我想要的:(我在VS Code中看到的）

但是我得到了这个:(我在嵌入式WKWebView中获得的内容）

编辑2：

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

Answer 1

所以在深入研究这一切之后。这个答案将指出如何实现这一目标。如果您在任何浏览器中查看由MonaEditor呈现的ContextMenu，它始终会被视口剪切。

现在这是因为contextmenu是一个基于HTML的视图，它受视口限制的约束。

那么为什么VSCode能够显示ViewPort的菜单？

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

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

现在，当您使用WKWebView时，您无法使用电子功能，因此这意味着您需要在Swift代码中本机实现Context处理程序。下面是一些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})禁用monaco默认上下文菜单，之后编辑器上显示的上下文菜单是本机的。现在，您需要根据本机代码进行自定义