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

Question

所以我在一个文档的左边有一个codemirror实例，在右边有一个iframe。当代码在编辑器中更新时，它被写入 iframe。

在这次重写过程中，我为使用 jQuery 的 $.data 函数创建的每个元素添加了一个索引，这样每当用户将鼠标悬停在该元素上时，它就可以在编辑.

到目前为止，我已经设法根据生成的 <span class="cm-tag cm-bracket"> 标记所在的位置在编辑器中挑选出所需元素的位置，并为其提供 cm-custom-highlight 的 class。

我的问题是 - 有什么方法可以将源跨度标签的实例变成编辑器中的实际选择吗？

更新： 回答了我自己的问题 - 见下文！您可以查看我的结果代码 here.

Answer 1

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

事实证明，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];
    }
}

当然有点乱，但它很好地完成了工作。

Answer 2

使用markText而不是直接乱用编辑器的DOM会得到更好的结果。 DOM 和视图数据结构不是接口的一部分，并且会在版本之间发生变化。编辑器还可以随时更新其 DOM，覆盖您所做的更改。

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

Codemirror: Retrieve character index from span tag

javascript

jquery

codemirror