WYSIWYG(위지윅) 에디터 제작 기초
위지윅 에디터란 "What you see is what you get"의 약자로 사용자가 보는 대로 결과를 얻는다는 뜻을 줄인 말이다. 즉, 문서 편집 과정에서 화면에 나타나는 모양 그대로 출력물이 나오는 에디터를 말한다. 다음 에디터나 웹 브라우에서 웹 페이지를 작성할 때 사용하는 에디터를 위지윅 에디터라고 한다.
최신 웹 브라우저는 위지윅 에디터 기능이 탑재되어 있어 웹 브라우저내에 내장된 위지윅 에디터 기능을 사용하여 개발자가 자신의 에디터를 만드는 일이 가능해졌다.
브라우저는 에디터로 만들기 위해서는 document.designMode 속성의 값을 'on'으로 주거나 contentEditable 속성 값을 'true'로 준다. designMode 속성은 IE에서는 동작하지 않지만 파이어폭스나 오페라에서는 동작한다. contentEditable 속성은 IE와 파이어폭스등 모든 브라우저에서 동작한다.
에디터 만드는 코드
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
<!--
window.onload = function() {
if (document.body && document.body.contentEditable != undefined && window.ActiveXObject) {
document.body.contentEditable = "true"; // IE, 불여우에서 작동
}
else {
document.designMode = on"; // IE에서는 작동안함, 불여우에서는 작동
}
}
//-->
</script>
</head>
<body>
<h2>hello</h2>
<p>에디터 기능이 가능한 브라우저입니다. </p>
<p>--- 아래에 작성하고 싶은 글을 입력하세요 ---</p>
</body>
</html>
실행결과
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML DOM - createElement("tagName") : 새로운 태그 생성 (0) | 2009.09.22 |
|---|---|
| HTML DOM(Document Object Model)이란? (0) | 2009.09.22 |
| 마우스 오버시 이미지가 계속 커지게 하는 방법 (0) | 2009.08.18 |
| DHTML(Dynamic HTML) 이란 (0) | 2009.06.30 |
| 편집용 iframe창에 작성된 내용 textarea로 복사 방법 (0) | 2009.06.09 |