IE6이 욕을 좀 먹습니다. ㅎㅎ 비록 윈도우 번들 덕택도 컸겠지만... 지금 관점에서 문제지 당시만 해도 나름 꽤 괜찮았습니다. 후에 CSS3나 HTML5에서 보일 것들도 미리 비슷하게 존재하거나 구현되었다는 점이 그저 무시하게는 억울한 측면도 있을지 모르겠습니다. 지금 쓰는 WYSIWYG 에디터 만드는 것도 나름 구형에서도 미리 있던 것들로 가능했던 점에 놀랍습니다.
WYSIWYG 편집기 작성시 해당 문서 자체를 designMode 속성을 이용해서 편집가능하게 하는 것도 있으며, 또한 이번 HTML5 속성으로 추가된 contentEditable은 이미 구형 IE에도 있던 것이었죠. 결과에 큰 차이가 없기에... 일단 contentEditable로 대강 작성한다면...
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style>
div.wEditor {
padding:5px;height:120px;width:500px;margin:10px auto;
overflow-y:scroll;border:1px solid #DBDBDB;
font:12px/1.5 gulim;
}
div.wEditor p {margin:0;padding:0;}
</style>
<div id="editorExam1" class="wEditor" contenteditable="true">
</div>
<div style="width:500px;margin:0 auto;">
<button id="bold">두껍게</button>
<button id="italic">이탤릭</button>
<button id="html">html 넣기</button>
<button id="print">출력 </button>
</div>
<script>
(function() {
var $ = new Function("a","return document.getElementById(a)");
var _editor = $("editorExam1");
// 버튼 클릭 이벤트 추가
$('bold').onclick = function() {
_editor.focus();
document.execCommand("Bold");
};
$('italic').onclick = function() {
_editor.focus();
document.execCommand("Italic");
};
$('html').onclick = function() {
var html = prompt("html 태그 넣기", '<img src="http://main.nateimg.co.kr/img/cms/content_pool/2011/07/normal_bi.gif"/>');
_editor.focus();
if (document.all) {
var range = document.selection.createRange();
range.pasteHTML(html)
} else document.execCommand('insertHTML', false, html);
};
$('print').onclick = function() {
var html = _editor.innerHTML;
alert(html);
};
})();
</script>
</bodY>
</html>
총 4개 영역으로 나눠 볼 수 있겠네요. 코드 순서대로 설명을 하면 다음과 같네요.
[style 부분]
기본적인 style은 미리 지정하시는 것이 좋습니다. html 요소마다 기본적인 스타일이 가령 margin 및 padding 등은 브라우저 마다 다룰 수 있습니다. 또한 사용자 입력에 대한 태그의 처리도 달라질 수 있습니다.
개행관련 블록 요소 추가 같은 것에도 차이가 있는데... 가령 위와 같은 예제는 p를 미리 처리했는데, IE는 문자 입력시 p 요소를 사용합니다. p와 br을 사용하는 반면 div와 br을 사용하는 크롬과 차이가 있기도 합니다. p이든 div이든 똑같은 결과가 나오게 margin:0, padding:0을 다시 설정한 것입니다. IE의 P 요소 처리는 이상적이기는 하나, 실질에서는 오히려 div가 보다 좋을 수 있죠.
[입력 부분]
contenteEditable을 사용하였는데 iframe을 이용하여 새로 문서를 작성하는 것을 많이 사용합니다. 독립된 frame 사용이 더욱 좋을 수 있습니다.
[도구 모움]
적당히 필요한 거 모아서...
[스크립트 처리]
간단히 button을 클릭하면 focus를 다시 버튼에서 에디터로 옮긴 뒤, 처리합니다. execCommand 메서드에 유용한 것이 많습니다. 복잡한 스크립트 작성을 간단하게 해주네요.
좀 제대로 다뤄볼려면 아무래도 selection 및 range를 고민해야 할 것입니다. 필요하다면 요소 단위 보다 작은 node 객체로 세밀히 볼 필요도 있고요. clientRectangle 같은 것을 브라우저가 제공하기에 라인 영역으로 받아볼 수 있기도 합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12413 | |
| 12412 | |
| 12411 |
JavaScript
실시간 카운트 다운 시계 입니다.
|
| 12410 |
jQuery
jQuery, 이미지맵 마우스오버시 하이라이트 표시
|
| 12407 | |
| 12406 | |
| 12405 | |
| 12404 |
JavaScript
한번만 submit 되게 하기 입니다.
|
| 12403 |
JavaScript
영문자나 숫자만 입력 할 수 있게 하기 입니다.
|
| 12402 |
JavaScript
현재 페이지 이메일로 보내는 버튼 만들기 입니다.
|
| 12401 |
JavaScript
모바일웹에서 PC버전 링크
|
| 12400 |
JavaScript
특정 파일형태만 업로드 하기 입니다.
|
| 12399 |
JavaScript
입력 문자열 앞에 붙는 공백 제거하기 입니다.
|
| 12398 |
JavaScript
키보드 방향키로 창의 위치를 이동시키기 입니다.
|
| 12397 | |
| 12396 | |
| 12395 |
JavaScript
키보드 눌러 이동하는 단축키 사용하기 입니다.
|
| 12394 |
JavaScript
책장을 넘기는 것같은 이미지 슬라이드 쇼 입니다.
|
| 12393 |
JavaScript
마우스를 대면 링크 이미지들을 보여주기 입니다.
|
| 12392 |
PHP
pushbullet 푸시 발송
|
| 12391 |
MySQL
같은 컬럼의 행들을 한번에 UPDATE 하기
|
| 12390 |
JavaScript
이미지들을 보여주는 풀다운 콤보메뉴 입니다.
|
| 12389 |
JavaScript
부드럽게 오버랩되는 이미지 슬라이드 쇼 입니다.
|
| 12388 |
JavaScript
끊김없이 연속적으로 스크롤 되는 이미지 스크롤러 입니다.
|
| 12387 |
PHP
php 주요 정리 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기