-
editor에 이미지 미리보기 시 createRange 오류익스플로러 호환성 2016. 8. 9. 15:27반응형
1. 해결 하기 앞서 이해하고 넘어가기 위한 자료
문제:요새 우리 서비스는 글쓰기 에디터에 몇 가지 골치 아픈 버그가 있어 어려움을 겪고 있다.이 작업은 주로 뒷자리 A가 하고 있는데, 도움을 주고 싶어도 에디터 쪽은 기반 지식이 좀 있어야 해서 어렵더라.에디터에서는 셀렉션과 레인지에 대한 이해가 꼭 필요하다고 한다.다 까먹었다… -_-;;함수의 동작보다는, 앵커니 포커스니 하는 개념을 잘 몰라 이해하기 어렵더라.이 참에 MDN 페이지를 보고 정리해두려고 한다.해결책:SelectionSelection 은 window.getSelection() 이나 다른 메서드의 호출로 생성되는 객체이다.사용자가 드래그 등으로 여러 엘리먼트에 걸쳐 선택한 텍스트를 대표한다.selection 객체는 사용자가 선택한 `range`로 표현된다.보통 한 개의 range 만 갖고 있고, 아래 코드처럼 가져올 수 있다.var selObj = window.getSelection();var range = selObj.getRangeAt(0);selObj: Selection 객체range: Range 객체선택된 값은 selection 객체의 toString()을 호출해서 가져올 수 있다.selObj.toString(); //—> 현재 선택한 텍스트Selection 에 사용되는 용어 정리anchor셀렉션의 시작점.마우스로 드래그해서 선택했다면, anchor 는 최초에 마우스가 클릭된 지점이다.사용자가 마우스나 키보드로 셀렉션을 수정해도, anchor 는 변경되지 않는다.텍스트를 위/아래로 드래그했을 때 고정된 지점이 anchor 이다.focus셀렉션의 끝점.마우스로 셀렉션을 만들었다면, 마우스를 뗀 곳이 셀렉션의 focus 지점이다.사용자가 마우스나 키보드로 셀렉션을 수정할 때마다 변경된다.range문서에 인접한 부분.텍스트 노드를 포함한 전체 노드를 포함할 수 있다.일반적으로 사용자는 한 개의 레인지만 선택할 수 있지만, 컨트롤 키 등으로 멀티 레인지를 선택할 수도 있다.레인지는 range 객체로 리턴되며, 스크립트에 의해 추가되거나 삭제될 수 있다.Selection의 주요 속성Selection.anchorNode시작 노드Selection.anchorOffset시작 노드에서 anchor 의 오프셋.anchorNode 가 텍스트 노드이면 anchor 이전의 문자열의 개수이고,anchorNode 가 엘리먼트일 경우엔 anchor 보다 앞에 있는 자식 노드의 개수를 의미한다.Selection.focusNode끝 노드Selection.focusOffset끝 노드에서 focus 의 오프셋.focusNode 가 텍스트 노드이면 focus 이전의 문자열의 개수이고,focusNode 가 엘리먼트일 경우엔 focus 보다 앞에 있는 자식 노드의 개수를 의미한다.Selection.isCollapsed셀렉션의 시작지점과 끝지점이 동일한지의 여부Selection.rangeCount셀렉션 내의 레인지 개수RangeRange 인터페이스는 노드와 텍스트 노드를 포함한 문서의 일부(fragment)이다.'문서의 특정 부분’을 정의하는 것이라 생각하면 쉽다.레인지를 생성할 수 있는 방법은 아래와 같다.- document.createRange()- Selection 객체의 getRangeAt() 메서드- Range() 생성자Range의 주요 속성Range.collapsed레인지의 시작점과 끝점이 동일한지 여부Range.commonAncestorContainer시작 컨테이너와 끝 컨테이너를 포함하고 있는 상위 노드Range.endContainer레인지가 끝나는 지점의 끝 컨테이너 노드Range.endOffsetendContainer 노드에서 끝 지점의 오프셋Range.startContainer레인지가 시작하는 지점의 컨테이너 노드Range.startOffsetstartContainer 노드에서 시작 지점의 오프셋2. 해결
document.selection.createRange ();
--> document.body.createTextRange();
이렇게 하면 객체를 불러오는 부분을 해결 할수 있다.
다른 방법은 다 안되더라;;; 에혀~ 이것떄문에 4시간을 허비 하다니.ㅋㅋ
반응형'익스플로러 호환성' 카테고리의 다른 글
HtmlDOM VS CoreDOM 차이점 (0) 2015.11.18 IE TESTER(인터넷 익스플로러 버전별 호환성 검사) (0) 2014.03.24