Vue3 利用monaco Diff Editor实现代码com

前情提要

场景： 产品要求实现两个json的前后对比的功能，以提供快速查看修改内容，类似于vscode里面的working tree.

问题： 既然功能类似于vscode,而vscode的底层代码编辑器就是monaco editor,所以利用微软出的基于浏览器的编辑器monaco来实现需求～

基础步骤

1. 安装monaco editor

npm install monaco-editor -S

2. 引入并初始化实例

创建一个container

<template>
  <div
    ref="container"
    class="monaco-editor"
    :style="'height: ' + height + 'px'"
  ></div>
</template>

引入monaco 初始化这个container

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
let originalModel;
let modifiedModel;
let monacoDiffInstance;
const container = ref(null);
function init() {
  // 初始化编辑器实例
  monacoDiffInstance = monaco.editor.createDiffEditor(
    container.value,
    //配置项
    defaultOpts
  );
  originalModel = monaco.editor.createModel(
    oldValue,
    'json'
  );
  modifiedModel = monaco.editor.createModel(
    newvalue,
    'json'
  );
  monacoDiffInstance.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
}

在做编辑器实例的初始化时，定义originalModel modifiedModel monacoDiffInstance变量时，使用ref()或reactive()来定义上述响应式变量都无法生效，这里如果有懂的大神可以指教一下..

3. 设置配置项

const defaultOpts = reactive({
  value: "",
  theme: "vs", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网https://microsoft.github.io/monaco-editor/docs.html
  roundedSelection: false, // 右侧不显示编辑器预览框
  autoIndent: true, // 自动缩进
  readOnly: true, // 是否只读
  diffWordWrap:true,
  wordWrap:'on',
  automaticLayout:true,
  scrollBeyondLastLine:false,
  scrollbar:{
    verticalScrollbarSize: 0
  },
});

这里吐槽一下..这个官方文档实在是太难读了，想要通过配置修改一个很简单的功能要在里面绕半天..给大家推荐一个中文版文档虽然也不是特别好找但是最起码先解决了language的问题👉🏻https://aydk.site/editor/

封装组件

以上已经实现了最基本的对比编辑器的功能了，接下来封装就是基础操作了～

// desc: 基于monaco的diff editor 
// feat：支持Json文件对比
// usage： <diffEditor
//          ref="monacoContainer"
//         :oldValue="oldValue" //旧值
//          :value="value"  //新值
//         :visible="editorVisible"
//          style="width: 100%"
//        ></diffEditor>
<template>
  <div
    ref="container"
    class="monaco-editor"
    :style="'height: ' + height + 'px'"
  ></div>
</template>

<script setup>
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import {
  defineProps,
  reactive,
  ref,
  defineEmits,
  watch,
nextTick,
onBeforeUnmount,
} from "vue";

const props = defineProps({
  language: {
    type: String,
    default: "json",
  },
  oldValue: String,
  value: String,
  visible: Boolean,
  height: {
    type: Number,
    default: 380,
  },
});

watch(
  () => props.oldValue,
  (newValue) => {
    originalModel = monaco.editor.createModel(newValue, props.language);
    monacoDiffInstance.setModel({
      original: originalModel,
      modified: modifiedModel,
    });
  },
  { deep: true }
);
watch(
  () => props.value,
  (newValue) => {
    modifiedModel = monaco.editor.createModel(newValue, props.language);
    monacoDiffInstance.setModel({
      original: originalModel,
      modified: modifiedModel,
    });
  },
  { deep: true }
);
watch(
  () => props.visible,
  (newValue) => {
    newValue && nextTick(()=>{init()})
  },
  {
    immediate: true,
  }
);
const defaultOpts = reactive({
  value: "",
  theme: "IDLE", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
  roundedSelection: false, // 右侧不显示编辑器预览框
  autoIndent: true, // 自动缩进
  readOnly: true, // 是否只读
  diffWordWrap:true,
  wordWrap:'on',
  automaticLayout:true,
  scrollBeyondLastLine:false,
  scrollbar:{
    verticalScrollbarSize: 0
  },
});
let originalModel;
let modifiedModel;
let monacoDiffInstance;
const container = ref(null);
function init() {
  monaco.editor.defineTheme('IDLE', Theme);
  monaco.editor.setTheme('IDLE')
  // 初始化编辑器实例
  monacoDiffInstance = monaco.editor.createDiffEditor(
    container.value,
    defaultOpts
  );
  originalModel = monaco.editor.createModel(
    JSON.stringify(JSON.parse(props.oldValue), null, "\t"),
    props.language
  );
  modifiedModel = monaco.editor.createModel(
    JSON.stringify(JSON.parse(props.value), null, "\t"),
    props.language
  );
  monacoDiffInstance.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
}
onBeforeUnmount(()=>{
    monacoDiffInstance.dispose()
})
</script>

<style lang="less">
.the-code-diff-editor-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  .monaco-editor .scroll-decoration {
    box-shadow: none;
  }
}
</style>

OK～～～完结撒花🎉...