이미지 출처 : http://caniuse.com/#feat=contenteditable
인라인 편집은 현재 모든 브라우저가 지원하고 있습니다. 의외로 현재 HTML5 의 가장 많은 부분을 지원하는 Opera 의 mini 버전이 지원하지 않다는 것의 좀 의외군요.
인라인 편집
- contenteditable : 개별적인 HTML 요소를 편집 가능하게 만든다. ( true / false / inherit )
- designmode : 전체 문서를 편집 가능하게 만든다. ( on / off )
- spellcheck : 스펠링 체크 기능을 활성화한다. ( true / false )
contenteditable 예제코드
<!DOCTYPE html>
<html>
<head>
<title>
Editable <div> Element
</title>
<script type="text/javascript">
function createLink()
{
var url = prompt( "Enter URL: ", "http://" );
if ( url )
document.execCommand( "createLink", false, url );
}
function showSource()
{
var content = document.getElementById( "div" ).innerHTML;
content.replace( /</g, '<' );
content.replace( />/g, '>' );
alert( content );
}
</script>
</head>
<body>
<h1> Editable <div> Element</h1>
<div>
<input type="button" value="Bold"
onclick="document.execCommand( 'bold', false, null );">
<input type="button" value="Italic"
onclick="document.execCommand( 'italic', false, null );">
<input type="button" value="Underline"
onclick="document.execCommand( 'underLine', false, null );">
<input type="button" value="Add Link" onclick="createLink();">
<input type="button" value="Display Source" onclick="showSource();">
</div>
<br>
<div id="div" style="border:solidblack; height:300px; width=400px" contenteditable="true">
</div>
</body>
</html>
<결과>
- Add Link 의 경우 블럭을 씌우지 않고 Add Link 를 수행할 경우, 최하단과 같이 링크가 걸린 주소가 같이 입력됩니다.
contenteditable.htmldesignmode 예제코드
<!DOCTYPE html>
<html>
<head>
<title>
Editable <div> Element
</title>
<script type="text/javascript">
var iframe;
function loader()
{
iframe = document.getElementById( "content" );
iframe.contentDocument.designMode = "on";
}
function showSource()
{
var content = iframe.contentDocument.body.innerHTML;
content.replace( /</g, "<" );
content.replace( />/g, ">l" );
alert( content );
}
function createLink()
{
var url = prompt( "Enter URL:", "http://" );
if ( url )
iframe.contentDocument.execCommand( "createLink", false, url );
}
</script>
</head>
<body onload="loader()">
<h1>Editable <iframe></h1>
<div>
<input type="button" value="Bold"
onclick="iframe.contentDocument.execCommand( 'bold', false, null );">
<input type="button" value="Italic"
onclick="iframe.contentDocument.execCommand( 'italic', false, null );">
<input type="button" value="Underline"
onclick="iframe.contentDocument.execCommand( 'underLine', false, null );">
<input type="button" value="Add Link" onclick="createLink();">
<input type="button" value="Display Source" onclick="showSource();">
</div>
<br>
<iframe id="content" style="border:solidblack; height:300px; width=400px"
src="about:blank">
</iframe>
</body>
</html>
- 한 HTML 소스 안에 있는 인라인 편집을 이용할 떄는 document 객체를 이용하여 접근하지만, iframe 을 사용한 인라인 편집을 이용할 떄는 contentDocument 객체를 이용하여 접근합니다.
<결과>
spellCheck 예제코드
<!DOCTYPE html>
<html>
<head>
<title>
Spell Check
</title>
</head>
<body>
<h1>Spell Check</h1>
<div id="spell_check_true" contenteditable="true" spellcheck="true"
style="border:solidblack; width:200px; height:200px">
</div>
<div id="spell_check_false" contenteditable="true" spellcheck="false"
style="border:solidblack; width:200px; height:200px">
</div>
</body>
</html>
<결과 1>
<결과 2>
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [HTML] REST or RESTful 이 뭔가요? ( Representational state transfer ) (0) | 2012.09.18 |
|---|---|
| [HTML5] 브라우저 히스토리 다루기 ( Browser History ) - 기초, Tutorial, Sample code. (0) | 2012.09.08 |
| [HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] 드래그 앤 드롭 ( Drag and Drop ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] Canvas 요소로 그림 그리기 - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
댓글