vue项目-在页面中插入一个编辑器(monaco)

1. Monaco Editor

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

在项目中使用monaco-editor

npm install monaco-editor -S

在组件中引入并使用

生成编辑器

如果这里没有语法高亮，在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效果