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

彼枫

已于 2024-04-30 10:26:10 修改

阅读量2.1k

点赞数 13

文章标签：编辑器 vue.js javascript 前端 sql

于 2024-04-07 16:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_47239456/article/details/137468249

版权

前言：上篇文章讲了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 Worker
self.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[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;
    }
  });
 }
};

// 组件挂载后创建编辑器实例
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[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();
    }
  }
});

五：完整代码

<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 Worker
self.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>

效果图：