vue3通过monaco-editor实现文本对比功能_monaco编辑器开启对比

安装插件：

monaco-editor必须安装，余下两个根据你的项目类型去下载

npm install monaco-editor@0.44.0 --save-dev
npm install monaco-editor-webpack-plugin@6.0.0 --save-dev

npm install vite-plugin-monaco-editor@1.1.0 -save-dev

 常用属性：

    {
      value: "",
      theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网https://microsoft.github.io/monaco-editor/docs.html
      roundedSelection: false, // 编辑器是否有圆角
      scrollbar: {
        verticalScrollbarSize: 0,
      },
      readOnly: true, // 是否只读
      autoIndent: true, // 自动缩进
      scrollBeyondLastLine: false, // 滚动条是否可以滚到最后一条之后
      diffWordWrap: true,
      wordWrap: "on", // 文字过长是否自动换行
      enableSplitViewResizing: false,
      originalEditable: true, // 原始数据是否可编辑
      automaticLayout: true, // 自适应页面宽度
    }

引入控件，避免引入全部控件导致体积过大可以参考如下方法：

import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 
 
self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === "json") {
      return new jsonWorker();
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker();
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker();
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

整体代码：

<template>
  <div class="app-container">
      <div id="container" style="height: calc(100% - 50px); width: 100%"></div>
  </div>
</template>
 
<script setup>
import { getUploadList } from "@/api/ekms/article";
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
// import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
// import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
// import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
// import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
const route = useRoute();
const { proxy } = getCurrentInstance();
let diffEditor = null;
let originalModel = null;
let modifiedModel = null;
const upExpect = ref(null);
const compareData = ref({});
const originalText = ref("");
const modifiedText = ref("");
 
onBeforeMount(() => {
  getInitUpload();
  compareData.value = JSON.parse(localStorage.getItem("compare"));
});
 
onMounted(() => {
  nextTick(() => {
    originalText.value = compareData.value.original.attachContent
      ? compareData.value.original.attachContent
      : compareData.value.original.content;
    modifiedText.value = compareData.value.modified.attachContent
      ? compareData.value.modified.attachContent
      : compareData.value.modified.content;
    defineDiff();
  });
});
 
self.MonacoEnvironment = {
  getWorker(_, label) {
    //   if (label === "json") {
    //     return new jsonWorker();
    //   }
    //   if (label === "css" || label === "scss" || label === "less") {
    //     return new cssWorker();
    //   }
    //   if (label === "html" || label === "handlebars" || label === "razor") {
    //     return new htmlWorker();
    //   }
    //   if (label === "typescript" || label === "javascript") {
    //     return new tsWorker();
    //   }
    return new editorWorker();
  },
};
 
const defineDiff = () => {
  originalModel && originalModel.dispose();
  modifiedModel && modifiedModel.dispose();
  diffEditor && diffEditor.dispose();
  originalModel = monaco.editor.createModel(originalText.value, "text/plain");
  modifiedModel = monaco.editor.createModel(modifiedText.value, "text/plain");
  diffEditor = monaco.editor.createDiffEditor(
    document.getElementById("container"),
    {
      // value: "",
      // theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网https://microsoft.github.io/monaco-editor/docs.html
      // roundedSelection: false, // 编辑器是否有圆角
      // scrollbar: {
      //   verticalScrollbarSize: 0,
      // },
      // readOnly: true, // 是否只读
      // autoIndent: true, // 自动缩进
      scrollBeyondLastLine: false, // 滚动条是否可以滚到最后一条之后
      diffWordWrap: true,
      wordWrap: "on", // 文字过长是否自动换行
      enableSplitViewResizing: false,
      originalEditable: true, // 原始数据是否可编辑
      automaticLayout: true, // 自适应页面宽度
    }
  );
 
  diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
};
</script>
 
<style lang="scss" scoped></style>