[HTML 5] 7. Rich Text Edit API

이번엔 사용자들이 쉽게 웹페이지를 편집할 수 있게하는 Editing API 에 대해서 살펴보도록 하겠습니다.

기존엔 웹페이지에 Editor 를 구현하기위해서 각 업체별로, 개발자별로 Javascript 를 사용하여 각자의 방법으로 개발하였습니다. 하지만, HTML 5 에서부터는 Rich Text 를 편집하기위한 API 가 표준으로 규정되어 있습니다. 그리고 추가적으로 DesignMode thrtjd과 Global 속성인 Contenteditable 속성이 포함되어 있습니다.

5-1. Contenteditable 과 designMode

contenteditable 속성과 designMode 속성은 모두 내용편집이 불가능한 요소를 편집가능하도록 하기위한 API 로, 차이점은
contenteditable 속성은 특정 Element 의 내용을, designMode 속성은 문서 전체를 편집할 수 있게 합니다.

<div id="editor" contenteditable="true"></div>
또는
<div id="editor" contenteditable></div> <!--true 값은 생략가능-->

contenteditable 속성의 값은 세가지를 가질 수 있습니다.

값	의미
true	편집가능
false	편집불가
inherit	부모요소로부터 상속

contenteditable 속성값이 true 인 요소의 자식 요소들은 기본적으로 true 값을 가집니다.
하지만 아래와 같이 명시적으로 contenteditable 값을 false 로 지정한다면 편집할 수 없습니다. (하지만 부모 div Element 의 contenteditable 의 속성이 true 이므로 그 자식element 인 두번째 div 를 삭제할 수는 있을 것입니다.)

<div id="editor" contenteditable="true">
    <div>편집 가능</div>
    <div contenteditable="false">편집불가</div>
</div>

(참고 : 웹혁명을 꿈꾸다 HTML 5 & API 입문)

위 이미지를 보면 상단 Web Browser 가 ie9 이고 아래는 Opera 인데요...
ie9 은 편집불가인 부분도 편집이 되는 문제가 있군요... opera 는 편집불가인 부분은 편집되지 않았습니다.

그리고 이렇게 지정한 contenteditable 의 속성값은 아래와 같이 javascirpt 를 이용하여 해당 Element 의 isContentEditable 속성에 접근할 수 있습니다.

var  editor = document.getElementById("editor");
var isEditable = editor.isContentEditable

designMode 속성을 사용하면 문서 전체를 편집할 수 있습니다.
designMode 속성은 document 객체가 갖는 속성으로 "on", "off" 값을 갖습니다. 문서 뿐만이 아니라 iframe 의 contentDocument 속성에 사용하게되면 iframe 내의 내용 또한 편집할 수 있습니다.

<iframe src="about:blank" width="300" height="300" onload="this.contentDocument.designMode='on'"></iframe>

5-2. Rich Text Edit API
위에서 언급한 contenteditable 속성 이나 designMode 속성을 편집모드로 설정한 상태에서 editing API 를 사용하면 편집내용을 Rich Text 로 다룰 수 있습니다.
이때 사용하는 것이 execCommand API 입니다.

이제 execCommand 를 살펴보도록 하겠습니다.
document 객체에서 사용할 수있는 함수로 commandId, showUI, value 세가지의 Parameter를 갖습니다.
이 중 첫번째 Parameter 이외에는 생략할 수 있지만 Command Id 에 따라 값을 지정하여 호출합니다.

document . execCommand(commandId [, showUI [, value ] ] )

이 때, Command ID 로 사용되는 명령어들은 다음과 같은 것들이 있습니다. 이 들을 간단히 살펴보겠습니다.

CommandID	설명
bold	선택한 문자열을 굵은 글씨로 전환합니다.
createLink	선택한 문자열을 하이퍼링크로 전환합니다.
delete	선택한 문자열이나 커서 앞의 문자를 삭제합니다.
formatBlock	선택한 문자열을 지정한 Tag로 감쌉니다.
forwardDelete	선택한 문자열이나 커서 뒤의 문자를 삭제합니다.
insertImage	커서가 위치한 곳에 이미지를 삽입합니다.
insertHTML	문자를 커서가 위치한 곳에 HTML 형태로 삽입합니다.
insertLineBreak	커서의 위치에 줄바꿈을 삽입합니다.
insertOrderedList	커서의 위치에 순서있는 리스트(ol tag)를 삽입합니다.
insertUnorderedList	커서의 위치에 순서없는 리스트(ul tag)를 삽입합니다.
insertParagraph	커서의 위치에 Paragraph (p tag 나 div tag : Browser 마다 구현은 각각 다름) 를 삽입합니다.
insertText	커서의 위치에 문자를 삽입합니다.
italic	선택한 문자열을 italic 체로 전환합니다.
redo	undo 를 재실행합니다.
selectAll	편집가능한 컨텐츠를 모두 선택합니다.
subscript	선택한 문자열을 아랫첨자로 전환합니다.
superscript	선택한 문자열을 윗첨자로 전환합니다.
undo	실행을 취소합니다.
unlink	선택한 문자열에 적용된 하이퍼링크를 제거합니다.
unselect	선택을 취소합니다.
VendorID-customCommandID	Browser 제작사들 마다의 명령어를 지정하여 호출합니다.

(참고 : http://www.w3.org/TR/html5/dnd.html#editing-apis)

execCommand함수 이외에도 다섯가지의 함수가 더 존재하는데 이 함수들을 이용하면 WYSIWYG Editor 를 만들 수 있을 것입니다.
그럼, execCommand 함수 이외의 다섯가지 함수에 대해서 살펴보도록 하겠습니다.

함수명	설명
document.queryCommandEnabled(commandId)	지정한 명령어(commandId)가 실행가능한지 여부를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
document.queryCommandIndeterm(commandId)	지정한 명령어(commandId)의 효과가 일정한가 여부를 반환합니다.
document.queryCommandState(commandId)	지정한 명령어(commandId)의 상태를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
document.queryCommandSupported(commandId)	지정한 명령어(commandId)가 지원되는지 여부를 반환합니다.
document.queryCommandValue(commandId)	지정한 명령어(commandId)의 현재값을 반환합니다.

위 함수들과 commandid 들을 사용하면 쉽게? Editor 를 구현할 수 있겠네요...
하지만 HTML 4와 다른 점이 무엇이 있을까요? HTML 4 에서는 구현하지 못했던 것들이었을까요?
여러분들도 아시겠지만 그렇지 않습니다.
지금까지 많은 Web 개발자들이 제작하고, 또 사용하고 있는 WYSIWYG Editor 들을 보면 알 수 있듯이 예전 부터 만들어 왔고, 계속 사용되어져 왔습니다.
하지만, HTML 5 로 넘어오면서 달라진 점이라고 한다면 표준화하여 API 를 작성하고 통일된 사양아래서 개발할 수 있도록 하였다는데 주목해야 할 것입니다.


Editor 를 제작하면 더 좋았을 듯 하지만 그 내용은 추후에 추가해 보도록 하겠습니다.
(제일 짧은 글이네요... 성의없어 보이는 것은... ㄷㄷㄷ ㅡㅡ'


행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\