Mozilla 한국 커뮤니티

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
	<head>
		<title>새 문서</title>
		<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			function go()
			{
				var prefix = "<span style=\"background-color: #aaa\">[[";
				var postfix = "]<strong>]</strong></span>";

				if(navigator.appName == "Microsoft Internet Explorer")
				{
					var range = document.selection.createRange();
					range.pasteHTML(prefix + range.htmlText + postfix);
				}
				else
				{
					var range = window.getSelection().getRangeAt(0);
					// ????
				}
			}
		</script>
	</head>
	<body>
		<button onclick="go()">GO</button>
		<div id="test">Strings Strings Strings Strings Strings Strings Strings Strings</div>
	</body>
</html>

원하는 작업은 마우스로 어느 곳을 선택한 다음에 버튼을 누르면 선택한 곳 앞뒤로 HTML 코드를 넣어주는 것입니다. 위에 보시면 IE의 경우는 마우스로 선택한 range의 html을 읽어오고(htmlText) 고쳐서 다시 쓰면(pasteHTML) 되는데 Gecko DOM으로 구현하기가 어렵네요

처음 생각한 방법은 range.startOffset, range.endOffset을 가지고 전체 html 문자열을 자르고 붙이는 거였는데 한글이 포함돼 있을 경우 정확히 잘라지지 않는 문제가 있어 포기했습니다.

두번째 방법은,

Code: Select all

var selected = range.extractContents();
range.insertNode(range.createContextualFragment(prefix + ???? + postfix));

이건데.. 선택한부분을 잘라내서(extractContents) 편집해 붙이는(insertNode)건데 선택한 부분(selected)의 html을 읽어오는 방법을 모르겠습니다.

selected는 DocumentFragment 오브젝트라는데요 DocumentFragment 내부의 HTML을 뽑아내는 메소드가 있을법도 한데.. Gecko DOM Reference를 뒤져봤지만 검색실력이 딸려서 원하는 정보를 찾기가 어렵네요..

요약하자면.. DocumentFragment 오브젝트에 딸려있는 Properties, Methods를 알고 싶습니다. DocumentFragment 오브젝트 내부의 HTML 코드를 뽑아내는 방법도요..

Mozilla 한국 커뮤니티

자바스크립트 관련 질문좀..

자바스크립트 관련 질문좀..