Question

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

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

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

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

更新： 回答了我自己的问题 - 见下文！您可以查看我生成的代码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标记中检索字符索引

2 个答案: