2

Monaco でコンテキスト メニューにシステム メニューを使用する方法はありますか?

WKWebViewmacOSの a に Monaco を組み込みました。コンテキスト (右クリック) メニューは、ネイティブ システム メニューとしてではなく、Web ビュー内にレンダリングされます。(ただし、VSCodeはネイティブのコンテキスト メニューを表示します。)

どうすればこれを機能させることができますか？

これが私が欲しいものです:(VS Codeで見たもの)

ここに画像の説明を入力

しかし、私はこれを取得します: (埋め込み WKWebView で得られるもの)

ここに画像の説明を入力

編集2：

これが実際にシステム メニューであることは、含まれているウィンドウの外に表示される方法からわかります。スクリーンショット:

ここに画像の説明を入力

4

1 に答える 1

4

したがって、これらすべてを掘り下げた後。この回答は、これを達成する方法へのポインタを提供します。ContextMenuどのブラウザーでも MonaEditorでレンダリングされたものを見ると、常にビューポートによってクリップされます。

電子ブラウザー

Chrome ブラウザ

これは、contextmenu が HTML ベースであり、ビューポートの制限によってバインドされているためです。

では、なぜ VSCode は ViewPort からメニューを表示できるのでしょうか?

VSCode コンテキスト メニュー

これは、electron がネイティブ メニューを表示する機能を備えているためです。VSCode は Monaco 独自のメニューを無効にし、右クリックでネイティブ メニューを作成します。方法を示すnpmモジュールの下を見ることができます

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

WKWebView を使用している場合、electron 機能を使用できないため、Swift コードに Context ハンドラーをネイティブに実装する必要があります。以下は、正しい方向に向けるいくつかのSOスレッドです

Mac の WKWebView のコンテキスト メニューを変更または上書きするにはどうすればよいですか?

Swiftを使用してiOS WKWebviewでJavascriptイベントをキャッチする

アプローチが機能することを確認するために、以下のコードで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.
        }
    }


}

そして、monaco のデフォルトのコンテキスト メニューを実行して無効にするeditor.updateOptions({contextmenu: false})と、エディタに表示されるコンテキスト メニューがネイティブになりました。これが、ネイティブコードからカスタマイズする必要があるものです

コンテキスト メニュー ネイティブ

于 2018-04-08T12:00:44.540 に答える