티스토리 뷰
참고 : http://blog.daum.net/question0921/261
WYSIWYG(위지윅) 에디터 제작 기초
위지윅 에디터란 "What you see is what you get" 의 약자로 사용자가 보는 대로 결과를 얻는다는 뜻을 줄인 말이다.
즉, 문서 편집 과정에서 화면에 나타나는 모양 그대로 출력물이 나오는 에디터를 말한다.
다음 에디터나 웹 브라우저에서 웹 페이지를 작성할 때 사용하는 에디터를 위지윅 에디터라고 한다.
최신 웹 브라우저는 위지윅 에디터 기능이 탑재되어 있어 웹 브라우저내에 내장된 위지윅 에디터 기능을 사용하여 개발자가 자신의 에디터를 만드는 일이 가능해졌다.
브라우저는 에디터로 만들기 위해서는 document.designMode 속성의 값을 "on"으로 주거나 contentEditagle 속성 값을 "true" 로 준다.
designMode 속성은 IE 에서는 동작하지 않지만 파이어폭스나 오페라에서는 동작한다.
contentEditable 속성은 IE 와 파이어폭스등 모든 브라우저에서 동작한다.
에디터 만드는 코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
'Language > HTML' 카테고리의 다른 글
| [ HTML ] 편집용 iframe 창에 작성된 내용 textarea 로 복사 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
|---|---|
| [ HTML ] 편집용 iframe 창에 스타일 지정하는 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] 문서에 단축키 달기 - accesskey Attribute (0) | 2016.01.02 |
| [ HTML ] TABLE, DIV 의 크기 고정 (0) | 2016.01.02 |
| [ HTML ] TABLE (0) | 2016.01.02 |