간단한 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 같은 것을 브라우저가 제공하기에 라인 영역으로 받아볼 수 있기도 합니다.
첨부파일
댓글을 작성하시려면 로그인이 필요합니다.