• 리��� ���������란 : ��������� 가��� ���������, ������������ ������, ���������, ������, 문단���렬����� ���맷��� ���������고���다
  
  
• HTML5는 리������������ ��������� API를 ���������로 규������다.
  
• ���가된 API : contenteditable������, 문��� designMode
  
• 내��� ��������� ��가능��� ������(div��)를 ���������게 ���기 ������ API.
  
  
• contenteditable : ������ ��������� 내���만 ������ 가능
  
• designmode : 문��� ������를 ��������� ��� ������
  
  

* contenteditable : 문��������� 값���로 가���, ""(null), "true" "false"

• "false"��������� 값��� 가��� 때 ���당 문��� ������가능
  
• contenteditable��� ������는 ������되므로 ������가능��� ������ ��������� ������는 모두 ������가능
  
  

- ������ 가능 -
<div id="deit" contenteditable="true"></div>
<div id="deit" contenteditable></div>

- ������ ��가-
<div id="deit" contenteditable="false"></div>

- ������ ������ 반��� -
isContentEditable로 ������ ������가능 ������������ ("true", "false", "inherit"반���)

- ���바������립���를 ��������� ������ ������ ������기 -
var editor = document.getElementById("editor");
if(editor.isContentEditable)

designMode : document객���가 가��� ��������� ���나, 'on' 'off'모드 가���
window.document : ������ ������������ ������ ������가능
iFrame��� contentDocument를 대��� - iFrame������ 내��� ������가능

innerHTML : HTML���그를 ��������� 문������
textContent : HTML���그 ������ ������ 문������만

- innerHTML -
<div id="editor" contenteditabl></div>
var editor = document.getElementById("editor");
// innerHTML ��������� ������들���
alert(editor.innerHTML);

- textConetent -

id="editor"
src="about:blank"
width="300" height="200"
onload="this.contentDocument.designMode = 'on'>

</iframe>
var editor= document.getElementById("editor");
// textContent ��������� ������들���
alert(editor.contentDocument.body.textContent);

• window나 document객���가 가��� getSelection()메���드를 ������������ Selection��� 객��� ������
  

- selection 객��� ������ -

• ������ 범������ DOM��������� 관련된 API
  
  • anchorNode : ��������� ��������� ��������� ���는 ��������� DOM노드 가������
    
  • anchorOffset : anchorNode ��������� ��������� ��������� ��������� ��������� 반���
    
  • focusNode : ��������� ���료��� ��������� ���는 ��������� DOM노드 가������
    
  • focusOffset : focusNode ��������� ��������� ���료��� ��������� ��������� 가������
    
    
• ������ ������ ������
  
  • collapse(parentNode, offset) : ��������� ������(parrentNode)������ ��������� ������(offset)���로 ������를 ���동������다
    
  • collapseToStart() : ������ ������������ 맨 ������로 ������를 ���동������
    
  • collapseToEnd() : ������된 ������������ 맨 뒤로 ������를 ���동������
    
  • isCollapsed() : ���������가 ������되��� ������는데 ������가 ������ 때 true반���
    
    
• Selection 객������ toString���������면 ��������� 범������ 문������(HTML������)가������
  

- ������된 문������ ���력 -
alert(window.getSelection().toString());

• ��������� 내��� ���력 기록 undoManager가 ������(��������� 객���) ���당��� ��단
  
• DOM변경��� 브라������가 ������ ���력 관리 ����� ������
  
  

- undoManager��� ���력 ���가���는 부�� -
undoManager.add({
}, "���겨���기");

- ������ ������ -
window.addEventListener("undo", function(event) {
}, false);

<공��� ���������>
http://www.quirksmode.org/dom/execCommand/
<블로그>
http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn?articleid=91