HetaJs

캐럿 selection Range 저장/로드

블럭을 지정하고 저장 후 포커스 out하고 로드 하면 블럭이 지정된다.

가나다라마바사아자차
TEXT OFFSET
BASE
ANCHOR
EXTENT
FOCUS
SELECTION



Range 저장 및 로드

var Caret = {
data : null,
Load : function(){	//Caret.Load
	if(this.data != null){
		var newRange = document.createRange();
		newRange.setStart(this.data.startContainer, this.data.startOffset);
		newRange.setEnd(this.data.endContainer, this.data.endOffset);

		// Selection에 range를 전달
		var selection = document.getSelection();
		selection.removeAllRanges();
		selection.addRange(newRange);
		
		//역방향으로 선택하면 선택 블럭이 없음. (다시 역방향으로 선택한다.)
		if(selection.isCollapsed){	//선택 caret이 없으면 true
			newRange.setStart(this.data.endContainer, this.data.endOffset);
			newRange.setEnd(this.data.startContainer, this.data.startOffset);

			selection.removeAllRanges();
			selection.addRange(newRange);

			//selection.setBaseAndExtent(selection.focusNode, selection.focusOffset, selection.anchorNode, selection.anchorOffset); //IE에서 동작안함
		}
	}
},
Save : function(){	//Caret.Save
	var selection = document.getSelection();
	
	if(selection.isCollapsed){	//선택 caret이 없으면 true
		this.data = null;
	}else{
		var data = {};	
		data.startContainer = selection.anchorNode;
		data.startOffset = selection.anchorOffset;
		data.endContainer = selection.focusNode;
		data.endOffset = selection.focusOffset;
		this.data = data;
	}
}
};
https://happy-playboy.tistory.com/entry/ContentEditable%EC%97%90%EC%84%9C-%EC%BB%A4%EC%84%9CCaret-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B01-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8?category=839098