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效果
