간단한 WYSIWYG Editor 만들기

회사에서 작업하다가 bold, italic, underline 기능만 필요한 WYSIWYG가 필요해서 어떻게 해야 할지 앞이 캄캄해서 그냥 오픈 소스를 써야 하나 했는데 역시 구글신이 간단한 방법을 알려줬다.

contenteditable 사용해서 엘리먼트에 바로 편집이 가능하게 된다. 요것은 HTML5 에 표준이 된거라고 하는데 브라우저 지원 여부를 확인해보니 거의 모든 브라우져에서 지원을 하고 있다. 이전에는 WYSIWYG Editor 을 만들기 위해서 iframe 과 designMode=“on” 으로 사용했다고 한다.

브라우저 지원 여부에 대해서 알아보면 다음과 같다.

"contenteditable"

사용방법은 아주아주 간단하다. 소스로 보면 다음과 같다.

WYSIWYG Editor
1
2
3
4
<div contenteditable="true"></div>
<input type="button" onclick="document.execCommand('bold', null, false);" value="B" />
<input type="button" onclick="document.execCommand('italic', null, false);" value="I" />
<input type="button" onclick="document.execCommand('underline', null, false);" value="U">

위 소스와 같이 div 엘리먼트에 contenteditable attribute 값만 주면 편집이 가능하게 되고 버튼 3개로 입력한 Text 에 바로 blod, italic, underline 효과를 줄수 있다.

그 외에 다른 execCommand 에 대한 정보는 아래 링크에서 확인 할 수 있다.

Comments