2011-10-22 3 views
4

웹 페이지에서 xml을 표시, 강조 표시 및 편집하는 데 코드 미러를 사용하고 있지만 삽입 위치에서 오프셋 된 커서 위치에 문제가 있습니다. 따라서 문자를 삭제하면 깜박이는 커서는 예상보다 먼저 삭제 된 문자입니다. 내 페이지 외부에서 잘 작동하기 때문에 현재 페이지와의 CSS 충돌을 가정하고 있지만 어디에서나 충돌을 찾을 수 없습니다. 누구든지 비슷한 문제가 있거나 무엇을해야하는지 알고 있습니까?Codemirror 커서 위치 오프셋

답변

3

추가 조사에 따르면 문제의 원인 인 필드 세트에 포함 된 모든 div에 패딩이 설정되어 있습니다.

0

경우에 따라 기울임 꼴 또는 굵게 포함 된 줄 (OS 및 브라우저에 따라 다름) 아래에서 커서의 최대 세로 위치가 줄의 90 %까지 잘못 표시 될 수 있습니다. 예를 들면 다음과 같이 설정하여 쉽게 수정할 수 있습니다.

.CodeMirror pre { 
    height:15px; 
} 

귀하의 CSS 스타일 시트에있는 모든 곳. 또한 서로 너무 가깝게 보이는 코드 행을 발견하면 행 높이를 제어 할 수있는 방법을 제공합니다.

3

다음 행은 나를 위해 문제를 해결 : 내 CodeMirror 구성에 lineWrapping: true을 사용하고

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

. 이 값을 false로 설정하면됩니다.

0

들여 쓰기를 사용할 때 어떤 이유로 공백이 올바르게 처리되지 않았습니다. 나를 위해 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; 
} 
1

것은 CodeMirror와 CSS에서 줌을 사용하여주의해야합니다.

본문 확대/축소 기능을 사용했습니다.