U E D R , A S I H C RSS
ZeroWiki

html5/richtext-edit

Difference between r1.3 and the current

@@ -1,3 +1,6 @@
[[pagelist(html5)]]
[[tableofcontents]]
= 리치텍스트 편집 =
* 리치 텍스트란 : 서식을 가진 텍스트, 텍스트의 폰트, 스타일, 색상, 문단정렬등의 포맷을 저장하고있다

@@ -13,15 +16,18 @@
* "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)
editor.contentEditable = "false";
@@ -41,12 +47,65 @@
innerHTML : HTML태그를 포함한 문자열
textContent : HTML태그 제외 순수 문자열만

- innerHTML -
<div id="editor" contenteditabl></div>
var editor = document.getElementById("editor");
// innerHTML 속성을 읽어들임
alert(editor.innerHTML);
 
- textConetent -
<iframe
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);
 
= 선택한 범위 조작 =
Selection 객체에 toString사용하면 선택한 범위의 문자열(HTML제외)가져옴
* window나 document객체가 가진 getSelection()메서드를 이용하여 Selection형 객체 생성
- selection 객체 생성 -
var selection = window.getSelection();
 
* 선택 범위의 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가 저장(최상위 객체) 상당히 간단 
* DOM변경은 브라우저가 실행 이력 관리 간편 좋음

- undoManager에 이력 추가하는 부분 -
undoManager.add({
operation: "add-favorite",
id : 100
}, "즐겨찾기");
 
- 실행 취소 -
window.addEventListener("undo", function(event) {
var data = event.data;
if(data.operation == "add-favorite") {
var id = data.id;
// 즐겨찾기로부터의 삭제 처리
...
}
...
}, false);

= 관련 사이트 =
<공식 사이트>


1. 리치텍스트 편집

  • 리치 텍스트란 : 서식을 가진 텍스트, 텍스트의 폰트, 스타일, 색상, 문단정렬등의 포맷을 저장하고있다

  • HTML5는 리치텍스트 편집용 API를 표준으로 규정한다.
  • 추가된 API : contenteditable속성, 문서 designMode
  • 내용 편집이 불가능한 요소(div등)를 편집하게 하기 위한 API.

  • contenteditable : 특정 요소의 내용만 편집 가능
  • designmode : 문서 전체를 편집할 수 있음

2. contenteditable

* 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)
editor.contentEditable = "false";

3. designMode

designMode : document객체가 가진 속성의 하나, 'on' 'off'모드 가짐
window.document : 현재 웹페이지 전체 편집가능
iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능


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

4. 편집가능영역에서 편집할 내용 가져오기

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);


5. 선택한 범위 조작

  • window나 document객체가 가진 getSelection()메서드를 이용하여 Selection형 객체 생성
- selection 객체 생성 -
var selection = window.getSelection();

  • 선택 범위의 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());

6. 웹 어플리케이션의 실행취소기능

  • 조작한 내용 이력 기록 undoManager가 저장(최상위 객체) 상당히 간단
  • DOM변경은 브라우저가 실행 이력 관리 간편 좋음

- undoManager에 이력 추가하는 부분 -
undoManager.add({
operation: "add-favorite",
id : 100
}, "즐겨찾기");

- 실행 취소 -
window.addEventListener("undo", function(event) {
var data = event.data;
if(data.operation == "add-favorite") {
var id = data.id;
// 즐겨찾기로부터의 삭제 처리
...
}
...
}, false);

7. 관련 사이트

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0558 sec