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

출처 : 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 등등) 에서  모두 지원한다.

Your ads will be inserted here by

Easy AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

<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 영역만 자유롭게 편집할 수 있다.

wysiwyg editor 에 올린 글
3 에 한 댓글이 있습니다. “초간단?? 위지윅 에디터 만들기” 上
  1. 옷장수말하길

    기뻐하세요. 에디터 만들고 싶어한다고 대성과장님께 알려드릴께요.

  2. 붉은고래말하길

    좋은 정보 담아갈게요..^^
    (출처 표시 했어요~!)

  3. zeta말하길

    좋은 정보 감사드립니다^^

댓글 남기기

이메일은 공개되지 않습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>