Html5/richtext-edit - Revision history

Maintenance script: Repair batch-0008 pages from live compare

2026-03-27T01:40:37Z

Repair batch-0008 pages from live compare

← Older revision		Revision as of 01:40, 27 March 2026
Line 1:		Line 1:
	~~[[pagelist~~(html5)&~~#93;]~~		<!-- MONIWIKI PageList(html5) -->
			* [[html5]]
			* [[html5/VA]]
			* [[html5/canvas]]
			* [[html5/communicationAPI]]
			* [[html5/drag-and-drop]]
			* [[html5/form]]
			* [[html5/geolocation]]
			* [[html5/offline-web-application]]
			* [[html5/others-api]]
			* [[html5/outline]]
			* [[html5/overview]]
			* [[html5/richtext-edit]]
			* [[html5/section]]
			* [[html5/video&audio]]
			* [[html5/web-storage]]
			* [[html5/web-workers]]
			* [[html5/webSqlDatabase]]
			* [[html5/websocket]]
			* [[html5/문제점]]
			* [[html5practice]]
			* [[html5practice/roundRect]]
			* [[html5practice/계층형자료구조그리기]]
			* [[html5practice/즐겨찾기목록만들기]]
	__TOC__		__TOC__

Maintenance script: Repair MoniWiki formatting after migration

2026-03-26T14:01:49Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 14:01, 26 March 2026
Line 18:		Line 18:

	* 편집 가능 -		* 편집 가능 -
	~~<~~div id="deit" contenteditable="true"~~><~~/div~~>~~		<div id="deit" contenteditable="true"></div>
	~~<~~div id="deit" contenteditable~~><~~/div~~>~~		<div id="deit" contenteditable></div>

	* 편집 불가-		* 편집 불가-
	~~<~~div id="deit" contenteditable="false"~~><~~/div~~>~~		<div id="deit" contenteditable="false"></div>

	* 편집 상태 반환 -		* 편집 상태 반환 -
Line 38:		Line 38:
	iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능		iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능

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

	= 편집가능영역에서 편집할 내용 가져오기 =		= 편집가능영역에서 편집할 내용 가져오기 =
Line 49:		Line 49:

	* innerHTML -		* innerHTML -
	~~<~~div id="editor" contenteditabl~~><~~/div~~>~~		<div id="editor" contenteditabl></div>
	var editor = document.getElementById("editor");		var editor = document.getElementById("editor");
	// innerHTML 속성을 읽어들임		// innerHTML 속성을 읽어들임
Line 55:		Line 55:

	* textConetent -		* textConetent -
	~~<~~iframe		<iframe
	id="editor"		id="editor"
	src="about:blank"		src="about:blank"
	width="300" height="200"		width="300" height="200"
	onload="this.contentDocument.designMode = 'on'~~>~~		onload="this.contentDocument.designMode = 'on'>
	~~<~~/iframe~~>~~		</iframe>
	var editor= document.getElementById("editor");		var editor= document.getElementById("editor");
	// textContent 속성을 읽어들임		// textContent 속성을 읽어들임
Line 113:		Line 113:
	<블로그>		<블로그>
	http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=91		http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=91

imported>rabierre at 10:40, 8 October 2010

2010-10-08T10:40:48Z

← Older revision		Revision as of 10:40, 8 October 2010
Line 1:		Line 1:
			[[pagelist(html5)]]
			__TOC__

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

imported>rabierre at 10:35, 8 October 2010

2010-10-08T10:35:32Z

@@ Line 64: / Line 64: @@
 = 선택한 범위 조작 =
-Selection 객체에 toString사용하면 선택한 범위의 문자열(HTML제외)가져옴
+* window나 document객체가 가진 getSelection()메서드를 이용하여 Selection형 객체 생성
 = 웹 어플리케이션의 실행취소기능 =
-조작한 내용 이력 기록 undoManager가 저장(최상위 객체) 상당히 간단, DOM변경은 브라우저가 실행 이력 관리 간편 좋음
+* 조작한 내용 이력 기록 undoManager가 저장(최상위 객체) 상당히 간단
 = 관련 사이트 =

imported>rabierre at 10:18, 8 October 2010

2010-10-08T10:18:56Z

← Older revision		Revision as of 10:18, 8 October 2010
Line 14:		Line 14:
	* contenteditable의 상태는 상속되므로 편집가능한 요소 하위의 요소는 모두 편집가능		* contenteditable의 상태는 상속되므로 편집가능한 요소 하위의 요소는 모두 편집가능

			* 편집 가능 -
	<div id="deit" contenteditable="true"></div>		<div id="deit" contenteditable="true"></div>
	<div id="deit" contenteditable></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");		var editor = document.getElementById("editor");
	if(editor.isContentEditable)		if(editor.isContentEditable)
Line 41:		Line 44:
	innerHTML : HTML태그를 포함한 문자열		innerHTML : HTML태그를 포함한 문자열
	textContent : 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);


	= 선택한 범위 조작 =		= 선택한 범위 조작 =

imported>rabierre at 10:10, 8 October 2010

2010-10-08T10:10:10Z

← Older revision		Revision as of 10:10, 8 October 2010
Line 1:		Line 1:
	= 리치텍스트 편집 =		= 리치텍스트 편집 =
			* 리치 텍스트란 : 서식을 가진 텍스트, 텍스트의 폰트, 스타일, 색상, 문단정렬등의 포맷을 저장하고있다

	* HTML5는 리치텍스트 편집용 API를 표준으로 규정한다.		* HTML5는 리치텍스트 편집용 API를 표준으로 규정한다.
	* 추가된 API : contenteditable속성, 문서 designMode		* 추가된 API : contenteditable속성, 문서 designMode
Line 7:		Line 9:
	* designmode : 문서 전체를 편집할 수 있음		* designmode : 문서 전체를 편집할 수 있음

			= contenteditable =
	* contenteditable : 문자열을 값으로 가짐, ""(null), "true" "false"		* contenteditable : 문자열을 값으로 가짐, ""(null), "true" "false"
	* "false"이외의 값을 가질 때 해당 문서 편집가능		* "false"이외의 값을 가질 때 해당 문서 편집가능
Line 24:		Line 27:
	editor.contentEditable = "false";		editor.contentEditable = "false";

			= designMode =
	* 문서 전체 편집 -		designMode : document객체가 가진 속성의 하나, 'on' 'off'모드 가짐
	~~designmode~~ : document객체가 가진 속성, 'on' 'off'모드 가짐
	window.document : 현재 웹페이지 전체 편집가능		window.document : 현재 웹페이지 전체 편집가능
	iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능		iFrame의 contentDocument를 대상 - iFrame안의 내용 편집가능
Line 36:		Line 38:
	</iframe>		</iframe>

	= 편집가능영역에서 내용 가져오기 =		= 편집가능영역에서 편집할 내용 가져오기 =
	innerHTML : HTML태그를 포함한 문자열		innerHTML : HTML태그를 포함한 문자열
	textContent : HTML태그 제외 순수 문자열만		textContent : HTML태그 제외 순수 문자열만

imported>rabierre at 09:57, 8 October 2010

2010-10-08T09:57:51Z

← Older revision	Revision as of 09:57, 8 October 2010
(No difference)

imported>rabierre at 09:57, 8 October 2010

2010-10-08T09:57:09Z

New page

= 리치텍스트 편집 =
* 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)
editor.contentEditable = "false";

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

<iframe
src = "about:blank"
width = "300" height = "200"
onload="this.contentDocument.designMode='on'">
</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