Codemirror 光标位置偏移答案

【问题标题】：Codemirror cursor position offsetCodemirror 光标位置偏移
【发布时间】：2011-10-22 09:34:17
【问题描述】：

我正在使用代码镜像在网页中显示、突出显示和编辑 xml，但我遇到了光标位置偏离插入位置的问题，因此如果您从闪烁光标所在的位置删除字符，您期望的字符之前的一个字符会被删除。我假设它与我当前的页面发生 css 冲突，因为它在我的页面之外运行良好，但在任何地方都找不到冲突。有没有人遇到过类似的问题或知道该怎么做？

【问题讨论】：

标签： css xml codemirror

【解决方案1】：

进一步调查表明，该页面在所有嵌入在字段集中的 div 上都设置了填充，这是导致问题的原因。

【讨论】：

【解决方案2】：

以下几行为我解决了这个问题：

.CodeMirror pre {
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

我在我的 CodeMirror 配置中使用 lineWrapping: true。将其设置为 false 也可以。

【讨论】：

【解决方案3】：

使用 CodeMirror 放大 CSS 时要小心。

我使用放大身体并删除对我有用的。

【讨论】：

【解决方案4】：

调整父容器的大小后，我经常会遇到这个问题。有帮助的是：

editor.setSize("100%", "100%");
editor.focus();

在调整大小事件处理程序的末尾。

【讨论】：

【解决方案5】：

有时，在包含斜体或粗体的行下方（取决于您的操作系统和浏览器），光标的垂直位置错误高达一行的 90%。它可以通过设置轻松修复，例如

.CodeMirror pre {
    height:15px;
}

在您的 CSS 样式表中的任何位置。如果您发现显示的代码行彼此太近，这也为您提供了一种控制行高的方法。

【讨论】：

【解决方案6】：

由于某种原因，启用缩进时的空格在计算行大小时没有得到正确处理。用codemirror.js 中的以下内容替换measureLine 函数对我有用：

function measureLine(cm, line) {
    // First look in the cache
    var cached = findCachedMeasurement(cm, line);
    if (cached) return cached.measure;

    // Failing that, recompute and store result in cache
    var measure = measureLineInner(cm, line);

    var origL;
    var origR;
    var lastR ="";
    for (var mes in measure) {
        origL = measure[mes].left;
        origR = measure[mes].right;

        if (lastR != "") {
            measure[mes].left = lastR;
            measure[mes].right = lastR + (origR - origL);
        }

        if (origL == origR) {
            measure[mes].right = measure[mes].right + 8;
        }
        lastR = measure[mes].right;
    }

    var cache = cm.display.measureLineCache;
    var memo = {
        text: line.text, 
        width: cm.display.scroller.clientWidth,
        markedSpans: line.markedSpans,
        measure: measure,
        classes: line.textClass + "|" + line.bgClass + "|" + line.wrapClass
    };

    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
    else cache.push(memo);
    return measure;
}

【讨论】：