提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

• • 前言
  • • 一、monaco-editor是什么？
    • 二、使用步驟
    • • 1.安裝依賴
      • 2.編寫組件
      • 3.自定義提示
• 總結(jié)

---

前言

最近接手了一個新項目，這個項目中有一個需求點(diǎn)就是需要展示json，并且可能還要編輯展示代碼，然后我就去調(diào)研了關(guān)于代碼編輯器的有關(guān)技術(shù)，經(jīng)過對比決定使用monaco-editor。

---

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、monaco-editor是什么？

monaco-editor一款代碼編輯器，是微軟開源的一個web編輯器，vscode中也是集成它來實(shí)現(xiàn)的，所以我們可以通過monaco-editor在我們的網(wǎng)頁中集成一個vscode出來，好的廢話不多說，直接開干。

二、使用步驟

1.安裝依賴

yarn add monaco-editor 或 npm i monaco-editor

2.編寫組件

我的代碼如下：

<div ref="json-editor-code" class="json-editor"></div> @Component export default class JsonCodeEditor extends Vue {@Prop({ default: () => {} }) private data!: any@Prop({ default: () => {} }) private opt?: anyprivate editor: any;private monaco: any= monaco;private options: any = {language: 'json', // 這里你可以自己寫語言。我是寫死了。automaticLayout: true,tabSize: 2,overviewRulerBorder: false,scrollBeyondLastLine: false,minimap: {enabled: false // 不要小地圖},theme: 'vs',fontSize: "14px",autoIndent:true,//自動布局}@Watch('data', { deep: true })private activeChange(val: any) {let current: any = this.jsonValidator(this.editor.getValue())if (current && !isEqual(val, current)) {this.editor.setValue(JSON.stringify(val))this.format()}}// json格式檢查private jsonValidator(val: string) {let parsedValuetry {parsedValue = JSON.parse(val)return parsedValue} catch (e) {return false}}private mounted() {this.initEditor()setTimeout(()=>{this.format()},100)}private initEditor() {let container = (this.$refs['json-editor-code'] as HTMLElement);this.editor = this.monaco.editor.create(container, {value: JSON.stringify(this.data),//編輯器初始顯示文字...Object.assign(this.options, this.opt),scrollbar: {horizontal: 'hidden',}})this.editor.onDidChangeModelContent(() => {this.$emit('code-change', this.jsonValidator(this.editor.getValue()), this.editor, this.monaco)})}private destroyed() {this.editor?.dispose()}private format() {this.editor.getAction('editor.action.formatDocument').run()} }

自此我們就完成一個編輯器組件的一次簡單封裝。

3.自定義提示

如果我們想要自定義代碼提示，并且還能自定義提示警告那該怎么辦呢？
其實(shí)官方給我們提供了一個演示的demo，但是我沒有直接跑出來，經(jīng)過我的摸索也算是實(shí)現(xiàn)了，附上schema規(guī)則書寫文檔和一個能在線生成規(guī)則的網(wǎng)站。接下來請看，假設(shè)規(guī)則如下:

const domain = '127.0.0.1' const validators = [{ name: 'button',uri: domain + 'schemas/base/button.json#',schema: {type: 'object',//...}},{ name: 'input',uri: domain + 'schemas/base/input.json#',schema: {type: 'object',//...}} ]

那么我們封裝一個函數(shù)用于獲取規(guī)則

private getRule(type) {return validators.find((vd: any) => vd.name === type);}private switchRules(val: any) {let ruleArray = getRule(val.type)ruleArray = Object.assign(cloneDeep(ruleArray), { fileMatch: ['*'] }) // 這里不可少 this.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({validate: true,schemas: cloneDeep(ruleArray)})}

獲取規(guī)則的函數(shù)我們有了以后，只需要在數(shù)據(jù)改變的時候調(diào)用這個方法即可更新成匹配當(dāng)前數(shù)據(jù)的規(guī)則了。

@Watch('data', { deep: true })private activeChange(val: any) {let current: any = this.jsonValidator(this.editor.getValue())if (current && !isEqual(val, current)) {this.switchRules(val) // 這樣就更新了規(guī)則this.editor.setValue(JSON.stringify(val))this.format()}}

---

總結(jié)

monaco還是有缺陷的，比如你的規(guī)則會被多個monaco-editor實(shí)例共享，不過只要你手動去除就好了，這點(diǎn)也還是能接收。希望這篇文章能夠幫助到你。喜歡的話記得一鍵三連。

總結(jié)

以上是生活随笔為你收集整理的Vue + monaco-editor的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。