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

2021-10-09 344 words 2 minutes

Contents

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

設定

安裝 monaco-editor (可看官往調整版本)

1

npm install monaco-editor@0.25.2

設定 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 - 博客園