티스토리 뷰
Language/HTML
[ HTML ] 편집용 iframe 창에 작성된 내용 textarea 로 복사 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전
MiniNeko 2016. 1. 2. 22:23편집용 iframe 창에 작성된 내용 textarea 로 복사 방법
<iframe> 창 안에 작성한 내용을 textarea 필드에 복사할 때는 프레임창에 innerHTML 속성을 이용하여 값을 가져오면 textarea 의 value 속성에 가져온 값을 저장해 값을 복사한다.
<html>
<head>
<script type="text/javascript">
// 창이 열리자 마자 iframe 을 편집모드로 전환하는 방법
window.onload = function initEditor() {
Editor0 = document.getElementById("styleIframe").contentWindow.document;
Editor0.designMode = "on";
/* 편집 모드에 기본 스타일을 정의하기 */
/* 기본적으로 textarea 에서 iframe 의 내용을 볼 때 <head>테그(아래에 있는) 부분이 없어도 상관은 없다. */
Editor0.open();
Editor0.write("<html>");
Editor0.write("<head>");
Editor0.write("<style type="text/scc">");
Editor0.write("body { padding:0px; margin:5px; font-size:9pt; font-family:Dotum; }");
Editor0.write("td { font-size:9pt; font-family:Dotum; }");
Editor0.write("</style>");
Editor0.write("</head><body>");
Editor0.write("</body></html>");
Editor0.close();
}
/* iframe 값을 textarea 로 옮겨주는 함수 */
function copy() {
form.textarea.value = styleIframe.document.body.innerHTML;
}
</script>
</head>
<body>
<form name="form"
<iframe id="styleIframe"></iframe>
<input type="button" value="내용보기" onClick="copy()">
<textarea name="textarea" cols="40" rows="10">
'Language > HTML' 카테고리의 다른 글
| [ HTML ] 자동 줄바꿈을 통한 테이블 크기 고정 (0) | 2016.01.02 |
|---|---|
| [ HTML ] IFRAME - 투명 배경 (0) | 2016.01.02 |
| [ HTML ] 편집용 iframe 창에 스타일 지정하는 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] 문서에 단축키 달기 - accesskey Attribute (0) | 2016.01.02 |