1. Monaco Editor

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

在项目中使用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会弹出vscode的查找框

3. Diff Edit

想在页面中加入类似vscode的代码对比功能，可以使用如下

// 这里只展示关键代码
let monacoInstance = monaco.editor.createDiffEditor(document.getElementById("monaco"),{
    language:"javascript",
    theme: "vs-dark"
})
monacoInstance.setModel({
    original: monaco.editor.createModel(a, 'javascript'),    //原版内容
    modified: monaco.editor.createModel(b, 'javascript')     //修改的内容
})

Didd Edit效果