monaco-editor + vue 2

npm

https://www.npmjs.com/package/monaco-editor

api

https://microsoft.github.io/monaco-editor/api/index.html

使用

常用编辑器

<template>
	<div ref="container" class="editor"></div>
</template>

import * as monaco from "monaco-editor";
export default {
  data() {
    return {
      monacoEditor: {},
  },
  mounted() {
  	// 创建实例
  	this.monacoEditor = monaco.editor.create(this.$refs.container, {
      readOnly: false, // 只读
      language: "yaml", // 语言
      theme: "vs-dark", // 主题色
      wordWrap: "on", // 换行
      automaticLayout: true // 自动布局
    });
  }
}

配置字段（Interface IStandaloneEditorConstructionOptions）

https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html

常用方法

// 监听文本改变事件
this.monacoEditor.onDidChangeModelContent((e) => {});

// 获取值
this.monacoEditor.getValue();

// 设置值
this.monacoEditor.setValue('content');

// 销毁
this.monacoEditor.dispose();

对比编辑器

this.monacoEditor = monaco.editor.createDiffEditor(this.$refs.container, {
  readOnly: true,
  language: "yaml",
  theme: "vs-dark",
  automaticLayout: true
});

this.monacoEditor.setModel({
  original: monaco.editor.createModel(this.originalContent, "yaml"),
  modified: monaco.editor.createModel(this.modifiedContent, "yaml")
});

配置字段（Interface IStandaloneDiffEditorConstructionOptions）

https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneDiffEditorConstructionOptions.html