安装插件:
monaco-editor必须安装,余下两个根据你的项目类型去下载
npm install monaco-editor@0.44.0 --save-dev
npm install monaco-editor-webpack-plugin@6.0.0 --save-devnpm 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>