css - Codemirror 光标位置偏移

Question

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

Answer 1

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

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

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

Answer 2

使用 CodeMirror 放大 CSS 时要小心。

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

Answer 3

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

Answer 4

在调整父容器的大小后，这个问题经常发生在我身上。有帮助的是：

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

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

Answer 5

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

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;
}

Answer 6

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

.CodeMirror pre {
    height:15px;
}

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