= 리치텍스트 편집 = * 리치 텍스트란 : 서식을 가진 텍스트, 텍스트의 폰트, 스타일, 색상, 문단정렬등의 포맷을 저장하고있다 * HTML5는 리치텍스트 편집용 API를 표준으로 규정한다. * 추가된 API : contenteditable속성, 문서 designMode * 내용 편집이 불가능한 요소(div등)를 편집하게 하기 위한 API. * contenteditable : 특정 요소의 내용만 편집 가능 * designmode : 문서 전체를 편집할 수 있음 = contenteditable = * contenteditable : 문자열을 값으로 가짐, ""(null), "true" "false" * "false"이외의 값을 가질 때 해당 문서 편집가능 * contenteditable의 상태는 상속되므로 편집가능한 요소 하위의 요소는 모두 편집가능
isContentEditable로 현재 편집가능 알수잇음 ("true", "false", "inherit"반환) 자바스크립트를 이용한 편집 var editor = document.getElementById("editor"); if(editor.isContentEditable) editor.contentEditable = "false"; = designMode = designMode : document객체가 가진 속성의 하나, 'on' 'off'모드 가짐 window.document : 현재 웹페이지 전체 편집가능 iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능 = 편집가능영역에서 편집할 내용 가져오기 = innerHTML : HTML태그를 포함한 문자열 textContent : HTML태그 제외 순수 문자열만 = 선택한 범위 조작 = Selection 객체에 toString사용하면 선택한 범위의 문자열(HTML제외)가져옴 = 웹 어플리케이션의 실행취소기능 = 조작한 내용 이력 기록 undoManager가 저장(최상위 객체) 상당히 간단, DOM변경은 브라우저가 실행 이력 관리 간편 좋음 = 관련 사이트 = <공식 사이트> http://www.quirksmode.org/dom/execCommand/ <블로그> http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=91