1. Monaco Editor

https://microsoft.github.io/monaco-editor/

在項(xiàng)目中使用monaco-editor

npm install monaco-editor -S

在組件中引入并使用

<template>
  <div class="home">
    <div id="monaco"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
export default {
  mounted() {
    monaco.editor.create(document.getElementById("monaco"),{
            value:`console.log("hello,world")`,
            language:"javascript",
            theme: "vs-dark"
    })
  }
}
</script>

<style lang="less" scoped>
#monaco {
  width: 800px;
  height: 500px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}
</style>

生成編輯器

如果這里沒有語法高亮，在main.js中引入javascript

// main.js
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

2. 一些控件

加入vscode的查找控件

import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';

頁面中按下ctrl+F會(huì)彈出vscode的查找框

3. Diff Edit

想在頁面中加入類似vscode的代碼對比功能，可以使用如下

// 這里只展示關(guān)鍵代碼
let monacoInstance = monaco.editor.createDiffEditor(document.getElementById("monaco"),{
    language:"javascript",
    theme: "vs-dark"
})
monacoInstance.setModel({
    original: monaco.editor.createModel(a, 'javascript'),    //原版內(nèi)容
    modified: monaco.editor.createModel(b, 'javascript')     //修改的內(nèi)容
})

Didd Edit效果