摩纳哥编辑器setTheme不是function

Question

我正在尝试在摩纳哥编辑器上设置自定义主题，但是当我更改要创建的自定义主题的 colors（基于现有主题）时，更改不适用，我使用 setTheme 来应用主题但是每次我这样做时，我都会收到一条错误消息，提示 setTheme 不是 function。

我使用了playground上反映的代码来让它工作，有人知道是否有与此相关的问题吗？ 以及如何解决？ 我的版本目前是 10.01

Answer 1

好的，所以我遇到了同样的问题，并找到了正确的答案是@mhuss。

但在他的整个回答中，真正的要诀在于细节。 仔细看。 它是： monaco.editor.setTheme('vs'); 。 强调摩纳哥 ！

我首先尝试了以下内容，因为这样做对我来说真的很有意义：

var myEditor = monaco.editor.create( ... blah blah ...);
...
myEditor.setTheme('vs-dark');

我试图更新实例，但似乎是全局设置了主题。

Answer 2

我有一段时间遇到相同的问题，但设法使其正常工作。

我使用以下选项初始化了摩纳哥编辑器：

editor = monaco.editor.create(document.getElementById("text-log-container"), {
            language: "javascript",
            value: editorData,
            scrollbar: {
                vertical: 'auto',
                horizontal: 'auto'
            },
            theme: "vs-dark",
            automaticLayout: true,
            readOnly: true
        });

然后在函数或直接窗口中：

monaco.editor.setTheme('vs')

Answer 3

如果目标是动态更新现有主题，那么实际上就像“重新定义”主题一样简单：

monaco.editor.defineTheme('myCoolTheme', {...})

然后，摩纳哥将更新主题定义。 如果该主题已经是编辑器的活动主题，它将直接将新主题设置应用于编辑器。

另请参阅https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#definetheme

Answer 4

要在创建时使用默认主题之一，请使用：

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true,
    theme: 'vs-dark' // this, this line here! (other default options are: 'vs' and 'hc-black')
});

在事后设置主题（如果您真的需要设置 3 秒超时才能像我一样查看主题更改），请执行以下操作：

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true // note the lack of theme property in the call to create
});

setTimeout(() => {
    monaco.editor.setTheme('vs-dark');
}, 2999); // because 3 seconds turned out to be too long for me :p

你也可以同时做——从黑暗开始，然后转向光明：

this.editor = monaco.editor.create(myRef, {
    language: languageId,
    minimap: { enabled: false },
    autoIndent: 'none',
    automaticLayout: true,
    theme: 'vs-dark'
});

setTimeout(() => {
    monaco.editor.setTheme('vs');
}, 2998);

Answer 5

首先，您必须定义您的自定义主题。

如果此处的任何解决方案都不能解决您的问题，也许您可以尝试以下替代解决方案：

yourMonacoEditorInstance._themeService.setTheme("your-theme-name")

例如：

const editor = monaco.editor.create({
  language: "javascript",
  value: "console.log("hello world"),
  
});

editor._themeService.setTheme("your-theme-name");