리치텍스트 편집 ¶
- 리치 텍스트란 : 서식을 가진 텍스트, 텍스트의 폰트, 스타일, 색상, 문단정렬등의 포맷을 저장하고있다
- HTML5는 리치텍스트 편집용 API를 표준으로 규정한다.
- 추가된 API : contenteditable속성, 문서 designMode
- 내용 편집이 불가능한 요소(div등)를 편집하게 하기 위한 API.
- contenteditable : 특정 요소의 내용만 편집 가능
- designmode : 문서 전체를 편집할 수 있음
contenteditable ¶
* contenteditable : 문자열을 값으로 가짐, ""(null), "true" "false"
<div id="deit" contenteditable="true"></div>
<div id="deit" contenteditable></div>
- "false"이외의 값을 가질 때 해당 문서 편집가능
- contenteditable의 상태는 상속되므로 편집가능한 요소 하위의 요소는 모두 편집가능
<div id="deit" contenteditable="true"></div>
<div id="deit" contenteditable></div>
- 편집 불가-
<div id="deit" contenteditable="false"></div>
<div id="deit" contenteditable="false"></div>
- 편집 상태 반환 -
isContentEditable로 현재 편집가능 알수잇음 ("true", "false", "inherit"반환)
isContentEditable로 현재 편집가능 알수잇음 ("true", "false", "inherit"반환)
- 자바스크립트를 이용한 편집 속성 정하기 -
var editor = document.getElementById("editor");
if(editor.isContentEditable)
var editor = document.getElementById("editor");
if(editor.isContentEditable)
editor.contentEditable = "false";
designMode ¶
designMode : document객체가 가진 속성의 하나, 'on' 'off'모드 가짐
window.document : 현재 웹페이지 전체 편집가능
iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능
window.document : 현재 웹페이지 전체 편집가능
iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능
src = "about:blank"
width = "300" height = "200"
onload="this.contentDocument.designMode='on'">
</iframe>width = "300" height = "200"
onload="this.contentDocument.designMode='on'">
편집가능영역에서 편집할 내용 가져오기 ¶
innerHTML : HTML태그를 포함한 문자열
textContent : HTML태그 제외 순수 문자열만
textContent : HTML태그 제외 순수 문자열만
- innerHTML -
<div id="editor" contenteditabl></div>
var editor = document.getElementById("editor");
// innerHTML 속성을 읽어들임
alert(editor.innerHTML);
<div id="editor" contenteditabl></div>
var editor = document.getElementById("editor");
// innerHTML 속성을 읽어들임
alert(editor.innerHTML);
- textConetent -
var editor= document.getElementById("editor");
// textContent 속성을 읽어들임
alert(editor.contentDocument.body.textContent);
id="editor"
src="about:blank"
width="300" height="200"
onload="this.contentDocument.designMode = 'on'>
</iframe>src="about:blank"
width="300" height="200"
onload="this.contentDocument.designMode = 'on'>
var editor= document.getElementById("editor");
// textContent 속성을 읽어들임
alert(editor.contentDocument.body.textContent);
