Codemirrorカーソル位置オフセット

Question

Webページでxmlを表示、強調表示、編集するためにコードミラーを使用していますが、挿入位置からオフセットされたカーソル位置に問題があります。カーソルが点滅している場合は、代わりに削除されるはずの文字が表示されます。私はそれが私のページの外でうまく動作するので、私の現在のページとのCSSの衝突を想定していますが、どこでも衝突を見つけることはできません。誰も似たような問題を抱えているのか、何をすべきかを知っています

Answer 1

詳細な調査では、問題の原因となっているフィールドセットに埋め込まれたすべてのdivにパディングが設定されていることがわかりました。

Answer 2

OSやブラウザに応じてイタリック体または太字の行の下にカーソルを置くと、行の90％までの垂直位置が正しくないことがあります。設定することで簡単に修正できます。

.CodeMirror pre { 
    height:15px; 
} 

あなたのCSSスタイルシートのどこにでもあります。また、コードの行が互いに近すぎるように見える場合は、行の高さを制御する方法も提供します。

Answer 3

次の行は私のために問題を修正しました：私は私のCodeMirror構成でlineWrapping: trueを使用してい

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

。それをfalseに設定すると同様に動作します。

Answer 4

何らかの理由で、インデントが有効になっているときの空白が、線のサイズを計算するときに正しく処理されませんでした。 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; 
} 

Answer 5

はCodeMirrorであなたのCSSでズームを使用して注意してください。

私はボディをズームインし、私のために働いたものを削除しました。