HtmlEditor 브라우저별 동작 차이 (feat. sencha htmlEditor)

https://ko.wikipedia.org/wiki/%EC%9C%84%EC%A7%80%EC%9C%84%EA%B7%B8#cite_note-2  // 용어공부

위지위그 - 위키백과, 우리 모두의 백과사전

 

Sencha htmlEditor를 이용할 때 IE와 Chrome에서 동작 차이

sencha extjs의 htmlEditor: https://examples.sencha.com/extjs/7.8.0/examples/kitchensink/#froala-document-ready 

참고로 IE디버깅을 위해서는 Edge를 켜고 IE로 로드, IE 개발자도구 (%systemroot%\system32\f12\IEChooser.exe) 를 통해 IE전용 디버그 툴을 열어야 가능하다. 

 

그리고 htmlEditor에 줄바꿈을 넣고 싶었는데, <br><br>을 두개 넣어야 cursor까지 옮길 수 있었다. 

<br>을 하나만 넣었을 때는 입력하고있던 cursor가 옮겨지지 않았는데 두개 넣으니 옮겨지더라. 

 

stackoverflow의 아래를 읽고 시도해보았다. 

https://stackoverflow.com/questions/20552474/how-does-execcommand-insertbronreturn-work 

How does execCommand "insertBrOnReturn" work?

 

첫 번째 차이점, <br> 태그 chrome에서는 사라지고 IE에서는 남아있다. 

줄바꿈 직 후

텍스트 입력 후

텍스트 입력 후에 두번째 <br>이 사라져있음을 볼 수 있다.

 

하지만 IE에서는 ?

줄바꿈 직 후

텍스트 입력 후

두번째 <br>태그가 여전히 남아있는 것으로 확인된다.

 

p태그를 추가하였을 때, 재밌는 현상이 있는데,

enter 직 후

<br>태그도 같이 생성된다는 것이다.

텍스트 입력 후

텍스트를 입력하면 (개발자도구에서 해당 element를 선택해놓고 텍스트입력을 해보면) <br>태그가 텍스트 입력했을 때 사라져있음을 볼 수 있다. 

하지만 IE에서는 텍스트를 입력했어도 뒤에 <br /> 태그가 남아있었다. 

 

enter 직 후

텍스트 입력 후

 

두 번째 차이점, range의 범위가 다르다. 

let selection = document.getSelection();
let range = selection.getRangeAt(0);
let currentNode = range.startContainer;

currentNode를 확인해보면 Chrome에서는 한글을 입력에 enter를 쳐서 확인해도 range의 startOffset과 endOffset이 같은데,  IE에서는 한글을 입력중에 엔터를 친 경우에 아직 조합이 끝났다고 보지않아 startOffset과 endOffset이 차이가 있었다.