현재 커서 위치를 둘러싼 단어 스타일 얻기

Question

현재 커서 위치 아래에 단어의 스타일/굵게, 기울임 꼴 등을 표시하려고합니다. 내가 클릭의 x 및 y COORD을하고 난 다음

var range = document.caretRangeFromPoint(x, y); 
range.expand('word'); 
range.queryCommandState('bold'); 

한 적이 있지만이 읽는 동안 queryCommandState 방법이없는 그 범위를 오류에 이르게 : http://help.dottoro.com/ljkxwclp.php은 그 범위 또는 적어도 텍스트 범위를 의미한다 (나는 JS 뉴비 다. 그래서 그것에 관해서는 용서해 준다.) 그런 방법이있다. 어떤 도움이라도 대단히 감사합니다.

편집 : 나는 좀

var range = document.caretRangeFromPoint(x,y); 
range.expand('word'); 
window.getSelection().addRange(range); 
document.queryCommandState('bold'); 
window.getSelection().empty(); 

를 추가하여이 문제를 해결하지만 난 매우 행복하지 않다. 이것을 달성하기위한 더 좋은 방법이 있습니까?

Answer 1

나는 많은 코드를 작성하지 않고 얻은 것보다 더 잘할 수 있다고 생각하지 않습니다. IE의 독점적 인 TextRange은 queryCommandState() 및 관련 메소드를 가지고 있지만 다른 브라우저에서는 Range로 만들 수 없습니다.

대담한 테스트를 수행하기 위해 선택 항목을 삭제해야한다는 것이 불만이라면 불필요하게 복잡하고 어수선하게 보일 수도 있지만 그 선택을 원래 상태로 복원하는 것은 간단합니다. 또한 선택 항목을 비우는 표준 기반 방식은 empty()이 아닌 removeAllRanges()이며 WebKit에만 해당됩니다.

데모 : http://jsfiddle.net/GkWTb/1/

코드 : 해당 페이지의 예를 따른다면

var range = document.caretRangeFromPoint(x, y); 
var sel = window.getSelection(); 
var selRange; 

// Save initial selection 
if (sel.rangeCount > 0) { 
    selRange = sel.getRangeAt(0); 
} 
range.expand("word"); 
sel.removeAllRanges(); 
sel.addRange(range); 
alert(document.queryCommandState("bold")); 

// Restore original selection 
sel.removeAllRanges(); 
if (selRange) { 
    selRange = sel.addRange(selRange); 
}