초간단?? 위지윅 에디터 만들기

글 올린 시간 2008-09-16 글 쓴이 kjy2143 — 3 댓글 ↓

출처 : http://www.zdnet.co.kr/builder/dev/web/0,39031700,39160497,00.htm

최신 웹 브라우저들은 위지윅(WYSIWYG) 에디터가 탑재되면서 ActiveX없이 웹 브라우저내에 내장된 위지윅 에디터를 사용하여 위지윅 에디터를 만드는 일이 가능해졌다.

생각보다는 간단하지만 무척 골치아픈 일이기도 하다 ^^;;

그럼 어떻게?? 브라우저의 위지윅 에디터를 이용하는 방법은두 가지가 있다.

1. document.designMode에 ‘on’ 값을 주는 방법

그러면 페이지 전체가 에디팅 할 수 있는 모드로 변경되며 ie5.5 이상을 포함한 최신 브라우저(FF1.3이상, Opera, Safari, chrome 등등) 에서 모두 지원한다.

<html>
<head>
<script type=”text/javascript”>
document.designMode = ‘on’
</script>
</head>
<body>
<h2>Hello</h2>
<p>World</p>

</body>
</html>

겉보기론 별 다를 바 없어 보이지만 이 페이지는 브라우저상에서 편집이 가능하다. 만약 e와 l 사이에 커서가 있는 상태에서 a를 입력하면 Heallo가 보일 것이다. 물론 스타일은 주변 스타일을 그대로 유지한다. 화살표 키로 이동하는 것도 일반 에디터와 비슷하고 글자를 입력하거나 지우는 것도 비슷하다. 웹 브라우저 자체에서 키 입력을 받아서 HTML 문서의 DOM 객체를 수정하는 것이다. 그래서 DOM Inspector 등으로 보면 엘리먼트의 내용이 Heallo로 바뀌는 것을 볼 수 있다.

2. contentEditable에 ‘true’ 값을 주는 방법.
IE에는 designMode와는 별개로 또 contentEditable이라는 속성이 있다. designMode가 HTML 문서 전체를 편집할 수 있도록 하는데 반해 contentEditable 속성은 document 객체의 속성이 아니라 엘리먼트의 속성으로 HTML 문서의 일부분만 편집할 수 있도록 할 수 있다. div나 span, a 등의 엘리먼트에 적용할 수 있다. 그래서 웹 에디터를 만들기는 파이어폭스보다 IE가 조금 더 쉽다.

반면 designMode는 문서 전체를 편집할 수 있도록 만들기 때문에 메뉴나 내비게이션까지 지워버릴 수도 있고 또 designMode에서는 링크를 클릭해도 이동하지 않기 때문에 지우지 않더라도 동작하지 않는다. 그래서 designMode만 지원하는 브라우저에서는 위지윅 에디터를 만들 때 iframe을 사용한다.

iframe 안에 designMode를 켠 문서를 넣고 바깥에 메뉴나 내비게이션이 있는 문서는 designMode를 끈 상태로 놔두는 것이다. 그러면 iframe 영역만 자유롭게 편집할 수 있다.