CodeMirror编辑器如何在高亮文本上方显示小型弹出窗口

我目前正在使用代码编辑器兼语法高亮工具CodeMirror，可从其官方站点获取工具本体，已编写如下代码实现文本片段的高亮效果：

for (var i = 0; i < array.length; i++)
{
        var range = array[i].split("-");
        editor.getDoc().markText({
            line: parseInt(range[0].split(":")[0]) - 1,
            ch: parseInt(range[0].split(":")[1])
        }, {
            line: parseInt(range[1].split(":")[0]) - 1,
            ch: parseInt(range[1].split(":")[1])
        }, {
            css: "color : white; background-color: red; border: 1px;"
        });
}

但我查阅CodeMirror官方文档后，仍不清楚所需效果的实现方式。

我的预期效果为在高亮文本上方展示小型弹出窗口（效果无需与下方示例完全一致，仅用于说明概念）。

实现方案 #

你现有代码已经完成了高亮标记的创建，只需利用CodeMirror内置的标记定位能力，配合DOM渲染即可实现上方悬浮弹窗，无需引入额外依赖：

• 首先需要保存每次markText方法返回的标记实例，这是获取高亮位置的核心依据，原代码中调用方法后没有留存返回值，无法做后续位置计算。
• 利用标记实例自带的find()方法，可以获取当前高亮片段的起止行、字符位置，结合CodeMirror内置的coordsAtPos()API，就能算出该片段在视口中的实际像素坐标。
• 基于计算出的坐标，用绝对定位的DOM元素渲染弹窗，放在高亮文本的正上方，调整z-index层级避免被编辑器内容遮挡。
• 监听编辑器的滚动、内容变更事件，实时重新计算弹窗位置，避免滚动后弹窗与高亮内容错位。

可直接运行的参考实现代码：

// 存储所有高亮标记的集合
const textMarkCollection = []
for (var i = 0; i < array.length; i++)
{
        var range = array[i].split("-");
        // 保存markText返回的标记实例
        const currentMark = editor.getDoc().markText({
            line: parseInt(range[0].split(":")[0]) - 1,
            ch: parseInt(range[0].split(":")[1])
        }, {
            line: parseInt(range[1].split(":")[0]) - 1,
            ch: parseInt(range[1].split(":")[1])
        }, {
            css: "color : white; background-color: red; border: 1px;"
        });
        textMarkCollection.push(currentMark)
}

// 创建全局悬浮弹窗DOM
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = 'position: absolute; z-index: 20; padding: 4px 8px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'
document.body.appendChild(tooltipDom)

// 实时更新弹窗位置与内容
function refreshTooltip() {
    textMarkCollection.forEach((markItem, index) => {
        // 跳过已被移除的标记
        const markRange = markItem.find()
        if (!markRange) return
        // 获取高亮片段的页面像素坐标
        const startPixel = editor.coordsAtPos(markRange.from)
        // 将弹窗定位到高亮文本正上方，预留4px的间距避免紧贴文本
        tooltipDom.style.left = `${startPixel.left}px`
        tooltipDom.style.top = `${startPixel.top - tooltipDom.offsetHeight - 4}px`
        tooltipDom.textContent = `高亮片段序号：${index + 1}`
    })
}

// 绑定编辑器事件，内容或视口变化时刷新弹窗
editor.on('scroll', refreshTooltip)
editor.on('changes', refreshTooltip)

常见问题调整

• 如果出现弹窗被编辑器区域裁剪的问题，可以将弹窗DOM挂载到CodeMirror的滚动容器内部，把容器设置为相对定位，即可避免overflow属性的裁剪影响。
• 如果不需要所有弹窗常显，可以监听编辑器的cursorActivity事件，判断光标位置落在哪个高亮范围内，再控制弹窗的显隐。
• 弹窗的位置偏移量可以根据实际UI样式调整，确保弹窗和高亮文本的间距符合设计要求。

内容的提问来源于stack exchange，提问作者Zain Ul Abidin