본문
1. IE 나 FF 모두 가능한 designMode on 설정 방법은 다음과 같다.
var cw = document.getElementById("에디터iframe 아이디").contentWindow;
cw.document.designMode = "on";
여러방법이 있지만 위 방법이 IE 나 FF 의 cross browsing 은 잘된다.
2. 파이어폭스에서도 designMode에 대해 지원한다. 그런데 FF 에서 이것은 반드시 페이지가 로딩될 때 설정되어야 한다.
즉 다음과 같은 loadEdit 함수는
function loadEdit() {
에디터의document.designMode = "on";
}
<body onload="loadEdit()" ...> 이렇게 해줘야 한다.
코드의 어느 구석탱이에서 <script>loadEdit()</script> 이런식으로 해서는 먹히지 않는다.
3. 계층적으로 dom 객체를 나눠고, 각 브라우저의 객체를 계층에 따라 일관되게 분류해놓고 동일한 변수명을 써야 안 헤깔린다. (놀랍게도 두 브라우저는 거의 모든 계층에서 다른 방식으로 obj를 추출해야한다. 환장할~~)
A: iframe 계층: 에디터 창이 되는 최상위 객체
B: contentWindow 계층: focus() 함수를 호출한다. (-> 이 계층부터 변수명을 정해둔다.)
C: document 계층 :
1) 이 객체 단계에서 designMode 설정해야한다.
2) execCommand 도
D: selection 계층
E: range 계층
코딩 예는 다음과 같다
//A
this.frm = document.getElementById(this.eid);
//B
this.cw = this.frm.contentWindow;
//C
this.document = this.cw.document;
//D
if (isMIE())
this.document.selection;
else
return this.cw.getSelection();
//E (여기서 확실한 것은 IE와 FF 입니다.)
if (isMIE()) {
return selc.createRange(); //IE
} else {
this.cw.focus();
if (typeof selc != "undefined") {
try {
return selc.getRangeAt(0); //FF
} catch(e) {
return this.document.createRange(); //else
}
} else {
return this.document.createRange(); //else
}
}
4. 위 각 계층의 obj 들을 하나의 객체로 만들어 묶어두는게 편하다. 객체지향적 코딩이 편하다.
5. 별도의 설정창이 필요한 경우에는 어떻게 selection을 유지해가는가가 중요하다.
글자색깔, 배경색깔, url 링크 등은 일반적으로 팝업창이나 레이어, prompt 창등을 띄워서 사용자로부터 입력을 받는다. 이때 사용자의 마우스가 입력창을 클릭하는 순간, 경우에 따라 에디터 창의 selection이 해제되어 버리는 경우가 있다.
FF 는 레이어로 설정창을 만들어도 가능하다. IE는 레이어 설정창에 클릭되는 순간 에디터의 selection은 해제된다. 반면 프롬프트창의 버튼들, 레이어의 버튼을 클릭해도 selection은 해제되지 않는다.
IE 의 경우는 팝업창을 띄워서 입력을 받는 것이 가장 쉬운 방법이나 UI 상 좋지 않다. 따라서 IE에서 레이어로 설정창을 만들 때는 range 객체의 select() 함수로 selection을 묶어두는 게 중요하다.
6. 이때의 range 객체는 레이어를 띄우기 직전에 추출해야한다. 즉, 다음과 같다.
설정창이 필요한 아이콘클릭시 --> range 객체 추출해서 전역변수나 4.번에서 언급한 객체의 변수로 담아둔다. --> 레이어를 띄운다. --> 레이어 내부에서 onclick 호출시 --> 먼저 담아둔 range 객체에서 range.select();
7. IE 에서 designMode on 상태에서 엔터키를 주면 <p> 태그가 먹히는데, IE 는 이 태그 때문에 줄간이 너무 벌어져서 조절해야 한다. 입력시점, 보는 시점 모두 고려해야 한다.
관련링크
댓글목록
등록된 댓글이 없습니다.