2007. 12. 9. 21:17 Review/IT
[첫번째] Javascript를 사용한 rich Editor.
4년~5 년 전만 해도, 게시판에 글을 쓸 때 폰트의 크기를 키우거나, 색상을 변경하고 싶으면, 사용자가 직접 HTML 태그를 사용해서 글을 작성해야 했습니다. 그나마도 게시판에서 HTML을 지원해 줘야 가능한 일이었습니다. 그러다가 점점 기술이 발전해 나가고, 사용자의 편의를 신경 쓰게 되니, ActiveX를 사용한 웹게시판이 포털사이트를 중심으로 등장했습니다. 귀여운 아이콘도 넣을 수 있도록 말이죠. 하지만 최근 반ActiveX 지향적인 바람이 불면서, MS IE에서만 동작하는 이러한 게시판에 대한 원성이 높아지고 있습니다. ActiveX를 도입했던 많은 곳에서 이제 ActiveX 를 제거하고, javascript를 사용한 에디터 게시판으로 전향했습니다. 별도의 프로그램을 설치하지 않아도 되는 rich 게시판은 사용자에게 유용하게 사용될 수 있습니다. 물론 이전에도 이런 기술은 존재 하였고, 몇몇 곳에서 이미 도입하여 사용하고 있었지만, 조명을 받기 시작한 건 얼마 되지 않았습니다.
본 포스팅에서 크로스브라우징이 가능한 RICH Editor를 제작해보도록 하겠습니다.
보통 게시판을 제작할 때, 글 내용을 입력하는 부분은 <textarea> 라는 태그를 사용합니다. 하지만 <textarea>는 text 외에 어떤 html도 입력할 수 없고, 입력하더라도 단지 입력만 될 뿐 외관상 아무런 영향을 미치지 않습니다. 그래서 이 부분은 frame 의 designMode 라는 DOM을 사용하여 처리하게 됩니다. 그럼 코드를 작성해 보도록 하겠습니다.
<html>
<head>
<title>simple rich editor</title>
</head>
<body>
<iframe id="richEditor"></iframe>
</body>
</html>
Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.
<head>
<title>simple rich editor</title>
<script langauge="javascript">
function load()
{
document.frames['richEditor'].document. designMode = "On";
}
</script>
</head>
<body onload="load();">
<iframe id="richEditor"></iframe>
</body>
페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.
이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?
크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.
function load()
{
if (document.getElementById('richEditor').contentDocument)
{
return document.getElementById('richEditor').contentDocument.designMode = "On";
}
else
{
return document.frames['richEditor'].document.designMode = "On";
}
}
나머지 부분은 그대로 놔두고, 자바스크립트 부분만 바꾼 모습입니다. 이러면 IE와 FF 모두 잘 동작하는 모습을 볼 수 있습니다. 코드가 지저분해 보이니 리펙토링을 조금 해보면.
function load()
{
getIFrameID("richEditor").designMode = "On";
}
function getIFrameID(aID)
{
if (document.getElementById(aID).contentDocument)
{
return document.getElementById(aID).contentDocument;
}
else
{
return document.frames[aID].document;
}
}
이렇게 해서 조금은 깔끔한 코드가 완성되었습니다.....만, 오히려 더 지저분해진 느낌입니다. 그냥 재사용성을 위함 이라고 해두죠. ^^;;;
이제 글씨들의 스타일을 변경할 수 있는 버튼들을 만들어 넣을 차례입니다.
Html:
선택된 곳을 굵게 표시할 수 있는 버튼을 만들었습니다. onClick 이벤트로 클릭하면 doCommand 가 실행됩니다.
Javascipt:
function doCommand(command, args)
{
getIFrameID('richEditor').execCommand(command,false,args);
document.getElementById('richEditor').contentWindow.focus()
}
doCommand 메소드 입니다. 좀 전에 리펙토링 하면서 만들었던 getIFrameID 메소드와 execCommand 메소드를 사용합니다.
execCommand메소드는 두개의 인자를 갖습니다. 다음 페이지를 참고 하세요.
doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.
Html :
위 코드를 추가하고 테스트를 해보면, 어떤 의미인지 잘 알 수 있을 것 입니다.
완성된 코드 입니다.
<html>
<head>
<title>simple rich editor</title>
<script langauge="javascript">
function load()
{
getIFrameID("richEditor").designMode = "On";
}
function getIFrameID(aID)
{
if (document.getElementById(aID).contentDocument)
{
return document.getElementById(aID).contentDocument;
}
else
{
return document.frames[aID].document;
}
}
function doCommand(command, args)
{
getIFrameID('richEditor').execCommand(command,false,args);
document.getElementById('richEditor').contentWindow.focus()
}
</script>
</head>
<body onload="load();">
<p>
<input type="button" value="굵게" onClick="doCommand('bold');"/>
<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>
</p>
<iframe id="richEditor"></iframe>
</body>
</html>
다음에는 위 코드에, 기능을 좀 더 추가하고, 페이지의 값을 넘겨 스크립트언어에서 받는 방법을 소개해보도록 하겠습니다.
'Review > IT' 카테고리의 다른 글
| [ IE8 ] 웹슬라이스(webslices) 적용했습니다. (2) | 2008.08.11 |
|---|---|
| [두번째] Javascript를 사용한 rich Editor. (6) | 2007.12.12 |
| 마이윙 – 상자 속 날개를 무료 제공, 무한리필 해드립니다. (6) | 2007.12.06 |
| Daum 캘린더 (4) | 2007.11.17 |
| 하나포스 동영상 위젯 엔유 (1) | 2007.11.10 |
