Codemirror：从span标签检索字符索引

debugcn 发表于 Dev

用户名

因此，我在文档左侧有一个Codemirror实例，在右侧有一个iframe。在编辑器中更新代码后，会将其写入iframe。

在此重写过程中，我向使用jQuery的$ .data函数创建的每个元素都添加了索引，以便每当用户将鼠标悬停在该元素上时，都可以在编辑器中突出显示该索引。

到目前为止，我已经设法根据生成的<span class="cm-tag cm-bracket">标记在哪里选择了所需元素在编辑器中的位置，并为其指定了一个类cm-custom-highlight。

我的问题是-有没有办法将源span标签的实例转换为编辑器中的实际选择？

更新：回答了我自己的问题-见下文！您可以在此处查看我生成的代码。

用户名

我回答了我自己的问题！那个怎么样？

事实证明，CodeMirror在其display容器中有一个简洁的节点列表。我需要做的就是循环遍历CodeMirror.display.renderedView[lineNumber].measure.map并测试每个文本节点的parentNode属性，以查看它是否与span我突出显示的属性相同。

该map阵列的结构如下所示：

[
    0: 0
    1: 1
    2: text
    3: 1
    4: 5
    ...
]

text这里的每个节点都引用编辑器中的一段代码，而前后的数字均引用其字符索引，因此，很容易找到我需要的索引：

var span = $('span.cm-custom-highlight', CodeMirror.display.lineDiv),
    lineNumber = span.closest('.CodeMirror-line').closest('div[style]').index(),
    lineView = CodeMirror.display.renderedView[lineNumber].measure.map,
    char = 0;

for(var i in lineView.measure.map)
{
    if(!char &&
        typeof lineView.measure.map[i] == 'object' &&
        lineView.measure.map[i].parentNode && span[0] == lineView.measure.map[i].parentNode)
    {
        char = lineView.measure.map[i - 1];
    }
}

当然，这有点混乱，但是可以很好地完成工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。