IT모아

editor에 이미지 미리보기 시 createRange 오류 본문

익스플로러 호환성

editor에 이미지 미리보기 시 createRange 오류

아롱사태남 2016.08.09 15:27

1. 해결 하기 앞서 이해하고 넘어가기 위한 자료

 

문제:
요새 우리 서비스는 글쓰기 에디터에 몇 가지 골치 아픈 버그가 있어 어려움을 겪고 있다.
이 작업은 주로 뒷자리 A가 하고 있는데, 도움을 주고 싶어도 에디터 쪽은 기반 지식이 좀 있어야 해서 어렵더라.

에디터에서는 셀렉션과 레인지에 대한 이해가 꼭 필요하다고 한다.
몇 달 전에 summernote 에디터를 작성한  에디터 전문가 H에게 일장 강의를 들은 적도 있는데...
다 까먹었다… -_-;;

함수의 동작보다는, 앵커니 포커스니 하는 개념을 잘 몰라 이해하기 어렵더라.
이 참에 MDN 페이지를 보고 정리해두려고 한다.


해결책:

Selection

Selection 은 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
  셀렉션 내의 레인지 개수



Range

Range 인터페이스는 노드와 텍스트 노드를 포함한 문서의 일부(fragment)이다.
'문서의 특정 부분’을 정의하는 것이라 생각하면 쉽다.

레인지를 생성할 수 있는 방법은 아래와 같다.
- document.createRange()
- Selection 객체의 getRangeAt() 메서드
- Range() 생성자


Range의 주요 속성

Range.collapsed
  레인지의 시작점과 끝점이 동일한지 여부

Range.commonAncestorContainer
  시작 컨테이너와 끝 컨테이너를 포함하고 있는 상위 노드

Range.endContainer
  레인지가 끝나는 지점의 끝 컨테이너 노드

Range.endOffset
  endContainer 노드에서 끝 지점의 오프셋

Range.startContainer
  레인지가 시작하는 지점의 컨테이너 노드

Range.startOffset
  startContainer 노드에서 시작 지점의 오프셋

 

 

2. 해결

 

document.selection.createRange ();  

--> document.body.createTextRange();


이렇게 하면 객체를 불러오는 부분을 해결 할수 있다.

다른 방법은 다 안되더라;;; 에혀~ 이것떄문에 4시간을 허비 하다니.ㅋㅋ

0 Comments
댓글쓰기 폼