摩納哥編輯器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");