Vue3，利用monaco-editor实现sql对比编辑器，自界说高亮

前言：上篇文章讲了monaco-editor的基本利用，这篇文章讲解如何实现monaco-editor的对比结果。

一：安装monaco-editor

1. npm install monaco-editor

复制代码

二：利用

1. import * as monaco from "monaco-editor";
2. import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";

复制代码

三：封装基本组件

注意：原本monaco-editor的结果是左编辑器为原始sql，右编辑器为新sql。我这的需求是让左编辑器为可编辑，即左编辑器为新sql。因此我开启了左边的可编辑设置，且将右编辑器设置为只读。（必要根据需求本身更改设置以及传入的值）

1. <template>  <div class="codemirror">    <div id="monacoEditorDiff" ref="editorDiffRef" class="monaco-editor"></div>  </div></template><script setup>import * as monaco from "monaco-editor";
2. 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。

1. // 定义从父组件接收的属性
2. const props = defineProps({
3.   options: {
4.     type: Object,
5.     default: () => ({
6.       theme: "dark",
7.     }),
8.   },
9.   oldValue: {
10.     type: String,
11.   },
12.   newValue: {
13.     type: String,
14.   },
15.   //需要高亮的关键词
16.   highLightWords: {
17.     type: Array,
18.     default: () => [],
19.   },
20. });
23. /**
24. * 设置高亮
25. */
27. const setHighlight = () => {
28.   //有关键字的情况下 才需要高亮
29.   if (props.highLightWords.length > 0) {
30.     // 获取 Diff Editor 中原始编辑器的容器节点
31.     const originalEditorContainer = editor.getOriginalEditor().getDomNode();
32.     //获取第一个子节点
33.     const originalSonElement =
34.       originalEditorContainer && originalEditorContainer.firstChild;
35.     //获取第一个子节点的第一个子节点
36.     const originalGrandsonElement =
37.       originalSonElement && originalSonElement.firstChild;
39.     const linesContainer = originalEditorContainer.querySelector(".view-lines");
40.     // 获取所有行的容器节点
41.     const divLines = linesContainer.childNodes;
42.     // 遍历每一行的容器节点
43.     divLines.forEach((lineNode) => {
44.       //拿到每一行的总span节点
45.       const spanNodes = lineNode.childNodes;
46.       //拿到每一行的总span节点内容
47.       let originalSpanHtml = spanNodes[0].innerHTML;
48.       // 存储匹配到的关键字
49.       let successKeyWord = [];
50.       // 检查 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字
51.       props.highLightWords.forEach((highlightWord) => {
52.         //创建正则表达式进行全局、忽略大小写匹配
53.         const regex = new RegExp(highlightWord, "gi");
54.         //如果匹配到，则将匹配成功的关键字存储起来
55.         if (regex.test(originalSpanHtml)) {
56.           successKeyWord.push(highlightWord);
57.         }
58.       });
59.       // 对 successKeyWord 数组进行去重操作
60.       successKeyWord = Array.from(new Set(successKeyWord));
62.       // 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span
63.       if (successKeyWord.length > 0) {
64.         // 创建一个新的字符串来保存修改后的结果
65.         let modifiedHtml = originalSpanHtml;
66.         // 遍历匹配成功关键字数组中的每个字符串
67.         successKeyWord.forEach((str) => {
68.           // 创建带有黄色背景色的 <span> 元素
69.           const highlightedText = `<span style="background-color: yellow;">${str}</span>`;
70.           // 使用正则表达式进行全局、忽略大小写的替换
71.           modifiedHtml = modifiedHtml.replace(
72.             new RegExp(str, "gi"),
73.             highlightedText
74.           );
75.         });
77.       // 将修改后的 HTML 内容设置回原来的 span 元素中
78.       spanNodes[0].innerHTML = modifiedHtml;
79.     }
80.   });
81. }
82. };
84. // 组件挂载后创建编辑器实例
85. onMounted(() => {
86.   //初始化编辑器
87.   init();
88.   setHighlight();
89. });

复制代码

上面的代码已经实现了高亮，但是由于每次输入值，以及页面放大缩小，编辑器放大缩小等操作，编辑器都会重新加载渲染dom，导致高亮失效。
一：因此必要监听编辑器的dom变化，并在每次变化时都重新渲染高亮。
二：修改编辑器内容时，重新渲染高亮。
三：加入了防抖函数，制止在输入值的时间，频繁渲染高亮。
安装防抖：

1. npm install lodash

复制代码

引入防抖：

1. //引入防抖
2. import debounce from "lodash/debounce";

复制代码

利用

1.   // 原始模型的内容发生变化时触发的操作
2.   originalModel.onDidChangeContent(() => {
3.     //获取修改后的文本
4.     // const modifiedText = modifiedModel.getValue();
6.     //获取原始文本
7.     const OriginalText = originalModel.getValue();
8.     //内容发生变化 需要重新设置高亮
9.     setHighlight();
10.     emits("newSqlCode", OriginalText);
11.   });
14. /**
15. * 设置自定义高亮
16. */
17. let observer = null;
18. let originalEditorContainer = null;
20. //挂载高亮观察器
21. const setLightObserver = () => {
22.   //有关键字的情况下 才需要高亮
23.   if (props.highLightWords.length > 0) {
24.     // 获取 Diff Editor 中原始编辑器的容器节点
25.     originalEditorContainer = editor.getOriginalEditor().getDomNode();
26.     //获取第一个子节点
27.     const originalSonElement =
28.       originalEditorContainer && originalEditorContainer.firstChild;
29.     //获取第一个子节点的第一个子节点
30.     const originalGrandsonElement =
31.       originalSonElement && originalSonElement.firstChild;
33.     //创建一个 MutationObserver 实例
34.     observer = new MutationObserver(() => {
35.       setHighlight();
36.     });
38.     // 配置观察器以监视特定类型的变化
39.     if (originalSonElement) {
40.       // 监视 originalSonElement 的样式变化，如果发生变化重新设置高亮(用于页面放大缩小时)
41.       observer.observe(originalSonElement, {
42.         attributes: true, // 监视属性的变化
43.         attributeFilter: ["style"], // 监视特定属性
44.       });
45.       // 监视 originalGrandsonElement 的样式变化，如果发生变化重新设置高亮(用于编辑器放大缩小滚动时)
46.       observer.observe(originalGrandsonElement, {
47.         attributes: true, // 监视属性的变化
48.         attributeFilter: ["style"], // 监视特定属性
49.       });
50.     }
51.   }
52. };
54. //使用防抖，避免多次渲染黄色背景
55. const setHighlight = debounce(() => {
56.   const linesContainer = originalEditorContainer.querySelector(".view-lines");
57.   // 获取所有行的容器节点
58.   const divLines = linesContainer.childNodes;
59.   // 遍历每一行的容器节点
60.   divLines.forEach((lineNode) => {
61.     //拿到每一行的总span节点
62.     const spanNodes = lineNode.childNodes;
63.     //拿到每一行的总span节点内容
64.     let originalSpanHtml = spanNodes[0].innerHTML;
65.     // 存储匹配到的关键字
66.     let successKeyWord = [];
67.     // 检查 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字
68.     props.highLightWords.forEach((highlightWord) => {
69.       //创建正则表达式进行全局、忽略大小写匹配
70.       const regex = new RegExp(highlightWord, "gi");
71.       //如果匹配到，则将匹配成功的关键字存储起来
72.       if (regex.test(originalSpanHtml)) {
73.         successKeyWord.push(highlightWord);
74.       }
75.     });
76.     // 对 successKeyWord 数组进行去重操作
77.     successKeyWord = Array.from(new Set(successKeyWord));
79.     // 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span
80.     if (successKeyWord.length > 0) {
81.       // 创建一个新的字符串来保存修改后的结果
82.       let modifiedHtml = originalSpanHtml;
83.       // 遍历匹配成功关键字数组中的每个字符串
84.       successKeyWord.forEach((str) => {
85.         // 创建带有黄色背景色的 <span> 元素
86.         const highlightedText = `<span style="background-color: yellow;">${str}</span>`;
87.         // 使用正则表达式进行全局、忽略大小写的替换
88.         modifiedHtml = modifiedHtml.replace(
89.           new RegExp(str, "gi"),
90.           highlightedText
91.         );
92.       });
94.       // 将修改后的 HTML 内容设置回原来的 span 元素中
95.       spanNodes[0].innerHTML = modifiedHtml;
96.     }
97.   });
98. }, 500);
100. // 组件挂载后创建编辑器实例
101. onMounted(() => {
102.   //初始化编辑器
103.   init();
104.   //挂载高亮观察器
105.   setLightObserver();
107. });
109. onBeforeUnmount(() => {
110.   if (editor) {
111.     // 组件卸载前销毁编辑器实例
112.     editor.dispose();
113.     // 组件卸载时断开 MutationObserver
114.      if (observer) {
115.       observer.disconnect();
116.     }
117.   }
118. });

复制代码

五：完整代码

1. <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";
2. 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[0].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[0].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>

复制代码

结果图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。