Vue3，利用monaco-editor实现sql对比编辑器，自界说高亮
前言：上篇文章讲了monaco-editor的基本利用，这篇文章讲解如何实现monaco-editor的对比结果。一：安装monaco-editor
npm install monaco-editor 二：利用
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; 三：封装基本组件
注意：原本monaco-editor的结果是左编辑器为原始sql，右编辑器为新sql。我这的需求是让左编辑器为可编辑，即左编辑器为新sql。因此我开启了左边的可编辑设置，且将右编辑器设置为只读。（必要根据需求本身更改设置以及传入的值）
<template><div class="codemirror"> <div id="monacoEditorDiff" ref="editorDiffRef" class="monaco-editor"></div></div></template><script setup>import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";// 界说从父组件接收的属性const props = defineProps({options: { type: Object, default: () => ({ theme: "dark", }),},oldValue: { type: String,},newValue: { type: String,},});const emits = defineEmits(["newSqlCode"]);//解决 Monaco Editor 无法正确加载其所需的 Web Workerself.MonacoEnvironment = {getWorker(workerId, label) { return new editorWorker();},};let editor;let originalModel;let modifiedModel;const init = () => {editor = monaco.editor.createDiffEditor( document.getElementById("monacoEditorDiff"), { value: "", //值 autoIndex: true, // 控制是否开启主动索引。当开启时，编辑器会主动创建索引以加速搜索和语义高亮。 fontSize: 14, // 字体大小 language: "sql", //语言 theme: props.options.theme, //主题 readOnly: true, // 是否只读 overviewRulerBorder: false, // 滚动是否有边框 cursorSmoothCaretAnimation: true, // 控制光标平滑动画的开启与关闭。当开启时，光标移动会有平滑的动画结果。 mouseWheelZoom: true, //设置是否开启鼠标滚轮缩放功能 folding: true, //控制是否开启代码折叠功能 automaticLayout: true, // 控制编辑器是否主动调解布局以适应容器大小的变化 minimap: { // 关闭代码缩略图 enabled: false, // 是否启用预览图 }, scrollbar: { verticalScrollbarSize: 2, // 垂直滚动条宽度，默认px horizontalScrollbarSize: 2, // 水平滚动条高度 }, wordWrap: "on", // 开启主动换行 roundedSelection: true, // 右侧不显示编辑器预览框 originalEditable: true, // 是否允许修改原始文本 ...props.options, });//创建左右编辑器originalModel = monaco.editor.createModel(props.newValue, "sql");modifiedModel = monaco.editor.createModel(props.oldValue, "sql");editor.setModel({ original: originalModel, modified: modifiedModel,});// 原始模子的内容发生变化时触发的操作originalModel.onDidChangeContent(() => { //获取修改后的文本 // const modifiedText = modifiedModel.getValue(); //获取原始文本 const OriginalText = originalModel.getValue(); emits("newSqlCode", OriginalText);});// 修改后模子的内容发生变化时触发的操作modifiedModel.onDidChangeContent(() => {});removeArrow();};/** * 移除 revert change（还原更改）箭头 */const removeArrow = () => {setTimeout(() => { const revertChangeButtons = document.querySelectorAll( ".codicon-arrow-right" ); revertChangeButtons.forEach((button) => { button.style.display = "none"; });}, 500);};// 组件挂载后创建编辑器实例onMounted(() => {//初始化编辑器init();});onBeforeUnmount(() => {if (editor) { // 组件卸载前烧毁编辑器实例 editor.dispose();}});</script><style scoped lang="less">.monaco-editor {height: 150px;width: 100%;}</style> 四：实现自界说单词高亮
实现目标需求：将传入的，必要高亮的关键词在编辑器中高亮。
注意：
一：sql内里大小写并不敏感，因此必要在匹配高亮关键词的时间，将大小写转换。
二：同一个span内里有大概出现匹配多个高亮关键词的情况
三：不能直接修改高亮词地点span的背景颜色，这样子会导致其他不匹配的字母也被高亮。应该找到对应的高亮词，替换成带有背景颜色的span。
// 定义从父组件接收的属性
const props = defineProps({
options: {
type: Object,
default: () => ({
theme: "dark",
}),
},
oldValue: {
type: String,
},
newValue: {
type: String,
},
//需要高亮的关键词
highLightWords: {
type: Array,
default: () => [],
},
});
/**
* 设置高亮
*/
const setHighlight = () => {
//有关键字的情况下 才需要高亮
if (props.highLightWords.length > 0) {
// 获取 Diff Editor 中原始编辑器的容器节点
const originalEditorContainer = editor.getOriginalEditor().getDomNode();
//获取第一个子节点
const originalSonElement =
originalEditorContainer && originalEditorContainer.firstChild;
//获取第一个子节点的第一个子节点
const originalGrandsonElement =
originalSonElement && originalSonElement.firstChild;
const linesContainer = originalEditorContainer.querySelector(".view-lines");
// 获取所有行的容器节点
const divLines = linesContainer.childNodes;
// 遍历每一行的容器节点
divLines.forEach((lineNode) => {
//拿到每一行的总span节点
const spanNodes = lineNode.childNodes;
//拿到每一行的总span节点内容
let originalSpanHtml = spanNodes.innerHTML;
// 存储匹配到的关键字
let successKeyWord = [];
// 检查 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字
props.highLightWords.forEach((highlightWord) => {
//创建正则表达式进行全局、忽略大小写匹配
const regex = new RegExp(highlightWord, "gi");
//如果匹配到，则将匹配成功的关键字存储起来
if (regex.test(originalSpanHtml)) {
successKeyWord.push(highlightWord);
}
});
// 对 successKeyWord 数组进行去重操作
successKeyWord = Array.from(new Set(successKeyWord));
// 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span
if (successKeyWord.length > 0) {
// 创建一个新的字符串来保存修改后的结果
let modifiedHtml = originalSpanHtml;
// 遍历匹配成功关键字数组中的每个字符串
successKeyWord.forEach((str) => {
// 创建带有黄色背景色的 <span> 元素
const highlightedText = `<span style="background-color: yellow;">${str}</span>`;
// 使用正则表达式进行全局、忽略大小写的替换
modifiedHtml = modifiedHtml.replace(
new RegExp(str, "gi"),
highlightedText
);
});
// 将修改后的 HTML 内容设置回原来的 span 元素中
spanNodes.innerHTML = modifiedHtml;
}
});
}
};
// 组件挂载后创建编辑器实例
onMounted(() => {
//初始化编辑器
init();
setHighlight();
}); 上面的代码已经实现了高亮，但是由于每次输入值，以及页面放大缩小，编辑器放大缩小等操作，编辑器都会重新加载渲染dom，导致高亮失效。
一：因此必要监听编辑器的dom变化，并在每次变化时都重新渲染高亮。
二：修改编辑器内容时，重新渲染高亮。
三：加入了防抖函数，制止在输入值的时间，频繁渲染高亮。
安装防抖：
npm install lodash 引入防抖：
//引入防抖
import debounce from "lodash/debounce";
利用
// 原始模型的内容发生变化时触发的操作
originalModel.onDidChangeContent(() => {
//获取修改后的文本
// const modifiedText = modifiedModel.getValue();
//获取原始文本
const OriginalText = originalModel.getValue();
//内容发生变化 需要重新设置高亮
setHighlight();
emits("newSqlCode", OriginalText);
});
/**
* 设置自定义高亮
*/
let observer = null;
let originalEditorContainer = null;
//挂载高亮观察器
const setLightObserver = () => {
//有关键字的情况下 才需要高亮
if (props.highLightWords.length > 0) {
// 获取 Diff Editor 中原始编辑器的容器节点
originalEditorContainer = editor.getOriginalEditor().getDomNode();
//获取第一个子节点
const originalSonElement =
originalEditorContainer && originalEditorContainer.firstChild;
//获取第一个子节点的第一个子节点
const originalGrandsonElement =
originalSonElement && originalSonElement.firstChild;
//创建一个 MutationObserver 实例
observer = new MutationObserver(() => {
setHighlight();
});
// 配置观察器以监视特定类型的变化
if (originalSonElement) {
// 监视 originalSonElement 的样式变化，如果发生变化重新设置高亮(用于页面放大缩小时)
observer.observe(originalSonElement, {
attributes: true, // 监视属性的变化
attributeFilter: ["style"], // 监视特定属性
});
// 监视 originalGrandsonElement 的样式变化，如果发生变化重新设置高亮(用于编辑器放大缩小滚动时)
observer.observe(originalGrandsonElement, {
attributes: true, // 监视属性的变化
attributeFilter: ["style"], // 监视特定属性
});
}
}
};
//使用防抖，避免多次渲染黄色背景
const setHighlight = debounce(() => {
const linesContainer = originalEditorContainer.querySelector(".view-lines");
// 获取所有行的容器节点
const divLines = linesContainer.childNodes;
// 遍历每一行的容器节点
divLines.forEach((lineNode) => {
//拿到每一行的总span节点
const spanNodes = lineNode.childNodes;
//拿到每一行的总span节点内容
let originalSpanHtml = spanNodes.innerHTML;
// 存储匹配到的关键字
let successKeyWord = [];
// 检查 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字
props.highLightWords.forEach((highlightWord) => {
//创建正则表达式进行全局、忽略大小写匹配
const regex = new RegExp(highlightWord, "gi");
//如果匹配到，则将匹配成功的关键字存储起来
if (regex.test(originalSpanHtml)) {
successKeyWord.push(highlightWord);
}
});
// 对 successKeyWord 数组进行去重操作
successKeyWord = Array.from(new Set(successKeyWord));
// 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span
if (successKeyWord.length > 0) {
// 创建一个新的字符串来保存修改后的结果
let modifiedHtml = originalSpanHtml;
// 遍历匹配成功关键字数组中的每个字符串
successKeyWord.forEach((str) => {
// 创建带有黄色背景色的 <span> 元素
const highlightedText = `<span style="background-color: yellow;">${str}</span>`;
// 使用正则表达式进行全局、忽略大小写的替换
modifiedHtml = modifiedHtml.replace(
new RegExp(str, "gi"),
highlightedText
);
});
// 将修改后的 HTML 内容设置回原来的 span 元素中
spanNodes.innerHTML = modifiedHtml;
}
});
}, 500);
// 组件挂载后创建编辑器实例
onMounted(() => {
//初始化编辑器
init();
//挂载高亮观察器
setLightObserver();
});
onBeforeUnmount(() => {
if (editor) {
// 组件卸载前销毁编辑器实例
editor.dispose();
// 组件卸载时断开 MutationObserver
if (observer) {
observer.disconnect();
}
}
}); 五：完整代码
<template><div class="codemirror"> <div id="monacoEditorDiff" ref="editorDiffRef" class="monaco-editor"></div></div></template><script setup>import { ref, onMounted, onBeforeUnmount } from "vue";import debounce from "lodash/debounce";import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";// 界说从父组件接收的属性const props = defineProps({options: { type: Object, default: () => ({ theme: "dark", }),},oldValue: { type: String,},newValue: { type: String,},//必要高亮的关键词highLightWords: { type: Array, default: () => [],},});const emits = defineEmits(["newSqlCode"]);//解决 Monaco Editor 无法正确加载其所需的 Web Workerself.MonacoEnvironment = {getWorker(workerId, label) { return new editorWorker();},};let editor;let originalModel;let modifiedModel;const init = () => {editor = monaco.editor.createDiffEditor( document.getElementById("monacoEditorDiff"), { value: "", //值 autoIndex: true, // 控制是否开启主动索引。当开启时，编辑器会主动创建索引以加速搜索和语义高亮。 fontSize: 14, // 字体大小 language: "sql", //语言 theme: props.options.theme, //主题 readOnly: true, // 是否只读 overviewRulerBorder: false, // 滚动是否有边框 cursorSmoothCaretAnimation: true, // 控制光标平滑动画的开启与关闭。当开启时，光标移动会有平滑的动画结果。 mouseWheelZoom: true, //设置是否开启鼠标滚轮缩放功能 folding: true, //控制是否开启代码折叠功能 automaticLayout: true, // 控制编辑器是否主动调解布局以适应容器大小的变化 minimap: { // 关闭代码缩略图 enabled: false, // 是否启用预览图 }, scrollbar: { verticalScrollbarSize: 2, // 垂直滚动条宽度，默认px horizontalScrollbarSize: 2, // 水平滚动条高度 }, wordWrap: "on", // 开启主动换行 roundedSelection: true, // 右侧不显示编辑器预览框 originalEditable: true, // 是否允许修改原始文本 ...props.options, });//创建左右编辑器originalModel = monaco.editor.createModel(props.newValue, "sql");modifiedModel = monaco.editor.createModel(props.oldValue, "sql");editor.setModel({ original: originalModel, modified: modifiedModel,});// 原始模子的内容发生变化时触发的操作originalModel.onDidChangeContent(() => { //获取修改后的文本 // const modifiedText = modifiedModel.getValue(); //获取原始文本 const OriginalText = originalModel.getValue(); //内容发生变化 必要重新设置高亮 setHighlight(); emits("newSqlCode", OriginalText);});// 修改后模子的内容发生变化时触发的操作modifiedModel.onDidChangeContent(() => {});removeArrow();};/** * 移除 revert change（还原更改）箭头 */const removeArrow = () => {setTimeout(() => { const revertChangeButtons = document.querySelectorAll( ".codicon-arrow-right" ); revertChangeButtons.forEach((button) => { button.style.display = "none"; });}, 500);};/** * 设置自界说高亮 */let observer = null;let originalEditorContainer = null;//挂载高亮观察器const setLightObserver = () => {//有关键字的情况下 才必要高亮if (props.highLightWords.length > 0) { // 获取 Diff Editor 中原始编辑器的容器节点 originalEditorContainer = editor.getOriginalEditor().getDomNode(); //获取第一个子节点 const originalSonElement = originalEditorContainer && originalEditorContainer.firstChild; //获取第一个子节点的第一个子节点 const originalGrandsonElement = originalSonElement && originalSonElement.firstChild; //创建一个 MutationObserver 实例 observer = new MutationObserver(() => { setHighlight(); }); // 设置观察器以监视特定范例的变化 if (originalSonElement) { // 监视 originalSonElement 的样式变化，如果发生变化重新设置高亮(用于页面放大缩小时) observer.observe(originalSonElement, { attributes: true, // 监视属性的变化 attributeFilter: ["style"], // 监视特定属性 }); // 监视 originalGrandsonElement 的样式变化，如果发生变化重新设置高亮(用于编辑器放大缩小滚动时) observer.observe(originalGrandsonElement, { attributes: true, // 监视属性的变化 attributeFilter: ["style"], // 监视特定属性 }); }}};//利用防抖，制止多次渲染黄色背景const setHighlight = debounce(() => {const linesContainer = originalEditorContainer.querySelector(".view-lines");// 获取所有行的容器节点const divLines = linesContainer.childNodes;// 遍历每一行的容器节点divLines.forEach((lineNode) => { //拿到每一行的总span节点 const spanNodes = lineNode.childNodes; //拿到每一行的总span节点内容 let originalSpanHtml = spanNodes.innerHTML; // 存储匹配到的关键字 let successKeyWord = []; // 查抄 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字 props.highLightWords.forEach((highlightWord) => { //创建正则表达式举行全局、忽略大小写匹配 const regex = new RegExp(highlightWord, "gi"); //如果匹配到，则将匹配乐成的关键字存储起来 if (regex.test(originalSpanHtml)) { successKeyWord.push(highlightWord); } }); // 对 successKeyWord 数组举行去重操作 successKeyWord = Array.from(new Set(successKeyWord)); // 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span if (successKeyWord.length > 0) { // 创建一个新的字符串来生存修改后的结果 let modifiedHtml = originalSpanHtml; // 遍历匹配乐成关键字数组中的每个字符串 successKeyWord.forEach((str) => { // 创建带有黄色背景致的 <span> 元素 const highlightedText = `<span style="background-color: yellow;">${str}</span>`; // 利用正则表达式举行全局、忽略大小写的替换 modifiedHtml = modifiedHtml.replace( new RegExp(str, "gi"), highlightedText ); }); // 将修改后的 HTML 内容设置回原来的 span 元素中 spanNodes.innerHTML = modifiedHtml; }});}, 500);// 组件挂载后创建编辑器实例onMounted(() => {//初始化编辑器init();//挂载高亮观察器setLightObserver();});onBeforeUnmount(() => {if (editor) { // 组件卸载前烧毁编辑器实例 editor.dispose(); // 组件卸载时断开 MutationObserver if (observer) { observer.disconnect(); }}});</script><style scoped lang="less">.monaco-editor {height: 150px;width: 100%;}</style> 结果图：
https://i-blog.csdnimg.cn/blog_migrate/a76946b978c84d75a05cf0c434cc1740.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]