티스토리 뷰
Language/HTML
[ HTML ] 편집용 iframe 창에 스타일 지정하는 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전
MiniNeko 2016. 1. 2. 22:23편집용 iframe 창에 스타일 지정하는 방법
프레임창에 스타일을 지정하기 위해서는 스타일 코드를 document.write() 메소드를 사용하여 작성해야 한다.
스타일 선언부터 스타일 내용을 프레임창에 작성하는 방법으로 프레임창에 스타일을 지정한다.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- **********
편집 프레임을 두 개 생성하고, 하나는 기본 스타일을 정의하고
하나는 스타일을 정의 하지 않고 글을 써보자. 차이점을 알아보기
********** -->
<script type="text/javascript">
function initEditor() {
Editor0 = document.getElementById("styleIframe").contentWindow.document;
Editor1 = document.getElementById("normalIframe").contentWindow.document;
Editor0.designMode = "on";
Editor1.designMode = "on";
/* 편집 모드에 기본 스타일을 정의하기 */
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();
}
</script>
<title>Insert title here</title>
</head>
<body>
<a href="#" onClick="initEditor();return false;">아이프레임을 편집모드로</a><br />
<iframe id="styleIframe"></iframe>
<iframe id="normalIframe"></iframe>
</body>
'Language > HTML' 카테고리의 다른 글
| [ HTML ] IFRAME - 투명 배경 (0) | 2016.01.02 |
|---|---|
| [ HTML ] 편집용 iframe 창에 작성된 내용 textarea 로 복사 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] 문서에 단축키 달기 - accesskey Attribute (0) | 2016.01.02 |
| [ HTML ] TABLE, DIV 의 크기 고정 (0) | 2016.01.02 |