VSCode 扩展：自定义编辑器 Webview 都在 typescript

Question

我需要创建 VSCode 扩展。 应该有带有 Webview 的自定义编辑器。我还需要在自定义编辑器和 Webview 中使用共享代码。另外，我需要使用一些库，所以我打算使用 webpack。你的yo code可以生成带有 typescript 和 webpack 的扩展框架。但我不能t 为 Webview 生成文件。

Answer 1

首先使用 webpack 创建一个生产版本。这作为您的 webview 的内容。但是因为无法直接从 URL 加载 webview，所以您必须插入 iframe 并从 88165788660208 加载它

    protected createPanel(caption: string, url: URL, placement?: string): Promise<boolean> {
        return new Promise((resolve) => {
            const viewColumn = (!placement || placement === "Active") ? ViewColumn.Active : ViewColumn.Beside;
            if (placement === "Beside Bottom") {
                void commands.executeCommand("workbench.action.editorLayoutTwoRows");
            }

            this.panel = window.createWebviewPanel(
                "the-webview", caption, viewColumn, {
                    enableScripts: true,
                    retainContextWhenHidden: true,
                },
            );

            this.panel.onDidDispose(() => { this.handleDispose(); });

            this.panel.webview.onDidReceiveMessage((message: IEmbeddedMessage) => {
                if (message.source === "app") {
                    // Handle webview messages here.
                }
            });

            // Insert an iframe to load the external URL.
            this.panel.webview.html = `
    <!doctype html><html lang="en">
    <head>
    <meta http-equiv="Content-Security-Policy" content="default-src *; img-src http: https:;
        script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'unsafe-inline' http: https: data: *;">
    </head>
    <body style="margin:0px;padding:0px;overflow:hidden;">
    <iframe id="frame:${caption}"
        src="${url.toString()}"
        frameborder="0" style="overflow: hidden; overflow-x: hidden; overflow-y: hidden; height:100%;
        width:100%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px" height="100%"
        width="100%">
    </iframe>
    <script>
        let frame;
        let vscode;

        window.addEventListener('message', (event) => {
            if (!frame) {
                vscode = acquireVsCodeApi();
                frame = document.getElementById("frame:${caption}");
            }

            if (event.data.source === "host") {
                // Forward message from the extension to the iframe.
                frame.contentWindow.postMessage(event.data, "*");
            } else if (event.data.source === "app") {
                // Forward messages from the iframe to the extension.
                vscode.postMessage(event.data);
            } else {
                // Forward certain messages to our parent window, which will further forward to vscode.
                switch (event.data.type) {
                    case "keydown": {
                        window.dispatchEvent(new KeyboardEvent("keydown", event.data));
                        break;
                    }
                    case "keyup": {
                        window.dispatchEvent(new KeyboardEvent("keyup", event.data));
                        break;
                    }
                }
            }
        });
    </script>

    </body></html>
    `;

        });
    }

webview 本身也是一个 iframe，但是它和 vscode 之间的消息处理已经到位。 但是，对于额外的 iframe，您必须执行类似于将消息从您的应用程序代码转发到 vscode 或其他方向的操作。 在我的代码中，我使用发送数据中的一个字段来决定我必须采取的方向。

VSCode 扩展：自定义编辑器 Webview 都在 typescript

问题描述

1 个解决方案

解决方案1
0 2022-02-11 13:22:01

VSCode 扩展：自定义编辑器 Webview 都在 typescript

问题描述

1 个解决方案

解决方案1 0 2022-02-11 13:22:01

解决方案1
0 2022-02-11 13:22:01