程式狂想筆記

一個攻城師奮鬥史

0%

monaco-editor 使用小記(搭配 Vite )

發表於 分類於 Disqus：

使用現成 monaco-editor 編輯器，是微軟開源項目，跟 VScode 介面一模一樣。
這邊簡單做個小記。

設定

  1. 安裝 monaco-editor (可看官往調整版本)
1
npm install monaco-editor@0.25.2
  1. 設定 HTML , JS
1
2
3
<div class="container">
  <div class="monaco" ref="monaco"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
import {editor} from 'monaco-editor'

export default {
  mounted(){
    editor.create(this.$refs.monaco, {
      value: "function hello() {\n\talert('Hello world!');\n}",
      language: "javascript"
    });

  }
}
</script>

<style scoped>
.monaco{
  border: 1px solid black;
  min-height: 800px;
}
.container{
  height: 2/3
}
</style>

主要重點 mounted 不是用 created

官方範例

想說為什麼官方沒入門手冊，但其實看官方 Playground 範例就夠了。

官方 Playground: Monaco Editor Playground

console 報錯

不知道是不是使用 Vite 關係，Webpack 感覺好像也會遇到一樣問題。雖然不影響結果，不知道哪裡出了甚麼問題，好像是 worker 沒正常運作，但我還是嘗試怎麼解決。

相關參考:

解決方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker()
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker()
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker()
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker()
    }
    return new editorWorker()
  }
}

參考來源:Link

你會發現 Firefox 不正常，後來爬了一下文javascript - SyntaxError: import declarations may only appear at top level of a module - Stack Overflow，換成 Chrome 就正常了…。所以這邊還是用 Chrome 開發好了。

GIT: 49fe93f173b92f97904331028b2bc500c9b00368

manaco-editor 搭 yaml

1
npm install js-yaml -D

以人有用過寫測試程式用js-yaml對設定檔做簡查 | 程式狂想筆記，太久之前用的，結果搜尋找到自己的文章XD。

ESM 怎麼載入呢?

1
2
import  * as jsYaml from  'js-yaml'
console.log('jsYaml',jsYaml)

manaco-editor 搭 yaml 驗證

使用 monaco-yaml，可以自己訂一個 Yaml Schema Json ，然後定完可用 manaco 做驗證 yaml 是否符合自己訂的內容，我覺得還滿有趣的，但目前不打算深入研究。

參考:

類似監聽 change event

1
2
3
4
5
pageEditor.onDidChangeModelContent(e=>{
  console.log(pageEditor.getValue())
  this.test = pageEditor.getValue()
  console.log(jsYaml.load(this.test))
})

在webpack中使用monaco-editor

在webpack中使用monaco-editor - zhangzongshan - 博客園