• 리��� ���������란 : ��������� ������ ���������, ������������ ������, ���������, ������, 문���������등��� �������� ������������������
  
  
• 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