블럭을 지정하고 저장 후 포커스 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