devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3，使用monaco-editor实现sql对比编辑器，自定义高亮_monaco-editor vue3

作者：黑客灵魂 | 2024-07-20 06:29:07

赞

踩

monaco-editor vue3

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

一：安装monaco-editor

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>
  2.   <div class="codemirror">
  3.     <div id="monacoEditorDiff" ref="editorDiffRef" class="monaco-editor"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script setup>
  8. import * as monaco from "monaco-editor";
  9. import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
  10.  
  11. // 定义从父组件接收的属性
  12. const props = defineProps({
  13.   options: {
  14.     type: Object,
  15.     default: () => ({
  16.       theme: "dark",
  17.     }),
  18.   },
  19.   oldValue: {
  20.     type: String,
  21.   },
  22.   newValue: {
  23.     type: String,
  24.   },
  25. });
  26.  
  27. const emits = defineEmits(["newSqlCode"]);
  28. //解决 Monaco Editor 无法正确加载其所需的 Web Worker
  29. self.MonacoEnvironment = {
  30.   getWorker(workerId, label) {
  31.     return new editorWorker();
  32.   },
  33. };
  34.  
  35. let editor;
  36. let originalModel;
  37. let modifiedModel;
  38. const init = () => {
  39.   editor = monaco.editor.createDiffEditor(
  40.     document.getElementById("monacoEditorDiff"),
  41.     {
  42.       value: "", //值
  43.       autoIndex: true, // 控制是否开启自动索引。当开启时，编辑器会自动创建索引以加速搜索和语义高亮。
  44.       fontSize: 14, // 字体大小
  45.       language: "sql", //语言
  46.       theme: props.options.theme, //主题
  47.       readOnly: true, // 是否只读
  48.       overviewRulerBorder: false, // 滚动是否有边框
  49.       cursorSmoothCaretAnimation: true, // 控制光标平滑动画的开启与关闭。当开启时，光标移动会有平滑的动画效果。
  50.       mouseWheelZoom: true, //设置是否开启鼠标滚轮缩放功能
  51.       folding: true, //控制是否开启代码折叠功能
  52.       automaticLayout: true, // 控制编辑器是否自动调整布局以适应容器大小的变化
  53.       minimap: {
  54.         // 关闭代码缩略图
  55.         enabled: false, // 是否启用预览图
  56.       },
  57.       scrollbar: {
  58.         verticalScrollbarSize: 2, // 垂直滚动条宽度，默认px
  59.         horizontalScrollbarSize: 2, // 水平滚动条高度
  60.       },
  61.       wordWrap: "on", // 开启自动换行
  62.       roundedSelection: true, // 右侧不显示编辑器预览框
  63.       originalEditable: true, // 是否允许修改原始文本
  64.       ...props.options,
  65.     }
  66.   );
  67.  
  68.   //创建左右编辑器
  69.   originalModel = monaco.editor.createModel(props.newValue, "sql");
  70.   modifiedModel = monaco.editor.createModel(props.oldValue, "sql");
  71.   editor.setModel({
  72.     original: originalModel,
  73.     modified: modifiedModel,
  74.   });
  75.  
  76.   // 原始模型的内容发生变化时触发的操作
  77.   originalModel.onDidChangeContent(() => {
  78.     //获取修改后的文本
  79.     // const modifiedText = modifiedModel.getValue();
  80.  
  81.     //获取原始文本
  82.     const OriginalText = originalModel.getValue();
  83.     emits("newSqlCode", OriginalText);
  84.   });
  85.  
  86.   // 修改后模型的内容发生变化时触发的操作
  87.   modifiedModel.onDidChangeContent(() => {});
  88.   removeArrow();
  89. };
  90.  
  91. /**
  92.  * 移除 revert change（还原更改）箭头
  93.  */
  94. const removeArrow = () => {
  95.   setTimeout(() => {
  96.     const revertChangeButtons = document.querySelectorAll(
  97.       ".codicon-arrow-right"
  98.     );
  99.     revertChangeButtons.forEach((button) => {
  100.       button.style.display = "none";
  101.     });
  102.   }, 500);
  103. };
  104.  
  105. // 组件挂载后创建编辑器实例
  106. onMounted(() => {
  107.   //初始化编辑器
  108.   init();
  109. });
  110. onBeforeUnmount(() => {
  111.   if (editor) {
  112.     // 组件卸载前销毁编辑器实例
  113.     editor.dispose();
  114.   }
  115. });
  116. </script>
  117.  
  118. <style scoped lang="less">
  119. .monaco-editor {
  120.   height: 150px;
  121.   width: 100%;
  122. }
  123. </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. });
  21.  
  22.  
  23. /**
  24.  * 设置高亮
  25.  */
  26.  
  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;
  38.  
  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));
  61.  
  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.         });
  76.  
  77.       // 将修改后的 HTML 内容设置回原来的 span 元素中
  78.       spanNodes[0].innerHTML = modifiedHtml;
  79.     }
  80.   });
  81.  }
  82. };
  83.  
  84. // 组件挂载后创建编辑器实例
  85. onMounted(() => {
  86.   //初始化编辑器
  87.   init();
  88.   setHighlight();
  89. });

上面的代码已经实现了高亮，但是由于每次输入值，以及页面放大缩小，编辑器放大缩小等操作，编辑器都会重新加载渲染dom，导致高亮失效。

一：因此需要监听编辑器的dom变化，并在每次变化时都重新渲染高亮。

二：修改编辑器内容时，重新渲染高亮。

三：加入了防抖函数，避免在输入值的时候，频繁渲染高亮。

安装防抖：

npm install lodash

引入防抖：

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

使用

  1.   // 原始模型的内容发生变化时触发的操作
  2.   originalModel.onDidChangeContent(() => {
  3.     //获取修改后的文本
  4.     // const modifiedText = modifiedModel.getValue();
  5.  
  6.     //获取原始文本
  7.     const OriginalText = originalModel.getValue();
  8.     //内容发生变化 需要重新设置高亮
  9.     setHighlight();
  10.     emits("newSqlCode", OriginalText);
  11.   });
  12.  
  13.  
  14. /**
  15.  * 设置自定义高亮
  16.  */
  17. let observer = null;
  18. let originalEditorContainer = null;
  19.  
  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;
  32.  
  33.     //创建一个 MutationObserver 实例
  34.     observer = new MutationObserver(() => {
  35.       setHighlight();
  36.     });
  37.  
  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. };
  53.  
  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));
  78.  
  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.       });
  93.  
  94.       // 将修改后的 HTML 内容设置回原来的 span 元素中
  95.       spanNodes[0].innerHTML = modifiedHtml;
  96.     }
  97.   });
  98. }, 500);
  99.  
  100. // 组件挂载后创建编辑器实例
  101. onMounted(() => {
  102.   //初始化编辑器
  103.   init();
  104.   //挂载高亮观察器
  105.   setLightObserver();
  106.  
  107. });
  108.  
  109. onBeforeUnmount(() => {
  110.   if (editor) {
  111.     // 组件卸载前销毁编辑器实例
  112.     editor.dispose();
  113.     // 组件卸载时断开 MutationObserver
  114.      if (observer) {
  115.       observer.disconnect();
  116.     }
  117.   }
  118. });

五：完整代码

  1. <template>
  2.   <div class="codemirror">
  3.     <div id="monacoEditorDiff" ref="editorDiffRef" class="monaco-editor"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script setup>
  8. import { ref, onMounted, onBeforeUnmount } from "vue";
  9. import debounce from "lodash/debounce";
  10. import * as monaco from "monaco-editor";
  11. import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
  12.  
  13. // 定义从父组件接收的属性
  14. const props = defineProps({
  15.   options: {
  16.     type: Object,
  17.     default: () => ({
  18.       theme: "dark",
  19.     }),
  20.   },
  21.   oldValue: {
  22.     type: String,
  23.   },
  24.   newValue: {
  25.     type: String,
  26.   },
  27.   //需要高亮的关键词
  28.   highLightWords: {
  29.     type: Array,
  30.     default: () => [],
  31.   },
  32. });
  33. const emits = defineEmits(["newSqlCode"]);
  34. //解决 Monaco Editor 无法正确加载其所需的 Web Worker
  35. self.MonacoEnvironment = {
  36.   getWorker(workerId, label) {
  37.     return new editorWorker();
  38.   },
  39. };
  40. let editor;
  41. let originalModel;
  42. let modifiedModel;
  43. const init = () => {
  44.   editor = monaco.editor.createDiffEditor(
  45.     document.getElementById("monacoEditorDiff"),
  46.     {
  47.       value: "", //值
  48.       autoIndex: true, // 控制是否开启自动索引。当开启时，编辑器会自动创建索引以加速搜索和语义高亮。
  49.       fontSize: 14, // 字体大小
  50.       language: "sql", //语言
  51.       theme: props.options.theme, //主题
  52.       readOnly: true, // 是否只读
  53.       overviewRulerBorder: false, // 滚动是否有边框
  54.       cursorSmoothCaretAnimation: true, // 控制光标平滑动画的开启与关闭。当开启时，光标移动会有平滑的动画效果。
  55.       mouseWheelZoom: true, //设置是否开启鼠标滚轮缩放功能
  56.       folding: true, //控制是否开启代码折叠功能
  57.       automaticLayout: true, // 控制编辑器是否自动调整布局以适应容器大小的变化
  58.       minimap: {
  59.         // 关闭代码缩略图
  60.         enabled: false, // 是否启用预览图
  61.       },
  62.       scrollbar: {
  63.         verticalScrollbarSize: 2, // 垂直滚动条宽度，默认px
  64.         horizontalScrollbarSize: 2, // 水平滚动条高度
  65.       },
  66.       wordWrap: "on", // 开启自动换行
  67.       roundedSelection: true, // 右侧不显示编辑器预览框
  68.       originalEditable: true, // 是否允许修改原始文本
  69.       ...props.options,
  70.     }
  71.   );
  72.  
  73.   //创建左右编辑器
  74.   originalModel = monaco.editor.createModel(props.newValue, "sql");
  75.   modifiedModel = monaco.editor.createModel(props.oldValue, "sql");
  76.   editor.setModel({
  77.     original: originalModel,
  78.     modified: modifiedModel,
  79.   });
  80.  
  81.   // 原始模型的内容发生变化时触发的操作
  82.   originalModel.onDidChangeContent(() => {
  83.     //获取修改后的文本
  84.     // const modifiedText = modifiedModel.getValue();
  85.  
  86.     //获取原始文本
  87.     const OriginalText = originalModel.getValue();
  88.     //内容发生变化 需要重新设置高亮
  89.     setHighlight();
  90.     emits("newSqlCode", OriginalText);
  91.   });
  92.  
  93.   // 修改后模型的内容发生变化时触发的操作
  94.   modifiedModel.onDidChangeContent(() => {});
  95.   removeArrow();
  96. };
  97. /**
  98.  * 移除 revert change（还原更改）箭头
  99.  */
  100. const removeArrow = () => {
  101.   setTimeout(() => {
  102.     const revertChangeButtons = document.querySelectorAll(
  103.       ".codicon-arrow-right"
  104.     );
  105.     revertChangeButtons.forEach((button) => {
  106.       button.style.display = "none";
  107.     });
  108.   }, 500);
  109. };
  110. /**
  111.  * 设置自定义高亮
  112.  */
  113. let observer = null;
  114. let originalEditorContainer = null;
  115.  
  116. //挂载高亮观察器
  117. const setLightObserver = () => {
  118.   //有关键字的情况下 才需要高亮
  119.   if (props.highLightWords.length > 0) {
  120.     // 获取 Diff Editor 中原始编辑器的容器节点
  121.     originalEditorContainer = editor.getOriginalEditor().getDomNode();
  122.     //获取第一个子节点
  123.     const originalSonElement =
  124.       originalEditorContainer && originalEditorContainer.firstChild;
  125.     //获取第一个子节点的第一个子节点
  126.     const originalGrandsonElement =
  127.       originalSonElement && originalSonElement.firstChild;
  128.  
  129.     //创建一个 MutationObserver 实例
  130.     observer = new MutationObserver(() => {
  131.       setHighlight();
  132.     });
  133.  
  134.     // 配置观察器以监视特定类型的变化
  135.     if (originalSonElement) {
  136.       // 监视 originalSonElement 的样式变化，如果发生变化重新设置高亮(用于页面放大缩小时)
  137.       observer.observe(originalSonElement, {
  138.         attributes: true, // 监视属性的变化
  139.         attributeFilter: ["style"], // 监视特定属性
  140.       });
  141.       // 监视 originalGrandsonElement 的样式变化，如果发生变化重新设置高亮(用于编辑器放大缩小滚动时)
  142.       observer.observe(originalGrandsonElement, {
  143.         attributes: true, // 监视属性的变化
  144.         attributeFilter: ["style"], // 监视特定属性
  145.       });
  146.     }
  147.   }
  148. };
  149.  
  150. //使用防抖，避免多次渲染黄色背景
  151. const setHighlight = debounce(() => {
  152.   const linesContainer = originalEditorContainer.querySelector(".view-lines");
  153.   // 获取所有行的容器节点
  154.   const divLines = linesContainer.childNodes;
  155.   // 遍历每一行的容器节点
  156.   divLines.forEach((lineNode) => {
  157.     //拿到每一行的总span节点
  158.     const spanNodes = lineNode.childNodes;
  159.     //拿到每一行的总span节点内容
  160.     let originalSpanHtml = spanNodes[0].innerHTML;
  161.     // 存储匹配到的关键字
  162.     let successKeyWord = [];
  163.     // 检查 span 元素的文本内容是否包含了 props.highLightWords 数组中的一个或多个关键字
  164.     props.highLightWords.forEach((highlightWord) => {
  165.       //创建正则表达式进行全局、忽略大小写匹配
  166.       const regex = new RegExp(highlightWord, "gi");
  167.       //如果匹配到，则将匹配成功的关键字存储起来
  168.       if (regex.test(originalSpanHtml)) {
  169.         successKeyWord.push(highlightWord);
  170.       }
  171.     });
  172.     // 对 successKeyWord 数组进行去重操作
  173.     successKeyWord = Array.from(new Set(successKeyWord));
  174.  
  175.     // 如果有任意一个关键字包含在 span 元素的文本内容中，则修改对应关键字的样式，而不是修改整个span
  176.     if (successKeyWord.length > 0) {
  177.       // 创建一个新的字符串来保存修改后的结果
  178.       let modifiedHtml = originalSpanHtml;
  179.       // 遍历匹配成功关键字数组中的每个字符串
  180.       successKeyWord.forEach((str) => {
  181.         // 创建带有黄色背景色的 <span> 元素
  182.         const highlightedText = `<span style="background-color: yellow;">${str}</span>`;
  183.         // 使用正则表达式进行全局、忽略大小写的替换
  184.         modifiedHtml = modifiedHtml.replace(
  185.           new RegExp(str, "gi"),
  186.           highlightedText
  187.         );
  188.       });
  189.  
  190.       // 将修改后的 HTML 内容设置回原来的 span 元素中
  191.       spanNodes[0].innerHTML = modifiedHtml;
  192.     }
  193.   });
  194. }, 500);
  195.  
  196. // 组件挂载后创建编辑器实例
  197. onMounted(() => {
  198.   //初始化编辑器
  199.   init();
  200.   //挂载高亮观察器
  201.   setLightObserver();
  202. });
  203.  
  204. onBeforeUnmount(() => {
  205.   if (editor) {
  206.     // 组件卸载前销毁编辑器实例
  207.     editor.dispose();
  208.     // 组件卸载时断开 MutationObserver
  209.      if (observer) {
  210.       observer.disconnect();
  211.     }
  212.   }
  213. });
  214. </script>
  215.  
  216. <style scoped lang="less">
  217. .monaco-editor {
  218.   height: 150px;
  219.   width: 100%;
  220. }
  221. </style>

效果图：

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号