2011-02-23 3 views
4

contentEditable, textarea 또는 input 가지가없는 웹 기반 텍스트 편집기를 개발하고 있습니다. 가장 큰 부분은 현재 caret 위치에서 왼쪽 (오른쪽) 텍스트의 너비를 측정하고 텍스트에서 캐럿을 이동하는 것입니다.웹 기반 텍스트 편집기에서 문자 당 하나의 <span>

예를 들어 사용자가 DOWN 키를 누르면 캐럿의 현재 왼쪽 오프셋을 계산해야하며 아래 줄에 가장 비슷한 문자가 있어야합니다.

문자 하나 당 하나의 DOM 요소를 사용하는 것이 매우 편리합니다. offsetLeft 속성을 볼 수 있습니다. 또한 캐럿의 위치를 ​​지정하는 것이 훨씬 쉽습니다. 사실, 모든 것이 더 쉽습니다.

그러나 성능상의 영향에 대해서는 매우 확신이 없습니다.. 나는이 기술 (또는 이와 유사한)을 일부 웹 기반 JavaScript "IDE"에서 사용하는 것으로보고 있으며 거기에서 잘 작동합니다.

힌트, 팁이 있습니까?

텍스트의 너비를 측정하는 다른 빠른 방법을 알고 계십니까? 나는 DOM 엘리먼트에 라인의 섹션을 두지 않고 매번 너비를 측정하는 것이 훨씬 느릴 것이라고 생각한다.

편집 : 대부분 DOM 요소가 존재한다는 주요 사실에 대해 주로 묻고 있습니다. 측정을하는 방법은 다른 것입니다.

답변

1

012 텍스트는 VI 텍스트 편집기의 자바 스크립트 구현 인 this에 관심이 있습니다. 불행하게도 일반적인 방식이 아니라 텍스트 영역을 사용합니다.

+0

그 흥미 동안 가치보다 아마 더 문제 같은데, 설명하는 문제는 정말 간단하기 때문에, jsvi 존재하지 않습니다 고정 폭 글꼴을 사용합니다. 캐럿이 변경되지 않기 때문에 위 또는 아래로 이동할 때 캐럿의 x 위치를 계산할 필요가 없습니다. – glomad

+0

나는 대부분 dom 요소의 존재에 대한 주요 사실에 대해 주로 묻고있다. 측정을하는 방법은 다른 것입니다. – tillda

2

캔버스 개체와 해당 measureText() 메서드를 사용하여이 작업을 완료했습니다 (불행히도 링크를 찾을 수 없음). 기본적으로 캔버스에 "렌더링 할 경우 어떤 크기의 텍스트가 될까요? 이 스타일로? " 이를 사용하여 주변 선의 캐럿 위치를 결정하십시오. 이것은 성능이 뛰어나지 만 물론 HTML5를 지원하는 브라우저에서만 작동하며, 모든 브라우저에서 작동하지는 않습니다.

그러나 솔직히 이것은 목에 큰 통증과 그것이의 브라우저 편집기 :

+0

그러나 그것의 소리는 measureDiv.clientWidth보다 훨씬 덜 고통 스럽습니다. 감사. – tillda

관련 문제