【Monaco Editor】Monaco Editor实现code diff

目录

• 安装包
• webpack的改造 (vue.config.js)
• 创建一个hello world
• 创建code diff

Monaco Editor 与VS Code 一样强大，但是Monaco Editor是网页版的code editor。下面我们介绍一下Monaco Editor的简单用法。

安装包

monaco-editor: 0.21.2
monaco-editor-webpack-plugin: 2.1.0

webpack的改造 (vue.config.js)

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

const vueConfig = {
    chainWebpack: (config) => {
             config.plugin('monaco').use(new MonacoWebpackPlugin())
   }
  },

}

创建一个hello world

HTML:

<div id="container" style="height: 100%"></div>

JS:

monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript'
});

const defaultOpts = {
                value: '',
                theme: 'vs-dark',
                roundedSelection: false,
                autoIndent: true,
                readOnly: true
 }

const settings = {
   value: "function hello() {\n\talert('Hello world!');\n}",
   language: 'javascript'
};
const opts = { ...defaultOpts, ...settings };
 monaco.editor.create(document.getElementById('container'),, opts);

创建code diff

HTML:

<div id="container" style="height: 100%"></div>

JS:

var originalModel = monaco.editor.createModel('heLLo world!', 'text/plain');
var modifiedModel = monaco.editor.createModel('hello orlando!', 'text/plain');

var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
diffEditor.setModel({
	original: originalModel,
	modified: modifiedModel
});

更多实例请查看官网实例：https://microsoft.github.io/monaco-editor/playground.html