赞
踩
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>
效果图:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。