Codemirror cursor position offset

问题

I'm using code mirror to display, highlight and edit xml in a web page but I am having a problem with the cursor position being offset from the insert position so that if you delete a character from where the blinking cursor is, a character before the one you would expect gets deleted instead. I am assuming its a css clash with my current page because it works well outside my page, but cant find the clash anywhere. Has anyone had similar issues or know what to do?

回答1:

Further investigation shows that the page had padding set on all divs embedded in fieldsets which was the cause of the problem.

回答2:

The following lines fixed the issue for me:

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

I'm using lineWrapping: true in my CodeMirror configuration. Setting that to false works as well.

回答3:

Be careful using zoom in your CSS with CodeMirror.

I used zoom in body and removing that worked for me.

回答4:

Sometimes, also, below italic or bold -containing lines (depending on your OS and browser), cursor has a wrong vertical position up to 90% of a line. It can be easily fixed by setting, e.g.

.CodeMirror pre {
    height:15px;
}

anywhere in your CSS stylesheets. This also provides you with a way to control line height, if you find lines of code showing too close to each other.

回答5:

For some reason the white spaces when indention is enabled were not treated correctly when calculating the line size. Replacing measureLine function with the following in codemirror.js did the trick for me:

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

来源：https://stackoverflow.com/questions/7858585/codemirror-cursor-position-offset

标签

css

xml

codemirror