WYSIWYG 에디터에서 span 태그 삽입되는 게 보니까 완전 고질적인 문제더군요. 블록

제가 제 오픈소스 게시판 위지윅 에디터 상에서 소스코드 삽입시 text 모드에서 html 편집기 모드로 전환되더라도 코드 수정이 가능하도록 엔터키나 딜키, 백스페이스키 등으로 조작해서 소스코드를 수정할 수 있는지 봤더니 이 문제가 위지윅 에디터에서 완전 고질적인 현상이더군요. span 태그가 아니더라도 html 편집기 모드에서 글자를 쳐넣고 엔터키를 치면 이게 브라우저마다 태그가 생성되는게 다 틀립니다. 아래에 브라우저 마다 어떻게 틀린지 이미지를 올려 봤는데요.

IE는 <p> 태그만 생성되면서 span 태그가 생성되지 않고 수정 도중 엔터키를 치면 문단 사이 간격이 넓어져 버립니다.
그리고 크롬과 스윙브라우저는 <div> 태그가 생성되면서 보시는 바와 같이 span 태그가 문단마다 생성이 돼 버립니다. 이게 이글루스에선 기본 폰트 크기와 달라지면서 제가 말씀드린 폰트 크기가 들죽날쭉해지는 문제를 일으키고 있더군요.
그리고 파이어팍스에선 보시는 바와 같이 엔터키를 쳐도 또 딜키나 백스페이스 키로 편집을 하더라도 어떠한 태그도 생성이 되지 않습니다. 물론 문단 속성을 지정하면 div 태그가 생성되지만 그밖에 잡태그는 생성이 되지를 않습니다.

아래와 같은 명령어들이 실행되면서 memoi 란 id의 iframe 을 memoiE 에 저장하고 contentwindow 속성을 취한 다음 designmode 를 on 하고 위지윅 에디터 객체를 생성하는 과정에서 html 에디터 모드에다 글을 입력하면 이런 태그들이 자동으로 생성되는 것 같더군요. 제가 구글에서 이 문제의 해결법을 찾아보려고 노력했으나 좀처럼 시원한 해법이 나오지를 않았습니다.

memoiE = document.getElementById("memoi");
memoiW = memoiE.contentWindow;
memoiW.document.designMode = "On";
selectionObj = new CSelection();

이 문제 해결법 아시는 분 계신가요? 이글루스에서도 헤매는 것 보면 쉽게 고쳐질 문제는 아닌듯 보이는데 이걸 꼭 해결하고 싶습니다. 브라우저 마다 다른 특성인 만큼 시간을 두고 함 해결법을 찾아봐야겠습니다. 이게 웃긴 게 정규식으로 p 태그나 div 를 찾아서 지우려고 해도 자동으로 삽입되는 끝태그 </div> 등이 홀로 몇개씩 내용 맨 끝에 남는 경우가 있어서 기존 태그와 구별하기가 곤란하다는 어려움이 있습니다. 괜한 이글루스를 욕했나 싶은 게 지금 생각해 보니 이런 맹점이 있었더라구요. ^^;

[IE - html 모드에서 문단 입력하고 text 모드로 전환했을 때 상태]

[크롬 - html 모드에서 문단 입력하고 text 모드로 전환했을 때 상태]

[스윙브라우저 - html 모드에서 문단 입력하고 text 모드로 전환했을 때 상태]

[파이어팍스 - html 모드에서 문단 입력하고 text 모드로 전환했을 때 상태]


덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색