Electron 中摩纳哥编辑器的奇怪样式问题

Question

当我在 electron-amd-sample 之后将 Monaco 编辑器嵌入我的 Electron 应用程序时，编辑器的行为符合预期。

但是，该示例演示了在 HTML 页面的脚本标记内实例化编辑器，而我想在我的项目 Javascript 文件中访问编辑器。

我将以下代码添加到 JS 文件中以实例化编辑器，并观察到编辑器存在一些奇怪的样式问题：

当我点击滚动菜单时，它变成白色而不是有点透明：
当我点击 go-to-references 时，window 出现然后开始缩小直到消失：

请注意，我为现在嵌入了编辑器的页面定义了其他 css，而它以前是运行在独立的浏览器 window 中。不过，我不确定如何判断这是否是一个问题。

/**
 * Sets up the Monaco code editor and links it to the code container div.
 *
 * @returns a Promise and passes the editor to resolve.
 */
async function setupMonacoEditor() {
    return new Promise((resolve, reject) => {
        amdRequire(['vs/editor/editor.main'], function () {
            const editor = monaco.editor.create(
                document.getElementById('ideCodeContainer'),
                {
                    language: 'javascript',
                    theme: vs-dark,
                    automaticLayout: true,
                }
            );
            resolve(editor);
        });
    });
}

Answer 1

原来有两个问题：

我定义了一个 css class .active，太笼统了，与滚动菜单的颜色冲突。
设置

webFrame.setZoomFactor(Math.min(0.00104058272 * height, 0.00059523809 * width));

在 electron 中导致引用的大小调整 window。

Electron 中摩纳哥编辑器的奇怪样式问题

Strange style issues with Monaco Editor in Electron

javascript

css

electron

monaco-editor