간단한 WYSIWYG 에디터 만들기 예제
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 같은 것을 브라우저가 제공하기에 라인 영역으로 받아볼 수 있기도 합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 15661 | |
| 15657 | |
| 3688 | |
| 15650 | |
| 15648 |
PHP
이거좀 봐주세요 함수 호출
1
|
| 15647 |
Linux
ldconfig 사용하기
|
| 15642 | |
| 3676 | |
| 29958 | |
| 15639 | |
| 15635 | |
| 15632 | |
| 3672 | |
| 15630 |
JavaScript
자바스크립트 packer 그리고 Beautify, unpack
1
|
| 15629 |
기타
rgb, cmyk
|
| 15628 |
JavaScript
라디오박스 폼 submit 후 프로세스파일(iframe)에서 처리후 부모창으로
|
| 15625 |
PHP
함수에 변수를 보내려면..
2
|
| 15624 |
PHP
변수 받아다 DB값 리턴하기
|
| 15621 |
기타
이클립스 문의..
2
|
| 15613 |
jQuery
jQuery Selector 정리해봤어용~
7
|
| 3669 | |
| 29953 | |
| 15605 | |
| 15604 |
Mobile
UITableViewCell ,선택 안되게 하려면
|
| 15602 |
Mobile
[IOS] 아이폰에서 콤보박스
1
|
| 15601 | |
| 15600 |
Mobile
[IOS] UIWebView 자동 넓이 변경
|
| 3666 | |
| 3663 | |
| 15596 |
JavaScript
어머나?:;죄송해요
3
|
| 29952 | |
| 3662 | |
| 15592 |
PHP
반복문 풀이좀요
3
|
| 3655 | |
| 29944 |
HTML
CSS 속성 적용의 우선 순위
7
|
| 3648 | |
| 15591 |
JavaScript
간단한 WYSIWYG 에디터 만들기 예제
현재글
|
| 15589 |
JavaScript
구글 맵에서 Lat, Long을 구해서 여분 필드에 넣기
1
|
| 29937 |
HTML
ㅋㅋㅋ죄송합니다;;;
6
|
| 3644 | |
| 3641 | |
| 15586 |
Linux
특정아이피 차단해보기
2
|
| 15585 | |
| 29936 |
HTML
연습 TABLE vs DIV
|
| 15583 | |
| 15578 | |
| 15575 | |
| 15572 |
JavaScript
크롬에서 네비게이션메뉴 display:none 가 구현이 안되네요..;
2
|
| 15567 | |
| 15563 |
node.js
Facebook Group - Node.js Korea
3
|
| 24338 | |
| 15560 | |
| 15556 | |
| 26168 | |
| 29935 | |
| 15552 | |
| 3626 | |
| 3617 | |
| 3605 | |
| 3596 | |
| 15549 | |
| 15547 | |
| 15546 |
Linux
우분투 하드디스크의 uuid 확인하기
|
| 29933 | |
| 26167 | |
| 26166 | |
| 26165 | |
| 26164 | |
| 26163 | |
| 26161 | |
| 26160 | |
| 26152 |
견적서
홈페이지제작견적서
7
|
| 26149 |
견적서
홈페이지견적서
2
|
| 26148 | |
| 26147 | |
| 26146 | |
| 26145 | |
| 26141 |
기획서
작업일정표
3
|
| 26138 | |
| 26134 | |
| 15539 |
JavaScript
구글 맵에 멀티플 마커
6
|
| 3590 | |
| 29931 | |
| 3583 | |
| 3581 | |
| 3578 | |
| 15537 |
JavaScript
aLavaLamp 입니다. [수정완료]
1
|
| 15535 | |
| 29926 | |
| 15524 |
PHP
for 구문 응용
10
|
| 29920 | |
| 3560 | |
| 15521 |
JavaScript
카테고리 보이기 숨기기
2
|
| 3557 | |
| 29919 | |
| 15517 |
JavaScript
고수님들 도와주세요 ㅠㅠ
3
|
| 29914 | |
| 15506 |
JavaScript
고수님들 도와주십시오.
10
|
| 29910 | |
| 29909 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기